STYLING LISTS: A SIMPLE CSS-BASED VERTICAL NAVIGATIONAL MENU

Dowload Verticalmenu.zip

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).
NOTE: We could have named the first line home.html; however, it is best practice to name the "home page" index.html.

STYLIZE LIST

However, the list still looks more like a bullet list with links associated with it. Well,let's correct this problem.

1. Give the opening <ul> tag an id name of "nav" (<ul id="nav"...). Then, add the following code:
   TIP: After creating the #nav selector shell (i.e., #nav{    }), add ONE rule at a time to see the effect take place one at a time. You will have a better appreiciation of the CSS code if you do so. Do this for the other sections as well.

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 click the Live View button or preview this page again in a browser (F12), 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 .

(OPTIONAL) CREATE A SNIPPET

TIMESAVING TIP: Once you have some or all of the CSS rules you need to create a functional menu, you can create a snippet of the CSS code and then reuse the code again in a new web site or new web site file by simply inserting the snippet in the <style> tag or an external style sheet or create new style sheet altogether: The advantage of this is that once you have code that work you don't have to type it again or figure out how it was done again.

1. Select (hightlihgt) the rules you want from the CSS code to make a functional menu.
2. (Optional) Create your own folder if you like (i.e., MySnippets)  by clicking on the New Snippet Folder icon at the bottom of the Snippets panel.
3. Select Window > Snippets (SHIFT+F9) and then click on the New Snippet icon at the bottom of the Snippets panel.
4. Add the following in the Snippets dialog box:
   1. Name: Give the snippet a descriptive name (i.e., VerticalMenuUsingCSS).
   2. Description: Add a description and any comments on how to use or implement the snippet.
      EXAMPLE:
      - Create a list of links in the sidebar and then convert it to a bullet list.
      - Insert this snippet by adding it the the <style> tag or an external style sheet.
      - Give the <ul> tag a ID name of nav (i.e., <ul id="nav">
      
5. Click on the Insert Block radio button so that the code can be inserted as a complete code block.
   NOTE: You should see the code you highlighted in the Insert Code text field (example below)
   
   
   #nav{
   list-style-type:none;
   width:180px;
   background: #09F;
   padding:0;
   margin:0; }
   
   #nav a{
   text-decoration: none;
   color: #FFF;
   padding: 0 15px;
   line-height: 2.1;
   border-bottom:
   1px solid #FFF;
   display:block; }
   
   #nav a:hover{background:#006;}
   
   
6. Then click OK to save the code as a snippet.
7. To insert this snippet into a new or existing *.html file:
   1. Create a list of links in the sidebar and then convert it to a bullet list.
   2. Insert this snippet by adding it to the <style> tag or an external style sheet.
   3. Give the <ul> tag an ID name of "nav" (i.e., <ul id="nav">.

ADD "YOU ARE HERE" FUNCTIONALITY

To let the user know what page he or she is currently on, we will write some code the "detect" what page the browser is viewing and highlight the corresponding menu according.

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 cursor: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 IDs to each page in body tag to target menu item for those pages by opening the template page and then selecting Modify > Templates > Make Attributes Editable....  In the Editable Tag Attributes dialog box that appears, enter the following info:

1. Attributes: Click the Add... button and in the dialog box that appears, type id into the text field.
2. Make attribute editable: Check it.
3. Label: id
4. Type: Text
5. Default: body_home
6. Then click the OK button.
   NOTE: This will add the following code highlighted in blue to the template page:

<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<!-- TemplateParam name="id" type="text" value="body_home" -->
</head>
<body id="@@(id)@@">

7. Open each page that is associated with the template and select Modify > Template Properties and change the id from body_home to match id of the page that was created earlier. (i.e., body_products).
   NOTE: This dialog box allows you to make minor changes to a page that is based on a template without opening the template by defining a variable that can "vary" or change from page to page so that the contextual (or conditional) selector gets applied.

If you preview the page, you should see the Products Menu highlights 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.)
IMPORTANT NOTE: If you are intending to use a template-based web-site, select Modify > Templates > Make Attributees Editable... and make the ID attribute editable.  Then, on EACH page select Modify > Template Properties and add the corresponding page id (i.e., nav_body, nav_products, 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 0; 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 0;
background: #EBEBEB;
}

STYLIZE TOP OF MENU (Optional)

While not a major problem, it would be nice to have a border at the top of the menu as well so that it can be seen if the sidebar1 background color is not white. To include this in your menu for now or in the future, we will target the <ul> element and add a top border to it.
NOTE: To see the effect, change ul#nav background-color to something other than white, if necessary.

Now, create the following rule to add a top border:

NOTE: This rule (ul#nav) basically says target the top of the <ul> container  element with an ID of "nav" and add a border. The other rule (#nav li) says target the bottom of the <li> container elements (not the <ul> element) that is inside a container with a ID name of #nav# and add a border.

Add Border to Left of Menu Items (Optional)

Add the following code to the #nav a:hover rule:

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 effect. (SEE pg . 91 of The Art and Science of CSS)