I'm currently working on the jQuery slider known as Sequence Master Parallax. My goal is to incorporate a menu at the top that allows users to navigate to each slide. However, I am encountering difficulties in linking the href to the div id. I am unsure of the correct approach to take in this situation. For instance, I want clicking on "Menu 1" to direct the user to the slide with the div id="menu1". Another issue arises when I attempt to insert
<li class="animate-in"> <div id="menu1"> ... </div></li></head>
<body>
<menu-->
<nav>
<ul>
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a></li>
</ul>
</nav>
<!--end menu-->
<div id="sequence">
<img class="sequence-prev" src="images/bt-prev.png" alt="Previous" />
<img class="sequence-next" src="images/bt-next.png" alt="Next" />
<ul class="sequence-canvas">
<li class="animate-in">
<div class="info">
<h2>Built using Sequence.js</h2>
<p>The Responsive Slider with Advanced CSS3 Transitions</p>
</div>
<img class="sky" src="images/bg-clouds.png" alt="Blue Sky" />
<img class="balloon" src="images/balloon.png" alt="Balloon" />
</li>
<li>
<div class="info">
<h2>Creative Control</h2>
<p>Create unique sliders using CSS3 transitions -- no jQuery knowledge required!</p>
</div>
<img class="sky" src="images/bg-clouds.png" alt="Blue Sky" />
<img class="aeroplane" src="images/aeroplane.png" alt="Aeroplane" />
</li>
<li>
<div class="info">
<h2>Cutting Edge</h2>
<p>Supports modern browsers, old browsers (IE7+), touch devices and responsive designs</p>
</div>
<img class="sky" src="images/bg-clouds.png" alt="Blue Sky" />
<img class="kite" src="images/kite.png" alt="Kite" />
</li>
</ul>
</div>
</body>