Web Design Workshop 4 – Navigation
Contents
[ hide ]
Web Design Workshop 4 – Navigation
This Workshop will add style to the navigation and sub-navigation of our website. We start from the style-sheet as elaborated in Web Design Workshop 3. You may download the style-sheet from the Web Design Workshop Materials section.
The Goal of this Workshop is to style the navigation and sub-navigation of the Semiomantics XO RC site.
1. Navigation and Sub-Navigation
Navigation and sub-navigation have to do with usability and accessibility of our site, one of the most important criteria of good Web Design. Your site must be easy to navigate and the content should be easily accessible by anyone.
Semiomantics XO distinguishes between a Navigation and a Sub-Navigation Menu, whereas navigation concerns Categories and sub-navigation accesses Pages.
2. Category Navigation
The Page navigation 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; }
Block 1
#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 element; an element with a greater stack order is always in front of an element with a lower stack order.z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
On my black white gray and red color scheme I select dark gray for the background of the menu tabs: #222222. Alternatively there is a background image available as well. You may edit a new image and load to your wp-content/themes/xo/image folder.
I will just use the background color element.
#navigation {
clear: left;
background: #222222/*url(images/nav.png) repeat*/;
float: left;
width: 100%;
z-index: 100;
position: relative;
margin-top: 20px;
}
Block 4
This block defines the font, font size, line-hight and the position of the navigation bar. Change to taste considering that navigation must be clear and easily 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.
Block 5
#navigation ul a {
display: block;
font-weight: bold;
color: #000;
border-right: 1px solid #fff;
padding: 0 15px;
}
The block defines display of each category tab as a block (not a table) the font weight (bold, normal), font color, the vertical border line delimiting each tab (border-right) as well as the padding (horizontal right in this case).
I change font color to white (#fff) and the border to red (#B30000)
#navigation ul a {
display: block;
font-weight: bold;
color: #fff0;
border-right: 1px solid #B30000;
padding: 0 15px;
}
Block 6
The block defines the hover effect we want to achieve in the navigation bar, by defining hover effect fora single navigation block (tab).
#navigation ul a:hover {
color: #FFFFFF;
background: #B30000;
text-decoration: none;
}
We now see the following navigation:
… and the hover effect:
3. ol, ul, li
ol, ul, li stand for ordered list, unordered list and list item.
You encounter these tags namely in menus, navigation and such like, often with included display and link styling.
Block 7
#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 display sub-category tabs.
The #c5c5c5 colored hover background of the tabs is not in line with my project, nor is the font color of #555 or the background color #d1d1d1.
Let’s change to display the drop-down boxes with a black background and white text, hovering to the same red and white display as we use in the navigation 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 category navigation style on the demo site HERE
You may download the style-sheet from the Materials section to start the next session, Web Design Workshop 5 – Sub-Navigation (Page Navigation).
More about this Topic
If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.
Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics.
