Create Multiple Instances On Single Page.

[Neil1]

1) Script Title: Side Push Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/pushmenu.htm

3) Describe problem:

I am currently using this script for my navigation. I have removed the fa-fa-bars thingy at the side and am using an image to toggle the menu.

<nav id="pushmenu1" class="pushmenu">

[CONTENT OF NAVIGATION PANEL HERE]

</nav>


<a href="#"><img src="img/navnew.png"  onClick="menu1.toggle(); return false" class="toggleitem"   id="navlink"</img></a>

However each page is going to be a tour of various parts of town, incorporating a list of things to see/visit, to keep the page reasonably sized I was hoping to have a list of venues with each one also toggling a separate side push menu on which I could add map / photo / address / etc.

<ul>

<li><a href="#" onClick="menu2.toggle(); return false" class="toggleitem"><strong>Venue 1</strong></a></li>

<li><a href="#" onClick="menu3.toggle(); return false" class="toggleitem"><strong>Venue 2</strong></a></li>

<li><a href="#" onClick="menu4.toggle(); return false" class="toggleitem"><strong>Venue 3</strong></a></li>

<li><a href="#" onClick="menu5.toggle(); return false" class="toggleitem"><strong>Venue 4</strong></a></li>

<li><a href="#" onClick="menu6.toggle(); return false" class="toggleitem"><strong>Venue 5</strong></a></li>

</ul>

For each one I have added a new <nav id> EG:

<nav id="pushmenu2" class="pushmenu">

[CONTENT OF NAVIGATION PANEL HERE]

</nav>

And added to the javascript:

jQuery(function(){ // on DOM load

	menu1 = new pushmenu({  // initialize menu example
		menuid: 'pushmenu1',
		position: 'left',
		marginoffset: 0,
		revealamt: -8,
		onopenclose:function(state){
			//console.log(state) //"open" or "closed"
		}
	})


})


jQuery(function(){ // on DOM load

	menu2 = new pushmenu({  // initialize menu example
		menuid: 'pushmenu2',
		position: 'left',
		marginoffset: 0,
		revealamt: -8,
		onopenclose:function(state){
			//console.log(state) //"open" or "closed"
		}
	})


})

But all that happens is the original navigation toggle link (The one open the navigation panel) works the same, however of the subsequent venue ones the top one jumps me top of the page and the others do nothing at all.

I realise in the posting guidelines it says you don't cover trying to use a script multiple times so if it is a complex issue please just let me know and I'll come up with another way of acheiving it, if however anybody spots something simple I am just being silly and missing that'd be great

[ddadmin]

The script does support multiple instances of itself on the page. I just tried it out using a skeleton page with 3 push menus on it, and all of them seem to work. Here is the full HTML:

<meta name="viewport" content="width=device-width" />

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Rosario:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="pushmenu.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


<script src="pushmenu.js">

/***********************************************
* Side Push Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script>

jQuery(function(){ // on DOM load

	menu1 = new pushmenu({  // initialize menu example
		menuid: 'pushmenu1',
		position: 'left',
		marginoffset: 0,
		revealamt: -8,
		onopenclose:function(state){
			//console.log(state) //"open" or "closed"
		}
	})

	menu2 = new pushmenu({  // initialize menu example
		menuid: 'pushmenu2',
		position: 'left',
		marginoffset: 0,
		revealamt: -8,
		onopenclose:function(state){
			//console.log(state) //"open" or "closed"
		}
	})

	menu3 = new pushmenu({  // initialize menu example
		menuid: 'pushmenu3',
		position: 'left',
		marginoffset: 0,
		revealamt: -8,
		onopenclose:function(state){
			//console.log(state) //"open" or "closed"
		}
	})


})

</script>

<div id="contentwrapper">

 Your page contents here...
 Your page contents here...
 Your page contents here...
<br />
<a href="#" onClick="menu1.toggle(); return false" class="toggleitem">Toggle Menu</a>

<br />
<a href="#" onClick="menu2.toggle(); return false" class="toggleitem">Toggle Menu</a>

<br />
<a href="#" onClick="menu3.toggle(); return false" class="toggleitem">Toggle Menu</a>

</div>

<nav id="pushmenu1" class="pushmenu">

	<h2>Navigation</h2>

	<div class="closebutton fa fa-plus-circle" title="Close Menu"></div>

	<ul class="mainnav">
	<li><a href="http://www.dynamicdrive.com/"><i class="fa fa-bolt"></i> Dynamic Drive</a></li>
	<li><a href="http://www.dynamicdrive.com/style/"><i class="fa fa-css3"></i> CSS Library</a></li>
	<li><a href="http://www.dynamicdrive.com/forums/"><i class="fa fa-comment-o"></i> Help Forums</a></li>
	<li><a href="http://tools.dynamicdrive.com/button/"><i class="fa fa-search"></i> Search</a></li>
	<li><a href="http://tools.dynamicdrive.com/imageoptimizer/"><i class="fa fa-gears"></i> Gif Optimizer</a></li>
	<li><a href="http://tools.dynamicdrive.com/favicon/"><i class="fa fa-gears"></i> Favicon Creator</a></li>
	<li><a href="http://tools.dynamicdrive.com/button/"><i class="fa fa-gears"></i> Button Maker</a></li>
	</ul>

	<h2>Share It</h2>

	<p style="padding: 10px">Follow us on <a href="http://twitter.com/ddrivegeorge">Twitter</a> or via <a href="http://pipes.yahoo.com/pipes/pipe.run?_id=a5e67ec6024feb24f1f5a78ee33fe991&_render=rss">RSS feed!</a></p>
	
</nav>


<nav id="pushmenu2" class="pushmenu">

	<h2>Navigation</h2>

	<div class="closebutton fa fa-plus-circle" title="Close Menu"></div>

	<ul class="mainnav">
	<li><a href="http://www.dynamicdrive.com/"><i class="fa fa-bolt"></i> Dynamic Drive 2</a></li>
	<li><a href="http://www.dynamicdrive.com/style/"><i class="fa fa-css3"></i> CSS Library</a></li>
	<li><a href="http://www.dynamicdrive.com/forums/"><i class="fa fa-comment-o"></i> Help Forums</a></li>
	<li><a href="http://tools.dynamicdrive.com/button/"><i class="fa fa-search"></i> Search</a></li>
	<li><a href="http://tools.dynamicdrive.com/imageoptimizer/"><i class="fa fa-gears"></i> Gif Optimizer</a></li>
	<li><a href="http://tools.dynamicdrive.com/favicon/"><i class="fa fa-gears"></i> Favicon Creator</a></li>
	<li><a href="http://tools.dynamicdrive.com/button/"><i class="fa fa-gears"></i> Button Maker</a></li>
	</ul>

	<h2>Share It</h2>

	<p style="padding: 10px">Follow us on <a href="http://twitter.com/ddrivegeorge">Twitter</a> or via <a href="http://pipes.yahoo.com/pipes/pipe.run?_id=a5e67ec6024feb24f1f5a78ee33fe991&_render=rss">RSS feed!</a></p>
	
</nav>


<nav id="pushmenu3" class="pushmenu">

	<h2>Navigation</h2>

	<div class="closebutton fa fa-plus-circle" title="Close Menu"></div>

	<ul class="mainnav">
	<li><a href="http://www.dynamicdrive.com/"><i class="fa fa-bolt"></i> Dynamic Drive 3</a></li>
	<li><a href="http://www.dynamicdrive.com/style/"><i class="fa fa-css3"></i> CSS Library</a></li>
	<li><a href="http://www.dynamicdrive.com/forums/"><i class="fa fa-comment-o"></i> Help Forums</a></li>
	<li><a href="http://tools.dynamicdrive.com/button/"><i class="fa fa-search"></i> Search</a></li>
	<li><a href="http://tools.dynamicdrive.com/imageoptimizer/"><i class="fa fa-gears"></i> Gif Optimizer</a></li>
	<li><a href="http://tools.dynamicdrive.com/favicon/"><i class="fa fa-gears"></i> Favicon Creator</a></li>
	<li><a href="http://tools.dynamicdrive.com/button/"><i class="fa fa-gears"></i> Button Maker</a></li>
	</ul>

	<h2>Share It</h2>

	<p style="padding: 10px">Follow us on <a href="http://twitter.com/ddrivegeorge">Twitter</a> or via <a href="http://pipes.yahoo.com/pipes/pipe.run?_id=a5e67ec6024feb24f1f5a78ee33fe991&_render=rss">RSS feed!</a></p>
	
</nav>