CODEWITHSUNDEEP
jquerycssmenuz-index
jstacks
jstacks

Reputation: 2437

Slide Out Navigation: Z-Index Issue

edit* Based on the first reply, this might not be fixable with z-index, as it's an issue with element positioning. This might be time for a new post, but if you read my comment to the first reply, I can fix the issue of this thread with absolute position, but another issue arises -> setting a relative position of an element that has absolute position... that sounds just a bit counter intuitive, lol. Anyway, will be deleting this soon as the issue is entirely different and deserves different thread.

I am trying to create a vertical navigation menu that has the sub menus sliding out from above (and behind) and stopping below each navigation item clicked. I currently set up the HTML to have the related sub menus directly after their respective navigational item so that with position relative, I could set the jQuery to animate the sub menu to top:0 and it'd always go directly beneath it's related navigational item.

I set the subsequent navigation items to have a class added that reduces their z-index. I was hoping this would enable the menu to slide out from beneath the navigational items from above (because the menu has a lower z-index) while laying over top the lower items.

Neither has worked. As you can see from my fiddle linked below... not only does the menu slide over the upper items, it also is pushing the lower items out of the way.

I'm sure there are countless ways to go about doing this, but I felt the position relative was the only way to handle multiple sub menus all needing to be placed relative to their respective navigational item. But obviously my approach isn't without it's flaws...

So any help would be greatly appreciated.

http://jsfiddle.net/pGfCX/57/

jQuery:

$('.row').click(function() {

    // make all siblings AFTER row clicked get this class to reduce z-index and allow the menu to display above these rows (while still remaining below the rows above)

    $(this).nextAll().addClass('rowZ');
    $(this).next('.menu').show()
    $(this).next('.menu').animate({'top':'0'});

});

// when menu is out, the row clicked is the header row, upon clicking this, the related menu (and by default, all subsequent menus within) animate back up and hide

$('.rowHead').click(function() {

    $(this).next('.menu').animate({'top':'-100%'});
    $(this).next('.menu').hide();

});

You will also note that I am adding a class to change the color of the navigational item when it's clicked and has it's sub menu open. I wanted to have the sub menu come back up when this class is clicked... but that's not working either? But that is a different issue, potentially for another thread.

Thanks in advance for any and all help.

Upvotes: 1

Views: 1436

Answers (1)

Kevin Bowersox
Kevin Bowersox

Reputation: 94459

If you want your sub menu items to appear above the other menu items you will need to use position:absolute to remove them from the normal flow of the document. With position: relative the height of the submenu item is taken into account pushing the menu item element down.

Example: http://jsfiddle.net/Ps73y/3/

HTML

<div id="container">
    <div class="menu-item">
        <div>Menu Item 1</div>
        <div class="sub-menu-items">
            <div class="sub-menu-item">Sub Menu Item 1</div>            
            <div class="sub-menu-item">Sub Menu Item 2</div>            
        </div>
    </div>
    <div class="menu-item">
        <div>Menu Item 2</div>
        <div class="sub-menu-items">
            <div class="sub-menu-item">Sub Menu Item 1</div>            
            <div class="sub-menu-item">Sub Menu Item 2</div>            
        </div>
    </div>
</div>

CSS

.sub-menu-items{
   position: absolute;
   display: none;
   top: 0;
   background: red;
   z-index:1100;
}

.sub-menu-item{
    width:120px;
    cursor:pointer;
    position: relative;
}

.menu-item{
    background:yellow;
    width:120px;
    position:relative;
    left:0;
    cursor: pointer;
}

#container{
    background:grey;
    width:120px;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:0;
}

Javascript

$(".menu-item").click(function(){
    $(this).find(".sub-menu-items").css("top", $(this).height());
    $(this).find(".sub-menu-items").slideToggle();
});

Upvotes: 1

Related Questions