Lesson 08

Drop-down menus require a lot of complex code, and few sites have enough linked pages to warrant them. So, I'll let you decide for yourself whether you want to add drop-down menus to ClientLayout.htm.

After you've copied and pasted in the code, just change the words on the navbar and menu items to suit your needs. Keep in mind that the links on the navbar and menu items won't take the user any place until you replace the href placeholders in the hyperlinks with relative references to actual pages in your Web site. For example, look at the first few lines of code for the Portfolio option on the navbar and Portfolio Option1 in the drop-down menu:

<li><a href="#">Portfolio<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
  <ul><!-- Start Portfolio drop-down menu -->
  <li><a href="#">Portfolio Option1</a></li>

Pointing to Portfolio on the navbar will always cause the drop-down menu to show. But clicking either link has no effect because each hyperlink tag contains # symbols.

Now, let's suppose you create a couple of pages. One you name Portfolio.htm, and it acts as a home page for your Portfolio section. You have a second page that you name ColorPhotos.htm that's one of several pages within in your Portfolio section. If you want the user to be taken to Porfolio.htm when they click Portfolio in the main navbar, you need to make portfolio.htm the target of its link, as below:

<li><a href="portfolio.htm">Portfolio<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

Similarly, if you want the first item on the drop-down menu to show Photography, and you want clicking that link to take the user to your ColorPhotos.htm, then you need to change its target and text accordingly:

<li><a href="ColorPhotos.htm">Photography</a></li>

In other words, links in the navbar and drop-down menus still work as they have in all versions of HTML. The only difference here is that we've applied many XHTML tags and CSS styles to make them look and act like a navbar with drop-down menus.
Claudia's Results      Back to Studies Index