STYLING LISTS: A SIMPLE CSS-BASED VERTICAL NAVIGATIONAL MENU

A basic navigational menu can be created from a list (ordered or unordered) by making each list item a link and then "stylize" the whole list to make it behave like a menu.

CREATE A LIST OF PARAGRAPHS

First let's start by creating a simple list of paragraphs by typing a list (i.e., Home, Products, etc.) in Design View – clicking ENTER or RETURN key after each paragraph (in this case, the list is added in the sidebar1 div of a custom Dreamweaver layout page):

 

CONVERT LIST OF PARAGRAPHS TO AN UNORDERED LIST

Next, let's convert list of paragraphs to a simple unordered (bullet) list by selecting the list first in the tag chooser and clicking on the bullet list button in the Property Panel.

 

CONVERT LIST TO A LIST OF LINKS

Next, let's convert the list to a list of links by applying an anchor tag <a> to the text in each of the list item (highlighted in bold).

STYLIZE LIST

However, the list still looks more like a bullet list with links associated with it. Well, let's correct that by creating and applying a ID selector to the top-level <ul> tag to:

Apply the #nav selector to the <ul> tag by clicking inside the list in Design view and select the <ul> tag in the tag chooser at the bottom of window. Next, right-click or Control-click on Mac to select Set ID and choose nav from the list.

STYLIZE LINKS

Now, let's address the links themselves by creating a contextual selector (i.e., #nav a) to target the link tag (i.e.,<a>) to:

There is a problem with the current implementation.  Because the above rules were applied to the <a> tag, the padding will only be added to the right and left of the text – not across the width of its parent container (<ul>).  Also, the white borders at the bottom will only extend to the end of the inline <a> elements.  If you were to preview this in a browser, you would see that clickable area would only be over the text and the padding on both sides.  There is a quick solution to this problem.

Remember from our discussion of inline vs block-level element that inline elements only consume only the amount of space they need.  However, block-level elements consume the whole width of its parent container.  So to fix this problem, all we have to do is convert the inline elements to block-level elements by adding the following rule (highlighted in bold) to the existing #nav a block:

If you preview this page again, you will see that the clickable area extends across the whole width of each menu item.

NOTE: Since you only have one level in this menu, we only create a less specific rule #nav a. Had we created a multilevel menu, we would had to be more specific in defining our rule: #nav li a.
NOTE: Notice the padding values of 0 and 15px.  When a value is zero, there is no need to specify a unit because it does not really matter if the unit is in pixels, inches, etc. since the value is zero.  Also, when only two values instead of four are written for padding, the first value refers to top or bottom and the second value refers to left or right of the box element.

Now, let's enhance our menu by creating a hover effect when the user moves the mouse of a menu item.

ADD HOVER EFFECT

To create a hover effect, we will apply a hover pseudo-class to the <a> tag inside the nav area by writing the following rule:

To "see" the hover effect, preview in a browser and roll mouse over menu
NOTE: You can also use a background image for the Active and Hover state as well as change the font color, etc .

ADD "YOU ARE HERE" FUNCTIONALITY

To let the user know what page he or she is currently on, we will:

STEPS with CODE VIEW:

1. Write ID for each <li> tag by updating the unordered list (highlighted in bold) in the Code View.

<ul id="nav">
   <li id="nav_home"><a href="home.html">Home</a></li>
    <li id="nav_products"><a href="products.html">Products</a></li>
    <li id="nav_services"><a href="services.html">Services</a></li>
    <li id="nav_contact_us"><a href="contact_us.html">Contact Us</a></li>
</ul>

2. Write a series of group ID selectors to target their respective pages.

#body_home #nav_home a,
#body_products #nav_products a,
#body_services #nav_services a,
#body_contact_us #nav_contact_us a {
    background:#00F;
    font-weight:bold;
    cursor:auto; /* to change cursor back to an arrow */
}
NOTE: The #body_home, #body_products, etc. will provide the necessary "hooks" to target the necessary id (i.e., #nav_home, #nav_products, etc.) for the specific menu item.
NOTE: The curso:auto property is used to change the cursor back to the default arrow and allow the button to not change state when it is mouse-over and the user will not be tempted to click it.
NOTE: The above is a "group" of selectors. While not necessary each selector is placed on a line by itself separated by commas except for the last selector.
NOTE: This technique is best practice because:

• It allows you to style multiple sections of your page differently, not just the nav bar.
• The navbar is always constant and easier to update. You could use a single Server-Side include for the navbar on every page.
• The style is more specific than a normal hover-state style which means that  the current viewed page (or section) will not change to reflect the hover style when the mouse is rolled over it.
  

3. Add ID to specific page in body tag to target menu item.

 

If you preview the page, you should see the Product Menu highlight with a different color with its text in bold without having to hover over that menu.

4. Test several times by changing the id attribute in the body tag from <body id="body_products"> to <body id="body_home"> then <body id="body_services"> and <body id="body_contact_us">. This is for testing purposes only, in real life, add these attributes to the corresponding pages (i.e., body.html, products.html, etc.)

STYLIZE MENU CONTAINER (Optional)

Make the menu expand across the whole width of parent container (i.e., in this case,  sidebar1 div) by changing the width from 180px to 100% (highlighted in bold)

#nav {
    list-style-type: none;
    width:100%;
    background: #09F;
    padding:0;
    margin:0;
}

Also, in the sidebar1 selector change:

• The padding from padding: 15px 10px 15px 20px; to padding: 15px 0px; to remove padding from left and right
• The width from 200px to 250px to increase menu side after removing padding
• Delete background color property (denoted with strike-through) so that the menu would be compatible with any page regardless of its background color.

.twoColFixLtHdr #sidebar1 {
float: left;
width: 250px;
padding: 15px 0px;
background: #EBEBEB;
}

STYLIZE LAST MENU ITEM (Optional)

While not a major problem, if the background container for this list will be placed on any other color than white, you will see a white border on the last menu. Moreover, that last border will add a pixel to the height of the menu. To prevent this from being a problem now or in the future, we will target the last list item ID to turn its border off.

Before we add this style, to see the effect, change the body background temporarily to a light gray by adding background-color:#CCC; and preview it in a browser. You will see a white line at the end of the last menu item.

Now, create the following rule to suppress border:

Remove the background-color:#CCC from body tag, if necessary.

FIX IE BUG (Optional) -- need reviewing

If a viewer is using an older version of Internet Explorer (i.e., IE 5 and below), they may encounter a bug known as the "whitespace bug" that incorrectly render whitespace between list items. To resolve this problem add the following code (highlighted in bold)

CODE VIEW:

#nav {
    list-style-type: none;
    width:100%;
    background: #6F6146;
    padding:0;
    margin:0;
    float:left
}

Also, by floating the list items, IE will render them without whitespace.

#nav li {
    margin:0;
    padding:0;
    float: left;
    width:100%;
}

We needed to float the unordered list element in order to contain the floated list items, and extend the background color behind all of them. Because the widths are specified for both elements, the float property has no real effects. (SEE pg . 91 of The Art and Science of CSS)