Web Design Workshop 4 – Navigation

by Yorgo Nestoridis

This Work­shop will add style to the nav­i­ga­tion and sub-navigation of our web­site. We start from the style-sheet as elab­o­rated in Web Design Work­shop 3. You may down­load the style-sheet from the Web Design Work­shop Mate­ri­als section.

The Goal of this Work­shop is to style the nav­i­ga­tion and sub-navigation of the Semi­oman­tics XO RC site.

Nav­i­ga­tion and sub-navigation have to do with usabil­ity and acces­si­bil­ity of our site, one of the most impor­tant cri­te­ria of good  Web Design. Your site must be easy to nav­i­gate and the con­tent should be eas­ily acces­si­ble by anyone.

Semi­oman­tics XO dis­tin­guishes between a Nav­i­ga­tion and a Sub-Navigation Menu, whereas nav­i­ga­tion con­cerns Cat­e­gories and sub-navigation accesses Pages.

The Page nav­i­ga­tion is defined as per lines 111 – 163:

#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: #444;
background: #c5c5c5;
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:#d1d1d1; 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: #555; background-color:#d1d1d1; border-right: 0; font-size: 12px; }
#navigation ul ul li a:hover {background-color:#c5c5c5}
#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;
}

The block is about self-explanatory except maybe:

z-index: 100; z-index defines the stack order of an ele­ment; an ele­ment with a greater stack order is always in front of an ele­ment with a lower stack order.z-index only works on posi­tioned ele­ments (position:absolute, position:relative, or position:fixed).

On my black white gray and red color scheme I select dark gray for the back­ground of the menu tabs: #222222. Alter­na­tively there is a back­ground image avail­able as well. You may edit a new image and load to your wp-content/themes/xo/image folder.

I will just use the back­ground color element.

#navigation {
clear: left;
background: #222222/*url(images/nav.png) repeat*/;
float: left;
width: 100%;
z-index: 100;
position: relative;
margin-top: 20px;
}

This block defines the font, font size, line-hight and the posi­tion of the nav­i­ga­tion bar. Change to taste con­sid­er­ing that nav­i­ga­tion must be clear and eas­ily readable.

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


Changes: none as much as I am concerned.

#navigation ul a {
display: block;
font-weight: bold;
color: #000;
border-right: 1px solid #fff;
padding: 0 15px;
}

The block defines dis­play of each cat­e­gory tab as a block (not a table) the font weight (bold, nor­mal), font color, the ver­ti­cal bor­der line delim­it­ing each tab (border-right) as well as the padding (hor­i­zon­tal right in this case).
I change font color to white (#fff) and the bor­der to red (#B30000)

#navigation ul a {
display: block;
font-weight: bold;
color: #fff0;
border-right: 1px solid #B30000;
padding: 0 15px;
}

The block defines the hover effect we want to achieve in the nav­i­ga­tion bar, by defin­ing hover effect fora sin­gle nav­i­ga­tion block (tab).

#navigation ul a:hover {
color: #FFFFFF;
background: #B30000;
text-decoration: none;
}

We now see the fol­low­ing navigation:

… and the hover effect:

ol, ul, li stand for ordered list, unordered list and list item.

You encounter these tags namely in menus, nav­i­ga­tion and such like, often with included dis­play and link styling.

#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:#d1d1d1; 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: #555; background-color:#d1d1d1; border-right: 0; font-size: 12px; }
#navigation ul ul li a:hover {background-color:#c5c5c5}
#navigation ul ul li:hover ul { display: block; }
#navigation ul ul ul { left:159px; top:-1px; display: none; }

This block will define how our menu, namely the drop-down menu will dis­play sub-category tabs.

The #c5c5c5 col­ored hover back­ground of the tabs is not in line with my project, nor is the font color of #555 or the back­ground color #d1d1d1.
Let’s change to dis­play the drop-down boxes with a black back­ground and white text, hov­er­ing to the same red and white dis­play as we use in the nav­i­ga­tion menu bar:

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

You can see the final result of the cat­e­gory nav­i­ga­tion style on the demo site HERE

You may down­load the style-sheet from the Mate­ri­als sec­tion to start the next ses­sion, Web Design Work­shop 5 – Sub-Navigation (Page Navigation).

• Web Design Work­shop Navigation
• Web Design Work­shop 5 Sub-navigation
• Web Design Work­shop 6 Main Wrapper
• Web Design Work­shop 5 – Sub-Navigation
• Web Design Work­shop 2

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

• design@navigator ua
• work­shop 3 wrap­per design

Related posts:

1. Web Design Work­shop 3 – Site Title
2. Web Design Work­shop 2
3. Web Design Workshop
4. Web Design
5. Web Design Elements

Tags: Category Navigation, Navigation, Semiomantics XO Style, Web Design CSS, Web Design Navigation, Web Design Workshop, Yorgo Nestoridis

This entry was posted on September 7, 2009 at 1:07 am and is filed under Web Design, Yorgo Nestoridis. You can follow any responses to this entry through the RSS 2.0 feed.