Can I have multiple "All Levels Navigational Menus" on one page?

**GoddessVirage** · 06-05-2009, 08:33 PM

1) Script Title: All Levels Navigational Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu/index.htm

3) Describe problem: I currently have the topbar menu installed on my site that I am building. I would love to have that same navigational bar available where it is now, right underneath the banner image, as well as repeated at the very bottom of my page, after all of my content. Some of my webpages contain a long list of information so the option of having my navigational bar in two places is very appealing.

Currently I have the code repeated at the bottom of my page and the links seem to work except the little drop down menus are not active. They will not emerge from the menu. I tried repeating the menu script and renaming the ul ids so the first nav bar and the second nav bar weren't referencing the same id but that did not fix the problem.

Any help is appreciated!

**ddadmin** · 06-06-2009, 07:17 AM

The script does support multiple instances on the same page. Please post a link to the page on your site that contains the problematic script so we can check it out.

**GoddessVirage** · 06-08-2009, 05:18 PM

The website hasn't been loaded to the server yet since it is a complete replacement of the current one but here is the code that I have for it:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

(meta data)

<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" />
<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="stylesheet" type="text/css" href="crumbs.css" />

<script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js">

/*
(All Levels Navigational Menu copyright info)
*/

</script>

<script type="text/javascript" src="Scripts/jquery-1.2.6.pack.js"></script>

<script type="text/javascript" src="Scripts/stepcarousel.js"></script>

<style type="text/css">

.stepcarousel{
position: relative;
overflow: scroll; 
width: 175px; 
height: 200px;
}

.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 1px;
width: 175px;
}

</style>

<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>

<body class="layout">
<div id="wrapper">
  <div id="header">
  <div id="ddtopmenubbar" class="mattblackmenubottom" align="center">
    <ul>
    <li><a href="http://www.caliberequipment.com/about.html"  title="about">About</a></li>
    <li><a href="http://www.caliberequipment.com/contact.html"  title="contact"><img src="images/break.gif" alt=" "/>Contact</a></li>
    <li><a href="index.html" title="Home">Welcome to Caliber Equipment!</a></li>
    </ul>
  </div>
  <div class="layout">
  <img src ="images/topimage_staff.jpg" alt="advance machine" width="1000" height="400" />
  </div></div>
       
<div id="ddtopmenubar" class="mattblackmenu" align="center">
     <ul>
    <li><a href="#quicknav"><b><em>NAVIGATION:</em></b></a></li>
    <li><a href="http://www.caliberequipment.com" title="home">Home</a></li>
    <li><a href="http://www.caliberequipment/machines.html" title="machines" rel="ddsubmenu1">New Machines</a></li>
    <li><a href="http://www.caliberequipment/refurbished_machines.html"  title="refurbished machines" rel="ddsubmenu2">Refurbished Machines</a></li>
    <li><a href="http://www.caliberequipment/vendors.html"  title="vendors" rel="ddsubmenu3">Vendors</a></li>
    <li><a href="http://www.caliberequipment.com/rentals.html"  title="rentals" >Rentals</a></li>
    <li><a href="http://www.caliberequipment.com/parts.html"  title="parts" >Parts</a></li>
    <li><a href="http://www.caliberequipment.com/detergent.html"  title="detergents" >Detergent</a></li>
    <li><a href="http://www.caliberequipment.com/service.html"  title="service">Service & Support</a></li>
    <li><a href="http://www.caliberequipment.com/buying_guide.html"  title="buying guide">Guide to Buying</a></li>
    </ul>
  </div>
  <div>
 <ul id="crumbs">
  <li><a href="http://caliberequipment.com">Home</a> </li>
  <li>About Us!</li>
  </ul>
</div>


<script type="text/javascript">
    ddlevelsmenu.setup("ddtopmenubar", "topbar", "ddtopmenubar3") //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-->
    
    
  <ul id="ddsubmenu1" class="ddsubmenustyle">
    <li><a href="scrubbers.html" title="floor scrubbers">Floor Scrubbers</a>
      <ul>
      <li><a href="scrubbers.html#walkbehindscr" title="walkbehind scrubbers">Walk-Behind Scrubbers</a></li>
      <li><a href="scrubbers.html#riderscr" title="rider scrubbers">Rider Scrubbers</a></li>
      </ul>
      </a>
    </li>
    <li><a href="sweepers.html" title="floor sweepers">Floor Sweepers</a>
       <ul>
      <li><a href="sweepers.html#walkbehindswp" title="walkbehind sweepers">Walk-Behind Sweepers</a></li>
      <li><a href="sweepers.html#riderswp" title="Rider Sweepers">Rider Sweepers</a></li>
      </ul>
    </li>
    <li><a href="combination.html" title="combination sweeper scrubbers">Combination Sweeper Scrubbers</a></li>
    <li><a href="floor_machines.html" title="floor machines">Floor Machines</a></li>
    <li><a href="burnishers.html" title="burnishers">Burnishers</a></li>
    <li><a href="wet_dry_vacuums.html" title="Wet Dry Vacuums">Wet/Dry Vacuums</a></li>
    <li><a href="carpet_cleaners.html" title="Carpet Cleaners">Carpet Cleaning</a>
    </li>
    <li><a href="value_machines.html" title="Value Machines">Value Machines</a></li>
  </ul>
  
   <ul id="ddsubmenu2" class="ddsubmenustyle">
    <li><a href="refurbished.html#combo" title="Refurbished Combination Floor Sweeper Scrubbers">Combination Sweeper Scrubbers</a></li>
    <li><a href="refurbished.html#rswp" title="Refurbished Rider Sweepers">Rider Sweepers</a></li>
    <li><a href="refurbished.html#wbswp" title="Refurbished Walk-behind Sweepers">Walk-behind Sweepers</a></li>
    <li><a href="refurbished.html#litter" title="Refurbished Litter Collectors">Litter Collectors</a></li>
    <li><a href="refurbished.html#rscr" title="Refurbished Rider Scrubber">Rider Scrubbers</a></li>
    <li><a href="refurbished.html#wbscr" title="Refurbished Walk-behind Scrubber">Walk-behind Scrubbers</a></li>
    <li><a href="refurbished.html#rburn" title="Refurbished Burnishers">Rider Burnishers</a></li>
    <li><a href="refurbished.html#wbburn" title="Refurbished Burnishers">Walk-behind Burnishers</a></li>
    <li><a href="refurbished.html#floor" title="Refurbished Floor Machines">Floor Machines</a></li>
    <li><a href="refurbished_value_machines.html" title="Refurbished Value Machines">Value Machines</a></li>
  </ul>
  
	<ul id="ddsubmenu3" class="ddsubmenustyle">
    <li><a href="clarke.html" title="clarke">Clarke</a></li>
    <li><a href="eagle.html" title="eagle">Eagle</a></li>
    <li><a href="factory-cat.html" title="factory cat">Factory Cat</a></li>
    <li><a href="madvac.html" title="madvac">Mad Vac</a></li>
    <li><a href="minuteman.html" title="minuteman">Minuteman</a></li>
    <li><a href="nilfisk_advance.html" title="Nilfisk Advance">Nilfisk-Advance</a></li>
    <li><a href="american-lincoln.html" title="American Lincoln">American Lincoln</a></li>
    <li><a href="nobles.html" title="Nobles">Nobles</a></li>
    <li><a href="tennant.html" title="Tennant">Tennant</a></li>
  </ul>
  
     <ul id="ddsubmenu4" class="ddsubmenustyle">
    <li><a href="scrubbers.html" title="floor scrubbers">Floor Scrubbers</a>
      <ul>
      <li><a href="scrubbers.html#walkbehindscr" title="walkbehind scrubbers">Walk-Behind Scrubbers</a></li>
      <li><a href="scrubbers.html#riderscr" title="rider scrubbers">Rider Scrubbers</a></li>
      </ul>
      </a>
    </li>
    <li><a href="sweepers.html" title="floor sweepers">Floor Sweepers</a>
       <ul>
      <li><a href="sweepers.html#walkbehindswp" title="walkbehind sweepers">Walk-Behind Sweepers</a></li>
      <li><a href="sweepers.html#riderswp" title="Rider Sweepers">Rider Sweepers</a></li>
      </ul>
    </li>
    <li><a href="combination.html" title="combination sweeper scrubbers">Combination Sweeper Scrubbers</a></li>
    <li><a href="floor-machines.html" title="floor machines">Floor Machines</a></li>
    <li><a href="burnishers.html" title="burnishers">Burnishers</a></li>
    <li><a href="wet-dry-vacuums.html" title="Wet Dry Vacuums">Wet/Dry Vacuums</a></li>
    <li><a href="carpet-cleaners.html" title="Carpet Cleaners">Carpet Cleaning</a>
    </li>
    <li><a href="value-machines.html" title="Value Machines">Value Machines</a></li>
  </ul>
  
  <ul id="ddsubmenu5" class="ddsubmenustyle">
    <li><a href="refurbished.html#combo" title="Refurbished Combination Floor Sweeper Scrubbers">Combination Sweeper Scrubbers</a></li>
    <li><a href="refurbished.html#rswp" title="Refurbished Rider Sweepers">Rider Sweepers</a></li>
    <li><a href="refurbished.html#wbswp" title="Refurbished Walk-behind Sweepers">Walk-behind Sweepers</a></li>
    <li><a href="refurbished.html#litter" title="Refurbished Litter Collectors">Litter Collectors</a></li>
    <li><a href="refurbished.html#rscr" title="Refurbished Rider Scrubber">Rider Scrubbers</a></li>
    <li><a href="refurbished.html#wbscr" title="Refurbished Walk-behind Scrubber">Walk-behind Scrubbers</a></li>
    <li><a href="refurbished.html#rburn" title="Refurbished Burnishers">Rider Burnishers</a></li>
    <li><a href="refurbished.html#wbburn" title="Refurbished Burnishers">Walk-behind Burnishers</a></li>
    <li><a href="refurbished.html#floor" title="Refurbished Floor Machines">Floor Machines</a></li>
    <li><a href="refurbished_value_machines.html" title="Refurbished Value Machines">Value Machines</a></li>
  </ul>
  
	<ul id="ddsubmenu6" class="ddsubmenustyle">
    <li><a href="clarke.html" title="Clarke">Clarke</a></li>
    <li><a href="eagle.html" title="Eagle IPC">Eagle</a></li>
    <li><a href="factory-cat.html" title="Factory Cat">Factory Cat</a></li>
    <li><a href="madvac.html" title="Madvac">Mad Vac</a></li>
    <li><a href="minuteman.html" title="Minuteman">Minuteman</a></li>
    <li><a href="nilfisk_advance.html" title="Nilfisk Advance">Nilfisk-Advance</a></li>
    <li><a href="american-lincoln.html" title="American Lincoln">American Lincoln</a></li>
    <li><a href="nobles.html" title="Nobles">Nobles</a></li>
    <li><a href="tennant.html" title="Tennant">Tennant</a></li>
  </ul>

(site content)

**GoddessVirage** · 06-08-2009, 05:18 PM

HTML Code:

<div id="ddtopmenubar3" class="mattblackmenu" align="center">
     <ul>
    <li><a href="#quicknav"><b><em>NAVIGATION:</em></b></a></li>
    <li><a href="http://www.caliberequipment.com" title="home">Home</a></li>
    <li><a href="http://www.caliberequipment/machines.html" title="machines" rel="ddsubmenu4">New Machines</a></li>
    <li><a href="http://www.caliberequipment/refurbished_machines.html"  title="refurbished machines" rel="ddsubmenu5">Refurbished Machines</a></li>
    <li><a href="http://www.caliberequipment/vendors.html"  title="vendors" rel="ddsubmenu6">Vendors</a></li>
    <li><a href="http://www.caliberequipment.com/rentals.html"  title="rentals" >Rentals</a></li>
    <li><a href="http://www.caliberequipment.com/parts.html"  title="parts" >Parts</a></li>
    <li><a href="http://www.caliberequipment.com/detergent.html"  title="detergents" >Detergent</a></li>
    <li><a href="http://www.caliberequipment.com/service.html"  title="service">Service & Support</a></li>
    <li><a href="http://www.caliberequipment.com/buying_guide.html"  title="buying guide">Guide to Buying</a></li>
    </ul>
  </div>
</div>

</body>

</html>

**ddadmin** · 06-09-2009, 06:39 AM

Ah, so by multiple, you mean literally two identical menus (with the same drop down menu contents) on the same page? If so, this is still possible, but you'll need to duplicate the HTML of the drop down menus for the 2nd copy as well, with each sub menu containing a unique ID. Basically, you should treat the two menus as if they are different. Something like:

HTML for top menu bars:

Code:

<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" rel="ddsubmenu1">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="ddsubmenu2">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/" rel="ddsubmenu3">Web Tools</a></li>
</ul>
</div>

<div id="ddtopmenubar2" class="mattblackmenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" rel="cat">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="dog">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/" rel="rabbit">Web Tools</a></li>
</ul>
</div>

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

ddlevelsmenu.setup("ddtopmenubar2", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>

HTML for top drop down tabs:

Code:

<!--For first menu-->

<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item Folder 3a</a>
 <ul>
 <li><a href="#">Sub Item 3.1a</a></li>
 </ul>
</li>
<li><a href="#">Item 4a</a></li>
<li><a href="#">Item Folder 5a</a>
 <ul>
 <li><a href="#">Sub Item 5.1a</a></li>
 <li><a href="#">Item Folder 5.2a</a>
  <ul>
  <li><a href="#">Sub Item 5.2.1a</a></li>
  <li><a href="#">Sub Item 5.2.2a</a></li>
  </ul>
 </li>
 </ul>
</a>
</li>
<li><a href="#">Item 6a</a></li>
</ul>

"
"

<!--For 2nd menu-->

<ul id="cat" class="ddsubmenustyle">
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item Folder 3a</a>
 <ul>
 <li><a href="#">Sub Item 3.1a</a></li>
 </ul>
</li>
<li><a href="#">Item 4a</a></li>
<li><a href="#">Item Folder 5a</a>
 <ul>
 <li><a href="#">Sub Item 5.1a</a></li>
 <li><a href="#">Item Folder 5.2a</a>
  <ul>
  <li><a href="#">Sub Item 5.2.1a</a></li>
  <li><a href="#">Sub Item 5.2.2a</a></li>
  </ul>
 </li>
 </ul>
</a>
</li>
<li><a href="#">Item 6a</a></li>
</ul>

"
"

**GoddessVirage** · 06-10-2009, 02:47 PM

Ah great thank you!

I see where I went wrong, I had assigned the different menus with their own unique IDs already but what I did was:

Code:

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

Instead of giving them their own setup commands:

Code:

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

ddlevelsmenu.setup("ddtopmenubar3", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>

So that fixed the problem, thank you so much!

Thread: Can I have multiple "All Levels Navigational Menus" on one page?

Thread Tools

Search Thread

Can I have multiple "All Levels Navigational Menus" on one page?

The Following User Says Thank You to ddadmin For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions