Icon navbar with dropdown menus and submenus

[RobbieZ]

Ok, first off you need to download the zip from Dynamic Drive (your link) and follow the instructions then you will need to mess with the two css files in dreamweaver or similar program and change black to white etc..

Upload the folder to your root and place the code into your navbar after this:

{vb:raw ad_location.global_below_navbar}

The first link was home so I didnt use a drop down menu

The second link etc needed drop downs so you can see the code I have used here including the image reference and left the path as well.

rel="ddsubmenu(instert each number here and change accordingly)"

etc

<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li><a href="Catergory Link Goes Here"><img src="Image Ling Goes Here/ddlevelsfiles/home.png" alt="Home"></a></li>
<li><a href="Catergory Link Goes Here" rel="ddsubmenu1"><img src="Image Link Goes Here/ddlevelsfiles/vip.png"></a></li>
<li><a href="Catergory Link Goes Here" rel="ddsubmenu2"><img src="Image Link Goes Here/ddlevelsfiles/music.png"></a></li>
...
...
...
...
<li><a href="Catergory Link Goes Here" rel="ddsubmenu9"><img src="Image Link Goes Here/ddlevelsfiles/apple.png"></a></li>
</ul>
</div>

<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar")
</script>

<!--HTML for the Drop Down Menus associated with Top Menu Bar-->
<!--They should be inserted OUTSIDE any element other than the BODY tag itself-->
<!--A good location would be the end of the page (right above "</BODY>")-->

<!--Top Drop Down Menu 1 HTML-->

Now for each submenu create this afterwards and continue to list each submenu with a number for however many you use, ddsubmenu5, ddsubmenu6 etc.

A straight forward dropdown without subs would be this:

<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

And a sub menu would be this:

<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a>
  <ul>
  <li><a href="#">Link 3.1b</a></li>
  <li><a href="#">Link 3.2b</a></li>
  <li><a href="#">Link 3.4b</a></li>
  </ul>
</li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a>
  <ul>
  <li><a href="#">Link 5.1b</a></li>
  <li><a href="#">Link 5.2b</a>
    <ul>
    <li><a href="#">Link 5.2.1b</a></li>
    <li><a href="#">Link 5.2.2b</a></li>
    <li><a href="#">Link 5.2.3b</a></li>
    </ul>
  </li>
	</ul>
</li>
<li><a href="#">Link 6</a></li>
</ul>

The code can have as many submenu as you wish as long as you encapsulate each sub in its own <ul> and close the sub with a </li> before moving to your next sub menu on your list.

Hope this helps..