Web Design Workshop 5 – Sub-Navigation

by Yorgo Nestoridis

Based on the expe­ri­ence gained from Web Design Work­shop 4, it will be easy to add style to the Sub-navigation or the Page Nav­i­ga­tion bar.

We start from the style-sheet as elab­o­rated in Work­shop 4. Down­load from Work­shop Mate­ri­als.

The Page Nav­i­ga­tion is defined in lines 165 – 219 under the label #sub-navigation in the sug­gested style-sheet.

#sub-navigation {
clear: both;
border-bottom: 0px solid #222; /*Line under Header Blog Name*/
float: left;
width: 100%;
padding-top: 2px;
z-index: 50;
position: relative;
}

#sub-navigation ul {
padding: 0 0 0 0px;
margin: 0;
}

#sub-navigation li {
list-style-type: none;
float: left;
font-size: 12px;
padding: 0 10px 0 0;
text-transform: uppercase;
margin: 0;
line-height: 22px;
background: #FFFFFF/*url(images/blackdot.png) right 5px no-repeat*/;
position: relative;
}

#sub-navigation a {
color: #ffffff;
padding: 0 5px;
}

#sub-navigation a:hover {
text-decoration: underline;
}

#sub-navigation ul li:hover ul { display: block; }
#sub-navigation ul li:hover ul ul { display: none; }
#sub-navigation ul ul { position:absolute; top:22px; left:0; background:#fff; display:none; list-style:none; margin:0;padding:0; border-top: 1px solid #000;}
#sub-navigation ul ul li {position:relative; border:1px solid #FFFFFF; border-top: 0;width:159px; margin:0; padding: 0; background: none;}
#sub-navigation ul ul li a {display:block; padding:0 7px 0 12px; color: #ffffff; background-color:#FFFFFF; border-right: 0; font-size: 12px; }
#sub-navigation ul ul li a:hover {background-color:#FFFFFF}
#sub-navigation ul ul li:hover ul { display: block; }
#sub-navigation ul ul ul { left:159px; top:-1px; display: none; }

#sub-navigation li.nodot {
background: #FFFFFF;
color: #ffffff;
}

#sub-navigation li.right-d {
float: right;
padding-left: 5px;
}

There are 8 blocks which define the dis­play and behav­ior of our Page Menu.

#sub-navigation {
clear: both;
border-bottom: 0px solid #222; /*Line under Header Blog Name*/
float: left;
width: 100%;
padding-top: 2px;
z-index: 50;
position: relative;
}

The block defines the posi­tion­ing as well as some other details:

clear: both; means that on both sides, left and right, no float­ing objects are allowed.
border-bottom: 0px solid #222; /*Line under Header Blog Name*/ = defines a line under neath the header as per com­ment.
padding-top: 2px; = defines the ver­ti­cal dis­tance from the above Cat­e­gory Nav­i­ga­tion bar.

Accord­ing to my project, the page menu will float on the left side and it may stretch over the full width of the site (800 pix­els). The direct­ing lines are red #B30000.
This leads to the fol­low­ing mod­i­fi­ca­tion of the border-bottom only:

#sub-navigation {
clear: both;
border-bottom: 1px solid #B30000; /*Line under Header Blog Name*/
float: left;
width: 100%;
padding-top: 2px;
z-index: 50;
position: relative;
}

The thin 1 pixel hor­i­zon­tal red line has been adde­don the bot­tom of our future page navigation:

Header Bot­tom Line

No changes.

#sub-navigation li {
list-style-type: none;
float: left;
font-size: 12px;
padding: 0 10px 0 0;
text-transform: uppercase;
margin: 0;
line-height: 22px;
background: #FFFFFF/*url(images/blackdot.png) right 5px no-repeat*/;
position: relative;
}

The block defines the style of our Page menu bar, sim­i­lar to what we saw on the Cat­e­gory menu.

text-transform: uppercase = dis­plays our page titles in upper­case fonts

The back­ground is coded as color and or image as seen ear­lier. Un-comment if you want to use a back­ground image.

There are a few dif­fer­ences between the dis­play of the pre­vi­ously dis­cussed Cat­e­gory nav­i­ga­tion and the present page navigation:

- The Cat­e­gory nav­i­ga­tion bar stretches across the whole page and forms a vis­i­ble hor­i­zon­tal bar as the menu back­ground color is vis­i­ble on 100% of the page with.
– The Page nav­i­ga­tion dis­plays only the nav­i­ga­tion blocks actu­ally needed. If you have just two pages on the first level, then just two nav­i­ga­tion boxes will dis­play and on the right side of the sec­ond the space will remain empty and the header back­ground color will be visible.

- On the Cat­e­gory nav­i­ga­tion we have used a ver­ti­cal line to delimit the tabs.
– On the Page nav­i­ga­tion we don’t use such lines.

Font: If we don’t define a font here, browser defaults will apply; my IE is set for Times New Roman while my Fire­fox uses Ver­dana as default font. In order to make sure all vis­i­tors see the same dis­play, we intro­duce a line just above the font sizes to define the font fam­ily as follows:

font-family: Verdana, Arial, sans-serif;

Note: The rel­a­tive posi­tion­ing of the two Nav­i­ga­tion Menus shows it’s impor­tance: remem­ber the z-index? Well, the Cat­e­gory menu drop downs must dis­play in front of the page menu, there­fore we have a lower stack­ing order on the Page menu (z-index:50; on line 171).

Changes:

In func­tion of my project I will change the back-ground color to a lighter dark-gray (#444444) than the one of the Cat­e­gory Nav­i­ga­tion (#222222). To dif­fer­en­ti­ate fur­ther, we use the upper­case trans­form func­tion as is.

Font size: this is func­tion of the font selected: a 12 px Times does not dis­play the same way as 12 px Ver­dana. We there­fore may need to come back and adjust the font size in func­tion of the font selected. In my case, I will use Ver­dana. 12 px Ver­dana upper­case is a easy to read font and cor­re­sponds to my project choices.

My Block 3 finally looks as follows:

#sub-navigation li {
list-style-type: none;
float: left;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
padding: 0 10px 0 0;
text-transform: uppercase;
margin: 0;
line-height: 22px;
background: #444444/*url(images/blackdot.png) right 5px no-repeat*/;
position: relative;
}

The menu now displays:

Page Nav­i­ga­tion added

Note: The Page Nav­i­ga­tion sits right on the red bot­tom line as defined in Block 1. If you wish to intro­duce a sep­a­ra­tion, just add a line to Block 1 above

padding-bottom: 2px;

Block 1 looks then as follows:

#sub-navigation {
clear: both;
border-bottom: 1px solid #B30000; /*Line under Header Blog Name*/
float: left;
width: 100%;
padding-top: 12px;
padding-bottom: 2px;
z-index: 50;
position: relative;
}

The header looks now as here below:

Padding Bot­tom

#sub-navigation a {
color: #ffffff;
padding: 0 5px;
}


The block defines the font col­ors if we are in pres­ence of an embed­ded hyper­link (by def­i­n­i­tion the tabs link to page URLs and there­fore all Page names will dis­play as defined here).

I leave the block as is, since I want to dis­play page names in white on the pre­vi­ously defined dark gray background.

#sub-navigation a:hover {
text-decoration: underline;
}

Here we define the hover effect, in this case not a color change but we add a text dec­o­ra­tion, namely underline.

I leave the block as is.

#sub-navigation ul li:hover ul { display: block; }
#sub-navigation ul li:hover ul ul { display: none; }
#sub-navigation ul ul { position:absolute; top:22px; left:0; background:#fff; display:none; list-style:none; margin:0;padding:0; border-top: 1px solid #000;}
#sub-navigation ul ul li {position:relative; border:1px solid #FFFFFF; border-top: 0;width:159px; margin:0; padding: 0; background: none;}
#sub-navigation ul ul li a {display:block; padding:0 7px 0 12px; color: #ffffff; background-color:#FFFFFF; border-right: 0; font-size: 12px; }
#sub-navigation ul ul li a:hover {background-color:#FFFFFF}
#sub-navigation ul ul li:hover ul { display: block; }
#sub-navigation ul ul ul { left:159px; top:-1px; display: none; }


We define now the dis­play and behhav­ior of the drop-down Page Menu as we did on the Cat­e­gory Navigation.

The project defines the menu as
– tabs with black back­ground and white fonts, top bor­der white; hover back­ground red #B30000.

We mod­ify the code accord­ingly and obtain:

#sub-navigation ul li:hover ul { display: block; }
#sub-navigation ul li:hover ul ul { display: none; }
#sub-navigation ul ul { position:absolute; top:22px; left:0; background:#fff; display:none; list-style:none; margin:0;padding:0; border-top: 1px solid #fff;}
#sub-navigation ul ul li {position:relative; border:1px solid #FFFFFF; border-top: 0;width:159px; margin:0; padding: 0; background: none;}
#sub-navigation ul ul li a {display:block; padding:0 7px 0 12px; color: #fff; background-color:#000; border-right: 0; font-size: 12px; }
#sub-navigation ul ul li a:hover {background-color:#B30000}
#sub-navigation ul ul li:hover ul { display: block; }
#sub-navigation ul ul ul { left:159px; top:-1px; display: none; }

Here is the visual rep­re­sen­ta­tion after exe­cu­tion of the task:

Sub-Navigation Hover

Defines addi­tional menu items on the same line, such as the sub­scribe link and the date (option in Semi­oman­tics XO lay­out menu) on the right side of the menu.

#sub-navigation li.nodot {
background: #FFFFFF;
color: #ffffff;
}

#sub-navigation li.right-d {
float: right;
padding-left: 5px;
}

We just adapt the dis­play to the above sub-navigation settings:

#sub-navigation li.nodot {
background: #444444;
color: #ffffff;
}

#sub-navigation li.right-d {
float: right;
padding-left: 5px;
}

The visual dis­play results in the fol­low­ing header:

Header

Style-sheet: The style-sheet as per this point is avail­able for down­load in the Mate­r­ial Store.

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

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

• list-style-type
• sub nav­i­ga­tion
• sub­nav­i­ga­tion design
• lat­est nav­i­ga­tion hover design
• li nodot
• padding-bottom
• web sub­nav­i­ga­tion
• web­de­sign navigation
• web­de­sign sport navigation

Related posts:

1. Web Design Work­shop 4 – Navigation
2. Web Design Work­shop Navigation
3. Web Design Work­shop 3 – Site Title
4. Web Design Work­shop 2
5. Web Design Work­shop Sep­tem­ber 9, 2009

Tags: How to style sub-navigation, Sub-Navigation, Web Design CSS, Web Design Navigation, Web Design Style, Web Design Workshop, Yorgo Nestoridis

This entry was posted on September 10, 2009 at 3:12 pm and is filed under Web Design, Yorgo Nestoridis. You can follow any responses to this entry through the RSS 2.0 feed.