In the Building A Navigation Menu With HTML5 and CSS Part 1 post we wrote a sample HTML of your web site main navigation menu. In this article we will now write the CSS styles needed to both position and address the overall look-and-feel of a vertical navigation typically displayed in a sidebar. Assuming, your sidebar is placed on the left of your web pages, we’ll accordingly assign the CSS ID #leftnav to the HTML element wrapping that navigation (<nav id=”leftnav”>….</nav>). Now comes the CSS style sheet.
#leftnav {
width:200px;
height:auto;
overflow:hidden;
margin:0;
padding:0;
background:#efefef; /*light grey background color */
border:solid 2px #ccc; /* 2 pixels thick grey border */
border-radius:10px; /* round corners with a 10 pixels radius */
-moz-border-radius:10px; /* mozilla Firefox web browsers */
-webkit-border-radius:10px; /* Webkit Engine Bases Wed browsers: Google Chrome & Apple Safari */
-o-border-radius:10px; /* Opera web browser */
-ms-border-radius:10px;
}
#leftnav ul{
width:100%; /* matches the width of its parent container #leftnav */
list-style:none; /* prevent the display of bullets decoration */
margin:10px 0; /* makes sure the first and last <li>..</li> elements are 10px away from the top and bottom edges */
padding:0;
}
#leftnav ul li{
float:none; /* just in case */
margin:1px 0 0; /* */
padding:0;
}
#leftnav ul li a{
display:block; /* Remove this rule and see what happens to help you understand its meaning */
height:30px; /* defines the height of each link */
line-height:28px; /* use to vertically center the link text */
text-align:left /* flushes the link text to left */
color:#000; /* text color */
text-decoration:none; /* prevent the underline */
margin:0;
padding:0;
background:#e5e5e5; /* you can define a background color/image */
}
#leftnav ul li a:hover{
/* add rules to create a rollover effects: background color/image, text color, … */
background:#fff; /* changes the background color to white as a rollover effect */
}
#leftnav ul li a:visited{
color:#000; /* prevent text link to change color when the target page is already visited */
}
#leftnav ul li ul{
width:150px; /* default width of sub-menus */
height:auto;
overflow:hidden;
border:solid 1px #ccc;
position:absolute;
top:0; /* you can add a few more pixels to nudge it down */
right:0; /* use left:0; instead for a right sidebar */
z-index:1000;
display:none; /* sub-menu will be hidden by default */
}
#leftnav ul li ul li{
width:100%;
}
#leftnav ul li ul li a{
/* not really needed unless the sub-links have CSS different from the top level navigation links */
}
#leftnav ul li:hover ul{
display:block; /*reveal the sub-menu when the mouse is over the main list/link item */
}
The ”list-style:none;” CSS rule defined earlier in the #leftnav ul selector also applies to sub-menus . Although the sub-menu selector #leftnav ul li ul is more specific, all the rules defined in the #leftnav ul selector apply to it unless overridden. In the same token, all the rules defines in the #leftnav ul li also applied #leftnav ul li ul li because the latter is just a special case. The same rules apply to #leftnav ul li a and #leftnav ul li ul li a selectors.
Adding CSS IDs to the top-level list item (e.g. <li id=”home”>…</li>) allows us in this case to target a specific sub-menu and also choose which main link should be highlighted to give your web site visitors an indication about which section of your web site the current page is part of. So let first use that specificity to target each sub-menu in our navigation bar.
Although we defined a default width of 150px in the sub-menu selector # leftnav ul li ul, because some links in the sub-menu have more anchor text than other in most case you would have different widths for those sub-menus. You can also define a default width that is enough to accommodate the longest anchor text in your sub-menus.
I personally call that choice a lack of aesthetic sense. It doesn’t hurt to write a few extra lines of CSS to get visually pleasing sub-menus. So here we go:
#leftnav ul li#services li ul{
width:180px; /* adjust this number as needed */
}
#leftnav ul li#products li ul{
width:200px; /* adjust as needed */
}
From experience also you would set a sub-menu width to allow 30 to 40px breathing room between the anchor text and the right edge of the sub-menu item. In fact what I just called a breathing room or more of a safety zone.
You see some web browsers such as Safari tend to make your text bolder (anti-alias) then what you would have in say Firefox. When that happens, your text occupy more horizontal space and will wrap the anchor text if there isn’t enough room to display it in a single line.
Also keep in mind, if you chose a font that is not available to the end-user’s web browser it will be substituted by another font close to what you have defined. That also will affect the width needed to accommodate your sub-menus’ anchor text.