Web Design Workshop 5 Sub-navigation

Web Design Workshop 5 Notes to Sub-navigation

The session was dealing with the Sub-navigation (Page Navigation) subsequent to the Navigation Workshop from the day before.

1. Fonts

In order to get in control of the fonts and to prevent browsers to apply browser defaults, we make sue to introduce to the whole header section font definitions.

We recommend to use serif fonts for the title (name of the blog) and sans-serif fonts for the sub-title (description, tag line) and category and page menus.

Title lines 84 – 91

Make sure you define the font family as follows:

#title {
font-family: Georgia, Times, serif;
font-size: 36px;
margin: 20px 0 0;
margin-left: 5px;
padding: 0;
line-height: 34px;
}

Navigation – Category Navigation lines 143 – 153

Make sure you define the font family as follows:

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

Sub-Navigation – Page Navigation lines 193 – 204

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

Larrie Perkins Web Design

Larrie has an attractive color scheme which he plays on his navigation:

Larrie’s red on the Category navigation and his blue on the page navigation. We notice that the Page menu sits on the horizontal blue line. Moving that line away from the navigation may look more elegant.

To move the line, we just need to edit #subnavigation in our style sheet, lines 177 – 186 as follows:

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

Note: the line is 2 pixels wide and blue (border-bottom: 2px solid #09417c;) and there is padding at the bottom of 1 pixel, giving us this 1 pixel distance from the navigation bar (padding-bottom: 1px;).

But Larrie has also tested some other options, like the double line.
To introduce a double line we just need to call for that attribute by editing the line which is the border-bottom:

originally we started from the following call:
border-bottom: 2px solid #09417c;, which resulted in the single line with 2 pixels width.

Now we just ad the specification double; as follows: border-bottom: double; 1px solid #09417c; and we decrease the width to 1 pixel.

The double line may be decorative, however not satisfactory.

Now Larrie thinks out of the box and moves the category navigation to the top of the page, above even the title:

This could be an interesting solution as well, creating a nice substitute for a header graphic.

And yet, there is another idea to be implemented: how about squeezing the horizontal line between the two navigation bars and inversing them?

Now this looks smart:

This is another interesting solution which customizes the site nicely.

Have a look at it in original size and you will see that we now have a smart header. Consider to move the site title to the center and you end up with a very well balanced design.

Click on the below image to see the full size:

We have implemented this idea on the Demo site:

I am looking forward to tonight’s session at 8 pm GMT at yorGOtalk.

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.

More about this Topic

• Web Design Workshop Navigation
• Web Design Workshop 15 Disney Look
• What is CSS
• Web Design Workshop 12 Blockquotes and Pullquotes
• Web Design Workshop 11 Background