CODEWITHSUNDEEP
javascriptjquerycss
user2333018
user2333018

Reputation: 27

Having difficulty with JS and z-index for menu

I am working on a menu in a fixed header and am having difficulty with the way it is displaying. The menu is a set of 4 main links that when clicked will pop up another div that contains more links. The pop up div is set to cover the initial main link and drop down below it -- similar to the horizontal navigation menu for www.huffingtonpost.com .

The problem I'm having is that the .png background image for the drop down menu covers the initial main link that the user clicked on. For instance if a user clicks on the "Research Tools" the resulting pop up menu background covers the "Research Tools" link, keeping the user from being able to see what menu they are currently in.

It also causes some issues with a user trying to click on another main navigational link, like going from having the "Research Tools" menu active and trying to click on the "Instruction Resources" link -- the background image covers part of that link, rendering it almost unclickable. Is there a way to get the 4 main navigational links to stay on top of the pop up menu div?

Here is an image of the issue I'm encountering: https://i.sstatic.net/hOyKL.jpg

I have tried messing around with the z-index, but nothing seems to work. I've attached the important clips of code in a fiddle http://jsfiddle.net/gevBe/ if more details are needed, let me know. Here is the javascript portion of what is included in the fiddle:

$(document).ready(function () {
$('#toggleLink').on("click", function () {
    $('#showme1').slideToggle(600);
    $('#showme2,#showme3,#showme4').hide(400);
});

$('#toggleLink2').on("click", function () {
    $('#showme2').slideToggle(600);
    $('#showme1,#showme3,#showme4').hide(400);

});

$('#toggleLink3').on("click", function () {
    $('#showme3').slideToggle(600);
    $('#showme1,#showme2,#showme4').hide(400);
});

$('#toggleLink4').on("click", function () {
    $('#showme4').slideToggle(600);
    $('#showme1,#showme2,#showme3').hide(400);
});

$('#toggleLink,#toggleLink2,#toggleLink3,#toggleLink4').on("click", function () {
    $('#cover').show();
});
$('#cover,.button1,.button2,.button3,.button4').click(function () {
    $('#showme1,#showme2,#showme3,#showme4').hide(400);
    $('#cover').hide();
});
});

Upvotes: 1

Views: 87

Answers (1)

Euphe
Euphe

Reputation: 3709

I edited your jsfiddle. Check the #showme2. Just increased the top of it.

I assume you are using z index wrong. Z-index is used to determine what "layer" the element is on. Say we have two absolute or fixed positioned elements with z-index:1 and z-index:2. The one with z-index:1 will be displayed over the one with z-index:2.

If your dropdown box covers the initial link you should make it so it appears below the initial link. You can do that by using top

#yourbox{
top:10px;
}

The code above pushes the element with id yourbox 10px away from the top.

On a side note, using tables to make a navigation menu is a bit awkward. I suggest you use such construction

<ul>
<li>Link one</li>
<li>Link two</li>
</ul>

ul li {
display:inline;
}

That will give the same result - horizontally positioned elements. Except it looks less clumsy.

Upvotes: 2

Related Questions