I designed a top menu for my website that includes 2 key features:
- Sticky navigation bar when scrolling
- Slide toggle navbar
You can view the demo here: JSBIN
However, I am facing 2 issues:
When the page is at the top and the menu is in its default position, the slide toggle works perfectly.
But after scrolling to the bottom of the page and clicking the arrow below the navbar, the slide toggle feature stops working.
The menu consists of 2 divs:
Main Menu:
<div id="menu" class="top-nav">
<ul>
<li class="active"><a href="#home" class="scroll">Home Page</a></li>
<li><a href="#about" class="scroll">About</a></li>
<li><a href="#events" class="scroll">Events</a></li>
<li><a href="#home" class="scroll">Other Page</a></li>
</ul>
</div>
Footer with arrow key and line under the navbar:
<div id="menu-footer">
<div style="background:none repeat scroll 0 0 #CD1D27;padding:7px 0;"></div>
<div id="open-close-toggle" style="background:url(http://up.tractorfc.com/images/48714086549751927852.png) no-repeat;height:32px;background-position:center;"></div>
</div>
The second issue lies within the menu-footer section.
I believe there are more efficient ways to replace this code in order to have an arrow key and display a red line when the menu slides up.
Here is the script I used for the sliding menu bar:
<script>
$("#open-close-toggle").click(function() {
$("#menu").slideToggle();
});
</script>
Apologies for any language errors.