Web Design Workshop Navigation

by Yorgo Nestoridis

Sub­se­quent to last night’s Work­shop let’s recap some of the chal­lenges faced when styling the Cat­e­gory Nav­i­ga­tion. At the bot­tom you will find 3 sam­ple nav­i­ga­tion style codes as elab­o­rated dur­ing the work­shop.

Dur­ing the pre­vi­ous ses­sion we had added style to the first level cat­e­gory nav­i­ga­tion. Yes­ter­day we added design to the drop-down menu.

Toni Leuenberger’s raw Cat­e­gory Navigation

Toni’s start­ing style-sheet shows the styled top level Cat­e­gory list with the hover effect, Green-White switch­ing to White-Green.

The drop-down is raw in gray tones and needs to be styled.

In our style-sheet, the con­cerned lines are lines 110 – 173 for the whole nav­i­ga­tion design and for the drop down menu par­tic­u­larly lines 168 – 173.

The first impor­tant ele­ment for our Nav­i­ga­tion Web Design is to be found on line 112:

border-bottom: 1px solid #fff;

This line adds a white bot­tom bor­der to each list item block.

We are now look­ing 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 Nav­i­ga­tion, an unordered list (ul):

Felisa Ryan’s Navigation

In our style-sheet we find names for each item: nav­i­ga­tion ul is the nav­i­ga­tion unordered list, i.e. all the cat­e­gories which will be rep­re­sented in this list on top level. Sub-categories are dealt with as sub­or­di­nated lists or lists under lists. If we have a list of the top level cat­e­gories, then we can also have a list of sec­ond and third and so on level categories.

To des­ig­nate the list under a list we use ul (for the first list) ul (for the sec­ond unordered list). In our case ul ul defines the sec­ond level list of cat­e­gories which we want to show as a drop-down menu.

Felisa Ryan’s Nav­i­ga­tion Drop-down Menu

On Felisa’s drop-down menu we see the styling of the ul ul li … mean­ing the List Items (li) of the sub­or­di­nated list (ul ul).

Under the Cat­e­gory Sports Club Fundrais­ing we find a Cat­e­gory called Cricket Club Fundraising.

The prob­lem is that the sub-category dis­plays on two lines because of the length of the sub-category name.

In our orig­i­nal style-sheet, the width of the list item (li)  in the sub­or­di­nated cat­e­gory 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 nav­i­ga­tion 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 Nav­i­ga­tion Drop-down

You see how the sub-menu now fits nicely. We just need to be aware that all sub-categories will be dis­played in a block of that width. If we have just one spe­cially long cat­e­gory name amongst all the sub-categories we dis­play, it may look bet­ter to make an excep­tion for that cat­e­gory and dis­play the name on two lines. Up to you to decide.

Other exam­ples of sim­i­lar chal­lenges we find on Lar­rie Perkins’ play-ground:

Lar­rie 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 solu­tion all together (a scroll-bar) or he may want to cre­ate dif­fer­ent top cat­e­gories, like East, Cen­ter 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 cat­e­gory is not ideal; white is bet­ter for readability.

One more inter­est­ing menu is to be found on Gene Line’s Auto Parts site:

Gene Line Auto Parts Navigation

But then …

Gene Line Auto Parts Nav­i­ga­tion 2

Ute Schaedler’s site shows a sim­i­lar challenge:

Ute Schaedler Nav­i­ga­tion Drop-down

We could of course decrease line spac­ing 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 Rap­pa­port Navigation

Nice shot on Boruch Rappaport’s site where the ul ul li is adjusted to a width of 173 pix­els. The choice of a color scheme with a light and a dark color results in a nice alter­na­tion of the col­ors when hovering.

A par­tic­u­lar prob­lem can arise if you use just black and white tones on the site. Besides the prob­lem of read­abil­ity, from a web design point of view, Bianca Gubalke wanted to show dark sep­a­partors on the white back­ground of the drop-down menu.

This is achieved by mod­i­fy­ing line #nav­i­ga­tion 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 # nav­i­ga­tion ul ul li call bor­der with a call for border-bottom.

Bianca Gubalke Navigation

As a result we now have the white back­ground on the drop-down whereas the List Items are sep­a­rated by a 1 pixel wide dark gray line. This is a more ele­gant solu­tion than the full bor­der as on a full bor­der, all around the list item, the bot­tom bor­der of the supe­rior item and the top bor­der of the infe­rior list item gen­er­ate the impres­sion of a 2 pix­els wide hor­i­zon­tal sep­a­ra­tor, while the ver­ti­cal bor­ders left and right are just 1 pixel strong.

1. The Demo Site:

Yorgo Nestoridis Demo Navigation

The cor­re­spond­ing 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; }

#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; }


#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 look­ing for­ward to today’s Work­shop where we will take care of the Page sub-navigation.

• Web Design Work­shop 4 – Navigation
• Web Design Work­shop 5 Sub-navigation
• Web Design Work­shop 11 Background
• Web Design Work­shop 8 Footer
• Web Design Work­shop 5 – Sub-Navigation

This page is wiki editable click here to edit this page.

• typog­ra­phy hand­writ­ing font
• web design siyah nav
• design work­shop
• ele­gant shop webdesign
• header 1080*173
• work­shop nav­i­ga­tion website
• work­shop on nav­i­ga­tion for web

Related posts:

1. Web Design Work­shop 4 – Navigation
2. Web Design Work­shop 3 – Site Title
3. Web Design Workshop
4. Web Design
5. Web Design Back­ground Graphics

Tags: Category Navigation, Navigation, Semiomantics XO Style, Toni Leuenberger, Web Design Fonts and Typography, Web Design Layouts, Web Design Navigation, Web Design Workshop, Web Design Workshop Navigation, Website Design, Yorgo Nestoridis

This entry was posted on September 9, 2009 at 8:23 pm and is filed under Bianca Gubalke, Boruch Rappaport, Felisa Ryan, Gene Line, Larrie Perkins, Ute Schaedler, Web Design, Web Design Basics, Yorgo Nestoridis. You can follow any responses to this entry through the RSS 2.0 feed.