Adding Vertical Navigation to Webpage Layout

Now that you have created a basic layout for your webpage, it is time to add some navigation to it. In the previous tutorial I showed you how to add a top navigation menu. This time we'll work on a vertical menu.

Add and style the left side menu

As you develop your menu, make sure you preview it in both Internet Explorer and Firefox. You will also need to check it at various resolutions to make sure it continues to work as you expect it to. Or you can use the new 'SuperPreview' — Shift + F12.This menu is based on the Urban Grey Side Menu from Dynamic Drive.

Create the menu list

Create a simple bulleted list for your left side menu. The list can be separated into sections by adding a <p></p> tag before starting each list.  In 'Design' or 'Code' view, in your webpage, place your cursor where you want to create a list (between the <div id="left-nav"></div> tags, and then do one of the following:

• Type a Section heading like Site Navigation BEFORE you start your list.
• On the 'Common' toolbar, click Bullets , or on the 'Formatting' toolbar, click the Style box, and select Unordered List.
• Drag the page you want to include as a menu item from the 'Folder List' panel to the first bullet. Hit 'Enter' to add a new list item. Using this method will create your hyperlinks as you go along. If you have no pages as part of your website but would like to create the menu items and pages as you go, you can follow Creating a New Page from Hyperlink Properties
• OR for each item or line of text that you want in the list, type the text, and then press ENTER to add a bullet to the list. If you use this method, you will need to create the hyperlinks to the menu items.

To create or modify a hyperlink

In your webpage, in 'Design' view or 'Code' view, do one of the following:

• Select the item that you want to use as the hyperlink. > Press  Ctrl + K OR right click and select hyperlink.
• OR In either the 'Common' or the 'Standard' toolbar, click Insert Hyperlink.
• In the 'Insert' or 'Edit' Hyperlink dialog box, do the following:
  • Text to display: Type the text you want to display as the menu item.
  • Existing File or Web Page: In the Address box, browse the the file you want to link to OR Copy and Paste the URL of the webpage you wish to link to.
    View Screenshot
  • Click 'Screen Tip.' Type a brief description of the link. For SEO purposes, use the title of the page.
    View Screenshot
• Continue this procedure until you have added all of your top menu links.

If you view your source code, it should look something like the following:

<p>Site Navigation</p>
<ul>
<li><a title="Home - Site Name." href="index-two.html">Home</a></li>
<li><a title="Menu Item." href="index.html">Menu Item</a></li>
<li><a title="Menu Item." href="index.html">Menu Item</a></li>
<li><a title="Menu Item." href="index.html">Menu Item</a></li>
<li><a title="Menu Item." href="index.html">Menu Item</a></li>
<li><a title="Menu Item." href="index.html">Menu Item</a></li>
<li><a title="Menu Item." href="index.html">Menu Item</a></li>
<li><a title="Menu Item." href="index.html">Menu Item</a></li>
</ul>

Of course, the each menu item would hyperlink to its own page NOT the index.html page. This is just an example.

Adding styles to the menu

• Open your index.html page in 'Design' view.
• From the 'Manage Styles' panel, right click #left-nav > Modify Style.
  • Select the 'Box' Category, make sure padding: Same for all is ticked > 5px.
  • Select the 'Font' Category: font-size: > 0.9em.
• From the 'Manage Styles' or 'Apply Styles' panel click 'New Style'. In the New Style dialog box, type or select the following:
  • Selector: #left-nav ul
  • Define in: select Existing style sheet from the dropdown. Select the style sheet.
  • List: list-style-type: none
  • Box: margin: 0px; padding: 0px
• From the 'Manage Styles' or 'Apply Styles' panel click 'New Style'. In the New Style dialogue box, type or select the following:
  • Selector: #left-nav ul li
  • Define in: select Existing style sheet from the dropdown. Select the style sheet.
  • Box: untick padding: Same for all > bottom .2px.
• From the 'Manage Styles' or 'Apply Styles' panel click 'New Style.' In the New Style dialog box, type or select the following:
  • Selector: #left-nav ul li a
  • Define in: select Existing style sheet from the dropdown. Select the style sheet.
  • Font: color: #ffffff text decoration: none
  • Layout: display: block
  • Background: background-color: #006600
  • Box: untick padding: Same for all > top 5px right 0px bottom 5px left 8px.
• From the 'Manage Styles' or 'Apply Styles' panel click 'New Style.' In the New Style dialog box, type or select the following:
  • Define in: select Existing style sheet from the dropdown. Select the style sheet.
  • Selector: #left-nav ul li a:visited
  • Font: color > #FFFF66
• From the 'Manage Styles' or 'Apply Styles' panel click 'New Style.' In the New Style dialog box, type or select the following:
  • Define in: select Existing style sheet from the dropdown. Select the style sheet.
  • Selector: #left-nav ul li a:hover
  • Font: color > #000000 
  • Background: background-color: #006600
• From the 'Manage Styles' or 'Apply Styles' panel click 'New Style.' In the New Style dialog box, type or select the following:
  • Define in: select Existing style sheet from the dropdown. Select the style sheet
  • Selector: #left-nav .headerbar
  • Font: color > #000000  font-size: 1em >   text-transform: > uppercase
  • Layout: display: block
  • Background: background-color:  > #006600
  • Padding: untick padding same for all > top and bottom 4px right and left 2px
• Save your page and Preview in Browser or use 'SuperPreview.'. View Screenshot

Converting Your Menus to Include Pages

Create a new folder for the includes. Click 'Site View' tab. > Click 'New Folder' icon. > Type _includes as the name of the folder.

• Click the 'New Document' icon. > Save the page with the name left-menu.html in the _includes folder.
• Copy and Paste the menu list from your index.html page into the new left-menu.html page
• Insert the top-menu.html into index.html as an include.
  • Using Code Snippets to Insert Include Pages
  • Use the 'Standard Toolbar' to insert your include page.
    
    Standard Toolbar

Navigation Resources

• Website Navigation - Website Navigation Structure
• Navigation Menu - Creating A Navigation Menu
• Website Navigation  

Whatever your final choice of navigation is, it should be a consistent navigation scheme from page to page throughout your site. This helps the website visitor learn your website navigation system.

CSS Menu Resources

• CSS Library Horizontal CSS Menus
• CSS Library Vertical CSS Menus
• CSS Play Menus
• CSS Express Drop-Down Menus - by the folks at ProjectSeven. This is my absolute favorite for a CSS dropdown menu.

Additional Reading

• CSS Pseudo-classes form WC3 Schools.
• Pseudo Classes from HTML Dog.
• Link pseudo class selectors
• Meet the Pseudo Class Selectors from CSS-Tricks

You will also need to make sure that whichever menu system you use, that it renders in all browsers.

NEXT STEP: Validating Your Page

Copyright © 2009 Pat Geary of Expression Web Tutorials and Templates, All Rights Reserved 
Revised July 2010