Question

I am trying to create a sticky accordion menu, where the background scrolls depending on the button clicked, but the menu remains at its place. Since its sticky, I am using position:fixed. Here’s the HTML :

<div id="nav">
<ul>
    <li><a id="home" class="menu-link" href="#section0"><img src="images/home.png" /></a></li>
    <li><a id="aboutus" class="menu-link" href="#section1"><img src="images/aboutus.png" /></a>
        <ul class="submenu">
        <li><a id="submenu1" class="menu-link" href="submenu1.php"><img src="images/submenu1.jpg" /></a></li>
        <li><a id="submenu2" class="menu-link" href="submenu2.php"><img src="images/submenu2.jpg" /></a></li>
        </ul>
    </li>
    <li><a id="dances" class="menu-link" href="#section2"><img src="images/dances.png" /></a></li>
    <li><a id="packages" class="menu-link" href="#section3"><img src="images/packages.png" /></a>
        <ul class="submenu">
        <li><a id="submenu3" class="menu-link" href="submenu3.php"><img    src="images/submenu3.jpg" /></a></li>
        <li><a id="submenu4" class="menu-link" href="submenu4.php"><img src="images/submenu4.jpg" /></a></li>
        </ul>
    </li>
    <li><a id="gallery" class="menu-link" href="#section4"><img src="images/gallery_menu.png" /></a>
        <ul class="submenu">
        <li><a id="submenu5" class="menu-link" href="submenu5.php"><img src="images/submenu5.jpg" /></a></li>
        <li><a id="submenu6" class="menu-link" href="submenu6.php"><img src="images/submenu6.jpg" /></a></li>
        </ul>
    </ul>
</div>

I am looking for an accordion (like this), and I am not able to work with slideUP, slideToggle etc (probably coz of position:fixed). So I tried to calculate the number of children the clicked menu-item had and shift all the rest of the menu below it by a appropriate amount. THe code is this :

$('#nav ul li a').bind('click',function(event){
    var no_of_child=$(this).parent('li').children('ul').index()+1;
    var clicked_position=$(this).position();
    if(no_of_child>0){
        var top_rel=60*no_of_child;
        $(this).parent('li').nextAll().children('a').animate({
        top: "+="+top_rel,
    });

The menu is shifting fine, but I am stuck at getting it to go back to its original position when a different menu-item is clicked.

Note : I think I “have” to use position:fixed for the menu, since my background continuously scrolls up and down.

Answer 1

Wrap the <div id="nav"> in a div that is fixed, and change the nav div to relative positioning.