Web Design Workshop 5 – Sub-Navigation

by Yorgo Nestoridis

Web Design Workshop 5 – Page Navigation

Based on the experience gained from Web Design Workshop 4, it will be easy to add style to the Sub-navigation or the Page Navigation bar.

We start from the style-sheet as elaborated in Workshop 4. Download from Workshop Materials.

Sub-Navigation or Page Navigation

The Page Navigation is defined in lines 165 – 219 under the label #sub-navigation in the suggested 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 display and behavior of our Page Menu.

Block 1

#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 positioning as well as some other details:

clear: both; means that on both sides, left and right, no floating objects are allowed.
border-bottom: 0px solid #222; /*Line under Header Blog Name*/ = defines a line under neath the header as per comment.
padding-top: 2px; = defines the vertical distance from the above Category Navigation bar.

According to my project, the page menu will float on the left side and it may stretch over the full width of the site (800 pixels). The directing lines are red #B30000.
This leads to the following modification 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 horizontal red line has been addedon the bottom of our future page navigation:

Header Bottom Line

Header Bottom Line

Block 2

No changes.

Block 3

#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, similar to what we saw on the Category menu.

text-transform: uppercase = displays our page titles in uppercase fonts

The background is coded as color and or image as seen earlier. Un-comment if you want to use a background image.

There are a few differences between the display of the previously discussed Category navigation and the present page navigation:

– The Category navigation bar stretches across the whole page and forms a visible horizontal bar as the menu background color is visible on 100% of the page with.
– The Page navigation displays only the navigation blocks actually needed. If you have just two pages on the first level, then just two navigation boxes will display and on the right side of the second the space will remain empty and the header background color will be visible.

– On the Category navigation we have used a vertical line to delimit the tabs.
– On the Page navigation 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 Firefox uses Verdana as default font. In order to make sure all visitors see the same display, we introduce a line just above the font sizes to define the font family as follows:

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

Note: The relative positioning of the two Navigation Menus shows it’s importance: remember the z-index? Well, the Category menu drop downs must display in front of the page menu, therefore we have a lower stacking order on the Page menu (z-index:50; on line 171).

Changes:

In function of my project I will change the back-ground color to a lighter dark-gray (#444444) than the one of the Category Navigation (#222222). To differentiate further, we use the uppercase transform function as is.

Font size: this is function of the font selected: a 12 px Times does not display the same way as 12 px Verdana. We therefore may need to come back and adjust the font size in function of the font selected. In my case, I will use Verdana. 12 px Verdana uppercase is a easy to read font and corresponds 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 Navigation added

Page Navigation added

Note: The Page Navigation sits right on the red bottom line as defined in Block 1. If you wish to introduce a separation, 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 Bottom

Padding Bottom

Block 4

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

The block defines the font colors if we are in presence of an embedded hyperlink (by definition the tabs link to page URLs and therefore all Page names will display as defined here).

I leave the block as is, since I want to display page names in white on the previously defined dark gray background.

Block 5

#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 decoration, namely underline.

I leave the block as is.

Block 6

#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 display and behhavior of the drop-down Page Menu as we did on the Category Navigation.

The project defines the menu as
– tabs with black background and white fonts, top border white; hover background red #B30000.

We modify the code accordingly 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 representation after execution of the task:

Sub-Navigation Hover

Sub-Navigation Hover

Block 7 and Block 8

Defines additional menu items on the same line, such as the subscribe link and the date (option in Semiomantics XO layout 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 display 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 display results in the following header:

Header

Header

Style-sheet: The style-sheet as per this point is available for download in the Material Store.

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.