Faced a small problem in firefox: http://jsfiddle.net/3jmeS/, when clicking on the link active style fires on all element, but i need only on current. Is there a fix?
HTML:
<nav>
<div id="left-nav">
<ul>
<li class="active">
Dashboard
</li>
<li>
Dashboard
</li>
<li>
Dashboard
</li>
<li>
Dashboard
</li>
<li>
Dashboard
</li>
</ul>
</div>
</nav>
CSS:
#left-nav {
float: left;
font-family: Tahoma;
font-size: 13px;
height: 38px;
position: relative;
width: 600px;
min-width: 600px;
}
#left-nav li{
display: inline-block;
padding: 0 12px;
}
#left-nav li a {
color: #fff;
display: block;
line-height: 35px;
padding: 0 11px;
}
#left-nav li a:active{
position: relative;
top:1px;
}
#left-nav li.active a{
display: block;
}
Related
I'm having an issue with my anchors not covering full width of the sidebar (for instance, 'Search'). I realise that this is because of padding, but I'm not sure how to overcome the issue whilst keeping the padded effect. I have tried to add a class (like, '.no-submenu) on the <li> and did .no-submenu a { margin: 0 -1.5rem; padding: 0 3rem; }, but it only partially solved the problem - my icons were off, they go all the way to the left:
I couldn't find the place online to upload SVG files (my icons are SVG), so I created a minimal example without icons. Icons are handled as background-image on the anchors.
<div class="sidebar">
<nav>
<ul class="menu">
<li id="search">
<a class="sidebar-icon" href="/search/notes/">Search</a>
</li>
<li id="dashboard">
<a class="sidebar-icon">Dashboard</a>
</li>
<li id="notebooks" class="has-submenu">
<div class="menu-item">
<span class="sidebar-icon">Notebooks</span>
<span class="arrow"></span>
</div>
<ul class="submenu">
<li id="new-notebook"><a class="sidebar-icon" href="/notebooks/create/">New Notebook</a></li>
<li id="view-notebooks"><a class="sidebar-icon" href="/notebooks/">View Notebooks</a></li>
</ul>
</li>
<li id="tags" class="has-submenu">
<div class="menu-item">
<span class="sidebar-icon">Tags</span>
<span class="arrow"></span>
</div>
<ul class="submenu">
<li id="view-tags"><a class="sidebar-icon" href="/tags/">View Tags</a></li>
</ul>
</li>
<li id="account" class="has-submenu">
<div class="menu-item">
<span class="sidebar-icon">Account</span>
<span class="arrow"></span>
</div>
<ul class="submenu">
<li id="settings"><a class="sidebar-icon" href="/accounts/settings/">Settings</a></li>
<li id="logout"><a class="sidebar-icon" href="/accounts/logout/">Logout</a></li>
</ul>
</li>
</ul>
</nav>
</div>
CSS:
#import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600);
#font-face { font-family: "ionicons"; src: url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1"); src: url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"), url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.ttf?v=2.0.1") format("truetype"), url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.woff?v=2.0.1") format("woff"), url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg"); font-weight: normal; font-style: normal; }
.sidebar {
width: 200px;
height: 100vh;
padding: 1rem 1.5rem;
background-color: #348ceb;
font-family: 'Source Sans Pro';
font-size: 14px;
position: fixed;
box-sizing: border-box;
}
ul {
list-style: none;
}
ul, li {
padding: 0;
margin: 0;
}
li {
padding: 0.5rem 0;
}
.submenu {
display: none;
overflow-y: hidden;
margin: 0 -1.5rem;
background-color: #3287e3;
}
.submenu li:first-child {
padding: 0.1rem 0 0 1.5rem;
}
.submenu li:last-child {
padding: 0 0 0.1rem 1.5rem;
}
.submenu li {
padding: 0.5rem 1.5rem;
}
.menu > li:hover {
background-color: #3287e3;
}
.menu > li {
position: relative;
color: #F9FAFC;
font-weight: bold;
margin: 0 -1.5rem;
padding: 0.5rem 1.5rem;
}
.menu > li > a {
display: block;
color: #F9FAFC;
text-decoration: none;
font-weight: bold;
}
.menu > li > a:hover {
color: white;
}
.submenu > li > a {
display: block;
color: #F9FAFC;
text-decoration: none;
}
.submenu > li > a:hover {
color: white;
}
.submenu > li {
font-weight: normal !important;
}
.arrow {
display: inline-block;
width: 10px;
transition: all 0.5s ease-in-out;
transform-origin: left center;
font-size: 0.5em;
position: absolute;
right: 0.75em;
}
.arrow:after {
content: '\f125';
font-family: 'ionicons';
color: white;
}
.rotated {
transform: rotate(90deg);
transition: transform 0.5s ease;
}
.menu-item {
display: flex;
align-items: center;
}
.menu-item > span:first-child {
flex: 1;
}
.sidebar-icon {
background-repeat: no-repeat;
padding-left: 25px;
}
JS (jQuery):
$(document).ready(function() {
$('.has-submenu').click(function() {
$(this).toggleClass('active');
$(this).children('.menu-item').children('.arrow').toggleClass('rotated');
if ($(this).hasClass('active')) {
$(this).children('.submenu').slideDown("slow");
}
else {
$(this).children('.submenu').slideUp("slow");
}
});
});
How can I overcome the issue?
Here is the demo.
#EDIT:
so, I want this:
but the menu item has to be fully clickable, i.e. you can click on any part of it and it brings you to, say, Search. To see the area it currently covers, right-click on the anchor or inspect the element.
I guess this is what you want:
<li style="padding: 0.5rem 0" id="search">
<a style="width: 100% !important; padding: none" class="sidebar-icon" href="/search/notes/">
<i style="padding-right: 10px">#</i>Search</a>
</li>
Wrestling with mutli-drop menu. (97% working) Select United States 1 menu, then pick Nevada menu item. There's a gray bar at the bottom. Same for US -> California. Gray bar below Los Angeles. I've played with margins and padding for a while. The :hover I was hoping would highlight the entire li portion. "Seems" to for all but most bottom menu item. (BTW: US -> California -> San Francisco -> SOMA. You'll see top left corner doesn't quite touch. That's maybe related.)
Any tips welcome. Thanks. Milton.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#nav_wrapper {
margin-top: 20px;
background: #b3c2bf; /* BG color across screen */
}
#nav_wrapper ul
{
list-style:none;
margin: 0;
padding: 0;
background: #b3c2bf; /* BG color across screen */
}
#nav_wrapper ul li
{
display: inline-block;
position:relative;
margin: 0;
padding: 0;
min-width: 150px;
max-width: 150px;
text-align: left;
}
#nav_wrapper ul li a
{
display: block;
/* white here gives the text white color */
color: white;
font-family: Arial, sans-serif;
font-weight: 200;
font-size: 16px;
text-decoration:none;
padding: 0;
margin 0;
}
#nav_wrapper ul ul
{
display:none;
position:absolute;
top: 100%; /* 100% of height of the li element */
padding: 0;
margin 0;
}
#nav_wrapper ul ul a
{
line-height: 120%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#nav_wrapper ul ul ul {
top: 0;
left:100%;
}
p.menutextpadder { padding-left: 12px; padding-top: 4px; padding-bottom: 4px; }
#nav_wrapper ul li:hover > ul { display:block; }
#nav_wrapper ul li:hover { background-color: Blue; color: white; }
</style>
<body>
<nav id="nav_wrapper">
<ul class="topmenu">
<li><p class="menutextpadder">United States 1
<ul>
<li class="dir"><p class="menutextpadder">Arizona</p></li>
<li class="dir"><p class="menutextpadder">California
<ul>
<li><p class="menutextpadder">San Francisco
<ul>
<li><p class="menutextpadder">Pacific Heights</p></li>
<li><p class="menutextpadder">SOMA
<ul>
<li class="dir"><p class="menutextpadder">Spear Street</p></li>
<li class="dir"><p class="menutextpadder">Moscone Center</li>
</ul>
</li>
</ul>
</li>
<li><p class="menutextpadder">Los Angeles</p></li>
</ul>
<li class="dir"><p class="menutextpadder">Nevada</p></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
add the css rule below
ul{
font-size: 0;
}
Snippet below
#nav_wrapper {
margin-top: 20px;
background: #b3c2bf;
/* BG color across screen */
}
#nav_wrapper ul {
list-style: none;
margin: 0;
padding: 0;
background: #b3c2bf;
/* BG color across screen */
}
#nav_wrapper ul li {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
min-width: 150px;
max-width: 150px;
text-align: left;
}
#nav_wrapper ul li a {
display: block;
/* white here gives the text white color */
color: white;
font-family: Arial, sans-serif;
font-weight: 200;
font-size: 16px;
text-decoration: none;
padding: 0;
margin 0;
}
#nav_wrapper ul ul {
display: none;
position: absolute;
top: 100%;
/* 100% of height of the li element */
padding: 0;
margin 0;
}
#nav_wrapper ul ul a {
line-height: 120%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#nav_wrapper ul ul ul {
top: 0;
left: 100%;
}
p.menutextpadder {
padding-left: 12px;
padding-top: 4px;
padding-bottom: 4px;
}
#nav_wrapper ul li:hover > ul {
display: block;
}
#nav_wrapper ul li:hover {
background-color: Blue;
color: white;
}
#nav_wrapper .menutextpadder {} ul {
font-size: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<body>
<nav id="nav_wrapper">
<ul class="topmenu">
<li>
<a href="#">
<p class="menutextpadder">United States 1</a>
<ul>
<li class="dir">
<a href="#">
<p class="menutextpadder">Arizona</p>
</a>
</li>
<li class="dir">
<a href="#">
<p class="menutextpadder">California</p>
</a>
<ul>
<li>
<a href="#">
<p class="menutextpadder">San Francisco</a>
<ul>
<li>
<a href="#">
<p class="menutextpadder">Pacific Heights</p>
</a>
</li>
<li>
<a href="#">
<p class="menutextpadder">SOMA</a>
<ul>
<li class="dir">
<a href="#">
<p class="menutextpadder">Spear Street</p>
</a>
</li>
<li class="dir">
<a href="#">
<p class="menutextpadder">Moscone Center</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
<p class="menutextpadder">Los Angeles</p>
</a>
</li>
</ul>
<li class="dir">
<a href="#">
<p class="menutextpadder">Nevada</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
link to codepen
I'm trying to make it so there is a max-height (or height) set to this very long list, and for the rest to scroll. I was able to easily achieve that with
height:800px;
overflow:scroll;
The Problem I have is that the "#subcategory" items stop displaying on hover when I apply overflow:scroll
Any ideas are greatly appreciated!
Basic HTML Structure
<!-- Start Auto Transport -->
<li id="topCategory">Auto Transport
<ul id="subContainer">
<li id="subCategory">Auto Insurance</li>
<li id="subCategory">Auto Payment</li>
<li id="subCategory">Gas</li>
<li id="subCategory">Parking</li>
<li id="subCategory">Public Transportation</li>
<li id="subCategory">Service Parts</li>
<!-- add new becomes text field, user enters text then it becomes added as category -->
<li class="hideNewCategory">
<a class="mmNewCat" data-number="1" href="#"><i class="icon ion-plus-circled"></i>Add New Category</a>
<input id="mmCat1" class="mmCatInpt" type="text" placeholder="Enter New Category" maxlength="25"></input>
</li>
</ul>
</li>
<!-- End Auto Transport -->
<!-- Start Bills Utilities -->
<li id="topCategory">Bills & Utilities
<ul id="subContainer">
<li id="subCategory">Domain Names</li>
<li id="subCategory">Fraud Protection</li>
<li id="subCategory">Home Phone</li>
<li id="subCategory">Hosting</li>
<li id="subCategory">Mobile Phone</li>
<li id="subCategory">Television</li>
<li id="subCategory">Utilities</li>
<!-- add new becomes text field, user enters text then it becomes added as category -->
<li class="hideNewCategory">
<a class="mmNewCat" data-number="2" href="#"><i class="icon ion-plus-circled"></i>Add New Category</a>
<input id="mmCat2" class="mmCatInpt" type="text" placeholder="Enter New Category" maxlength="25"></input>
</li>
</ul>
</li>
<!-- End Bills Utilities -->
relevant CSS
ul li:hover #topContainer{
display: block;
}
ul li a {
display: block;
color: $blue;
text-decoration: none;
font-family: verdana;
font-size: 14px;
}
#topContainer{
list-style: none;
color: $blue;
width: 260px;
height: auto;
background: $white;
opacity: 0.9;
position: absolute;
z-index: 1000;
height:800px;
overflow:scroll;
}
#topCategory {
float: none;
width: auto;
height: 20px;
text-align: left;
margin-left: 15px;
}
#topCategory a:hover {
color: $white;
background-color: $blue;
}
#topCategory:hover #subContainer {
display: block;
}
#topCategory a {
font-size: 16px;
position: relative;
bottom: 41px;
margin-top: 46px;
margin-left: -15px;
padding: 20px 0 20px 20px;
border-bottom:1px solid $grey-10;
}
#topCategory a:hover {
color: $white;
}
#subContainer {
list-style: none;
color: $blue;
display: none;
font-size: 12px;
min-width: 230px;
width: 150px;
height: auto;
background: $white;
opacity: 0.9;
margin: -107px 0 0 245px; position: absolute;
z-index: 1000;
white-space:nowrap;
}
#subContainer a{
border-bottom:1px solid $grey-10;
margin-top: 41px;
}
#subCategory {
float: none;
width: auto;
height: 20px;
text-align: left;
margin-left: 10px;
}
#subCategory:hover {
background: none;
}
.active {
background: $white;
}
#subCategory {
float: none;
// hover length
width:215px;
// hover length
text-align: left;
height: 25px;
margin-left: 15px;
margin-right: -43px;
}
Subcategory should be a Class name not an Id element, change that and things will look cleaner.
.subcategory {
}
<div class="subcategory"></div>
This code works great for centering a Navigation Bar when it is just text. Both Horizontally and Vertically.
But when I try use an image for the Home (house image) - it offsets and is no longer centered in the middle vertically.
.navt {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
background-color: black;
}
.navt li {
display: inline;
}
.navt a {
display: inline-block;
padding: 12px;
font-weight: normal;
color: white;
}
.navt li a:hover {
color: white;
background-color: pink;
}
<ul class="navt">
<li>
<a href="_index.cfm">
<img src="../images/hm_wht_tr30.png" height="20" border="0">
</a>
</li>
<li>This
</li>
<li>And
</li>
<li>That
</li>
<li>Here
</li>
<li>There
</li>
</ul>
If you add .navt img { vertical-align: middle; } you make the image align vertically in regards to the text.
.navt {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
background-color: black;
}
.navt li {
display: inline;
}
.navt a {
display: inline-block;
padding: 0 12px;
font-weight: normal;
color: white;
height: 44px;
line-height: 44px;
}
.navt li a:hover {
color: white;
background-color: pink;
}
.navt img {
vertical-align: middle;
}
<ul class="navt">
<li>
<a href="_index.cfm">
<img src="../images/hm_wht_tr30.png" height="20" border="0">
</a>
</li>
<li>This
</li>
<li>And
</li>
<li>That
</li>
<li>Here
</li>
<li>There
</li>
</ul>
Hello I have CSS dropdown menu, when I hover with the mouse to the firt item the submenu shows correctly but when I try to go down for example to the last item of the submenu before I get there the submenu gets closed... I can't find what I'm doing wrong Below is my code:
CSS:
#lang_select ul{
padding: 0px;
margin: 0;
border: solid 1px #e1e1e1;
width: 85px;
}
#lang_select li{
display: inline;
position: relative;
}
#lang_select ul ul{
position: absolute;
display: none;
}
#lang_select li:hover ul{
display: block;
}
#lang_select a{
text-decoration: none;
color:#333;
font-family: Open Sans;
font-size:12px;
}
.lang-down{
padding-left:10px;
}
HTML:
<div id="lang_select">
<ul>
<li>
Language <i class="fa fa-angle-down"></i>
<ul>
<li><span class="lang-down"><i class="fa fa-globe"></i> Albanian</span></li>
<li><span class="lang-down"><i class="fa fa-globe"></i> French</span></li>
<li><span class="lang-down"><i class="fa fa-globe"></i> German</span></li>
</ul>
</li>
</ul>
</div>
demo - http://jsfiddle.net/r0bdcn7y/1/
change the css
#lang_select li {
display: inline-block;
position: relative;
width: 100%;
}
#lang_select ul {
padding: 0px;
margin: 0;
border: solid 1px #e1e1e1;
width: 85px;
}
#lang_select li {
display: inline-block;
position: relative;
width: 100%;
}
#lang_select ul ul {
position: absolute;
display: none;
}
#lang_select li:hover ul {
display: block;
}
#lang_select a {
text-decoration: none;
color: #333;
font-family: Open Sans;
font-size: 12px;
}
.lang-down {
padding-left: 10px;
}
<div id="lang_select">
<ul>
<li> Language <i class="fa fa-angle-down"></i>
<ul>
<li><span class="lang-down"><i class="fa fa-globe"></i> Albanian</span>
</li>
<li><span class="lang-down"><i class="fa fa-globe"></i> French</span>
</li>
<li><span class="lang-down"><i class="fa fa-globe"></i> German</span>
</li>
</ul>
</li>
</ul>
</div>