Contents
[ hide ]
Web Design Workshop Navigation (continued)
Subsequent to last night’s Workshop let’s recap some of the challenges faced when styling the Category Navigation. At the bottom you will find 3 sample navigation style codes as elaborated during the workshop.
1. Starting Position
During the previous session we had added style to the first level category navigation. Yesterday we added design to the drop-down menu.
Toni Leuenberger's raw Category Navigation
Toni’s starting style-sheet shows the styled top level Category list with the hover effect, Green-White switching to White-Green.
The drop-down is raw in gray tones and needs to be styled.
In our style-sheet, the concerned lines are lines 110 – 173 for the whole navigation design and for the drop down menu particularly lines 168 – 173.
The first important element for our Navigation Web Design is to be found on line 112:
border-bottom: 1px solid #fff;
This line adds a white bottom border to each list item block.
2. The Drop-down Menu Style
We are now looking at lines 168 – 173:
#navigation ul ul { position:absolute; top:24px; left:0; background:#ffffff; display:none; list-style:none;}
#navigation ul ul li {position:relative; border:1px solid #FFFFFF; width:188px; margin:0; }
#navigation ul ul li a {display:block; padding:0 7px 0 12px; color: #fff; background-color:#000080; border-bottom: 1px solid #FFFFFF; font-size: 12px;}
#navigation ul ul li a:hover {background-color:#B30000;}
#navigation ul ul li:hover ul { display: block; }
#navigation ul ul ul { left:188px; top:-1px; display: none; }
We start from the main Navigation, an unordered list (ul):
Felisa Ryan's Navigation
ul, li
In our style-sheet we find names for each item: navigation ul is the navigation unordered list, i.e. all the categories which will be represented in this list on top level. Sub-categories are dealt with as subordinated lists or lists under lists. If we have a list of the top level categories, then we can also have a list of second and third and so on level categories.
To designate the list under a list we use ul (for the first list) ul (for the second unordered list). In our case ul ul defines the second level list of categories which we want to show as a drop-down menu.
Felisa Ryan's Navigation Drop-down Menu
On Felisa’s drop-down menu we see the styling of the ul ul li … meaning the List Items (li) of the subordinated list (ul ul).
Under the Category Sports Club Fundraising we find a Category called Cricket Club Fundraising.
The problem is that the sub-category displays on two lines because of the length of the sub-category name.
In our original style-sheet, the width of the list item (li) in the subordinated category list (ul ul) is defined in line 169 as follows:
#navigation ul ul li {position:relative; border:1px solid #FFFFFF; width:159px; margin:0; }
In order to increase the width of navigation ul ul li (you see how easy it becomes), you just increase the width:159px;.
In Felisa’s case, we just stretched it to 188 pixels:
Felisa's adjusted Navigation Drop-down
You see how the sub-menu now fits nicely. We just need to be aware that all sub-categories will be displayed in a block of that width. If we have just one specially long category name amongst all the sub-categories we display, it may look better to make an exception for that category and display the name on two lines. Up to you to decide.
Other examples of similar challenges we find on Larrie Perkins’ play-ground:
Larrie Perkins Test Navigation
Now: if we have to go through the 50 States on that menu on Larrie’s site, then we will most likely have to find another solution all together (a scroll-bar) or he may want to create different top categories, like East, Center and West.
But in any case, it will be worth while to increase the ul ul li width.
Also the white bottom-border from line 112 would make the design clearer.
The font color on the main category is not ideal; white is better for readability.
One more interesting menu is to be found on Gene Line’s Auto Parts site:
Gene Line Auto Parts Navigation
But then …
Gene Line Auto Parts Navigation 2
Ute Schaedler’s site shows a similar challenge:
Ute Schaedler Navigation Drop-down
We could of course decrease line spacing or line height for the drop-down menu by adding a call to ul ul li as follows:
line-height:130%;
The 130% means: line height is 130% of the font size.
Boruch Rappaport Navigation
Nice shot on Boruch Rappaport’s site where the ul ul li is adjusted to a width of 173 pixels. The choice of a color scheme with a light and a dark color results in a nice alternation of the colors when hovering.
A particular problem can arise if you use just black and white tones on the site. Besides the problem of readability, from a web design point of view, Bianca Gubalke wanted to show dark sepapartors on the white background of the drop-down menu.
This is achieved by modifying line #navigation ul ul li as follows:
#navigation ul ul li {position:relative; border-bottom:1px solid #222222; width:159px; margin:0; }
As you can see, we have replaced the # navigation ul ul li call border with a call for border-bottom.
Bianca Gubalke Navigation
As a result we now have the white background on the drop-down whereas the List Items are separated by a 1 pixel wide dark gray line. This is a more elegant solution than the full border as on a full border, all around the list item, the bottom border of the superior item and the top border of the inferior list item generate the impression of a 2 pixels wide horizontal separator, while the vertical borders left and right are just 1 pixel strong.
Final Style-sheet for the Navigation
1. The Demo Site:
Yorgo Nestoridis Demo Navigation
The corresponding code is as follows:
#navigation {
clear: left;
background: #222222 /*url(images/nav.png) repeat*/;
float: left;
width: 100%;
z-index: 100;
position: relative;
margin-top: 20px;
}
#navigation ul * {
margin:0;
padding:0
}
#navigation ul {
padding: 0;
margin: 0;
}
#navigation ul li {
position:relative;
font-family: Verdana, Arial, Helvetica, sans-serif;
list-style-type: none;
float: left;
font-size: 12px;
line-height: 24px;
padding: 0;
margin: 0;
position: relative;
}
#navigation ul a {
display: block;
font-weight: bold;
color: #FFFFFF;
border-right: 1px solid #B30000;
padding: 0 15px;
}
#navigation ul a:hover {
color: #FFFFFF;
background: #B30000;
text-decoration: none;
}
#navigation ul li:hover ul { display: block; z-index: 1000;}
#navigation ul li:hover ul ul { display: none; }
#navigation ul ul { position:absolute; top:24px; left:0; background:#000000; display:none; list-style:none;}
#navigation ul ul li {position:relative; border:1px solid #FFFFFF; width:159px; margin:0; }
#navigation ul ul li a {display:block; padding:0 7px 0 12px; color: #FFFFFF; background-color:#222222; border-right: 0; font-size: 12px; }
#navigation ul ul li a:hover {background-color:#B30000}
#navigation ul ul li:hover ul { display: block; }
#navigation ul ul ul { left:159px; top:-1px; display: none; }
2. White as on Bianca’s site
#navigation {
clear: left;
background: #FFFFFF /*url(images/nav.png) repeat*/;
float: left;
width: 100%;
z-index: 100;
position: relative;
margin-top: 20px;
}
#navigation {
clear: left;
background: #FFFFFF/*url(images/nav.png) repeat*/;
float: left;
width: 100%;
z-index: 100;
position: relative;
margin-top: 20px;
}
#navigation ul * {
margin:0;
padding:0
}
#navigation ul {
padding: 0;
margin: 0;
}
#navigation ul li {
position:relative;
font-family: Verdana, Arial, Helvetica, sans-serif;
list-style-type: none;
float: left;
font-size: 12px;
line-height: 24px;
padding: 0;
margin: 0;
position: relative;
}
#navigation ul a {
display: block;
font-weight: bold;
color: #000;
border-right: 1px solid #fff;
padding: 0 15px;
}
#navigation ul a:hover {
color: #fff;
background: #000;
text-decoration: none;
}
#navigation ul li:hover ul { display: block; z-index: 1000;}
#navigation ul li:hover ul ul { display: none; }
#navigation ul ul { position:absolute; top:24px; left:0; background:#ffffff; display:none; list-style:none;}
#navigation ul ul li {position:relative; border-bottom:1px solid #222222; width:159px; margin:0; }
#navigation ul ul li a {display:block; padding:0 7px 0 12px; color: #222; background-color:#ffffff; border-right: 0; font-size: 12px; }
#navigation ul ul li a:hover {background-color:#222222}
#navigation ul ul li:hover ul { display: block; }
#navigation ul ul ul { left:159px; top:-1px; display: none; }
3. Red and Blue like on Felisa’s site
#navigation {
clear: left;
border-bottom: 1px solid #fff;
background: #000080 /*url(images/nav.png) repeat*/;
float: left;
width: 100%;
z-index: 100;
position: relative;
margin-top: 20px;
}
#navigation {
clear: left;
background: #000080/*url(images/nav.png) repeat*/;
float: left;
width: 100%;
z-index: 100;
position: relative;
margin-top: 20px;
}
#navigation ul * {
margin:0;
padding:0
}
#navigation ul {
padding: 0;
margin: 0;
}
#navigation ul li {
position:relative;
font-family: Verdana, Arial, Helvetica, sans-serif;
list-style-type: none;
float: left;
font-size: 12px;
line-height: 24px;
padding: 0;
margin: 0;
position: relative;
}
#navigation ul a {
display: block;
font-weight: bold;
color: #FFFFFF;
border-right: 1px solid #fff;
padding: 0 15px;
}
#navigation ul a:hover {
color: #ffffff;
background: #B30000;
text-decoration: none;
}
#navigation ul li:hover ul { display: block; z-index: 1000;}
#navigation ul li:hover ul ul { display: none; }
#navigation ul ul { position:absolute; top:24px; left:0; background:#ffffff; display:none; list-style:none;}
#navigation ul ul li {position:relative; border:1px solid #FFFFFF; width:188px; margin:0; }
#navigation ul ul li a {display:block; padding:0 7px 0 12px; color: #fff; background-color:#000080; border-bottom: 1px solid #FFFFFF; font-size: 12px;}
#navigation ul ul li a:hover {background-color:#B30000;}
#navigation ul ul li:hover ul { display: block; }
#navigation ul ul ul { left:188px; top:-1px; display: none; }
I am looking forward to today’s Workshop where we will take care of the Page sub-navigation.
More about this Topic
| Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics.
If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription. |
This page is wiki editable click here to edit this page.