Dropdown Menu Tutor

The first thing to do when creating a navigation menu is decide how many main menu items you want. Identify the main menu buttons. See picture for example Next decide what dropdowns yo ...

nobody@smugmug.com (Steve Allen (allen-steve)) — Wed, 11 Oct 2006 21:49:49 -0700

Steve Allen (allen-steve)
The first thing to do when creating a navigation menu is decide how many main menu items you want. Identify the main menu buttons. See picture for example Next decide what dropdowns yo ...

Now we’ll create the order for the code. List them verticaly as shown. Starting on the left down through each dropdown and flyout. The order is important.

nobody@smugmug.com (Steve Allen (allen-steve)) — Fri, 13 Oct 2006 18:56:14 -0700

Steve Allen (allen-steve)
Now we’ll create the order for the code. List them verticaly as shown. Starting on the left down through each dropdown and flyout. The order is important.

We are ready to add some code. Add one of these for each menu item. <li><a href="Place link here">Button name here</a></li> Indent each level with spaces. *** S ...

nobody@smugmug.com (Steve Allen (allen-steve)) — Fri, 13 Oct 2006 18:59:13 -0700

Steve Allen (allen-steve)
We are ready to add some code. Add one of these for each menu item. <li><a href="Place link here">Button name here</a></li> Indent each level with spaces. *** S ...

Button name here</a></li> Indent each level with spaces. *** S ..."><a href="Place link here">Button name here</a></li> Indent each level with spaces. *** S ..." title="We are ready to add some code. Add one of these for each menu item. <li><a href="Place link here">Button name here</a></li> Indent each level with spaces. *** S ..." style="border: 1px solid #000000;" />

Ok, for each one that has a dropdown/flyout under it add the blue and remove the red. <li><a class="drop" href="Place link here">Menu item</a></li> <li> *** S ...

nobody@smugmug.com (Steve Allen (allen-steve)) — Sun, 15 Oct 2006 21:30:42 -0700

Steve Allen (allen-steve)
Ok, for each one that has a dropdown/flyout under it add the blue and remove the red. <li><a class="drop" href="Place link here">Menu item</a></li> <li> *** S ...

Menu item</a></li> <li> *** S ..."><a class="drop" href="Place link here">Menu item</a></li> <li> *** S ..." title="Ok, for each one that has a dropdown/flyout under it add the blue and remove the red. <li><a class="drop" href="Place link here">Menu item</a></li> <li> *** S ..." style="border: 1px solid #000000;" />

Next we need to put each group into a container. Start each container with <ul> and end it with </ul> Include one for entire list. See next picture.

nobody@smugmug.com (Steve Allen (allen-steve)) — Sun, 15 Oct 2006 21:31:39 -0700

Steve Allen (allen-steve)
Next we need to put each group into a container. Start each container with <ul> and end it with </ul> Include one for entire list. See next picture.

and end it with </ul> Include one for entire list. See next picture." title="Next we need to put each group into a container. Start each container with <ul> and end it with </ul> Include one for entire list. See next picture." style="border: 1px solid #000000;" />

Start each container with <ul> and end it with </ul> Don't forget the main list. * See code below * Note: Do not add the gold <div class="menu"> <ul> <li><a hre ...

nobody@smugmug.com (Steve Allen (allen-steve)) — Fri, 13 Oct 2006 19:04:30 -0700

Steve Allen (allen-steve)
Start each container with <ul> and end it with </ul> Don't forget the main list. *** See code below *** Note: Do not add the gold <div class="menu"> <ul> <li><a hre ...

<ul> <li><a hre ..."> and end it with </ul> Don't forget the main list. *** See code below *** Note: Do not add the gold <div class="menu"> <ul> <li><a hre ..." title="Start each container with <ul> and end it with </ul> Don't forget the main list. *** See code below *** Note: Do not add the gold <div class="menu"> <ul> <li><a hre ..." style="border: 1px solid #000000;" />

We’re almost done if it wasn’t for IE, ugh! Have to add a little hack for IE. After every line with class="drop" add these. </a><!-- ...

nobody@smugmug.com (Steve Allen (allen-steve)) — Fri, 13 Oct 2006 19:07:09 -0700

Steve Allen (allen-steve)
We’re almost done if it wasn’t for IE, ugh! Have to add a little hack for IE. After every line with class="drop" add these. </a><!-- ...

</a></a><!-- ..." style="border: 1px solid #000000;" />

Here you can see the above IE code inserted. Additional flyouts were added under Menu 3 and 6 * See code below * The last menu item, "Menu 6", has flyouts that are positioned to f ...

nobody@smugmug.com (Steve Allen (allen-steve)) — Fri, 13 Oct 2006 19:07:13 -0700

Steve Allen (allen-steve)
Here you can see the above IE code inserted. Additional flyouts were added under Menu 3 and 6 *** See code below *** The last menu item, "Menu 6", has flyouts that are positioned to f ...

Add the menu text and links for each and .... Voila!! Done. Almost You'll need to also add some CSS code for the formating of the menu. > > > Go to CSS page Click Here < < < Test i ...

nobody@smugmug.com (Steve Allen (allen-steve)) — Fri, 13 Oct 2006 19:08:22 -0700

Steve Allen (allen-steve)
Add the menu text and links for each and .... Voila!! Done. Almost You'll need to also add some CSS code for the formating of the menu. > > > Go to CSS page Click Here < < < Test i ...

> > Go to CSS page Click Here < < < Test i ..." title="Add the menu text and links for each and .... Voila!! Done. Almost You'll need to also add some CSS code for the formating of the menu. > > > Go to CSS page Click Here < < < Test i ..." style="border: 1px solid #000000;" />