0

If someone could help me point in the right direction that would be awesome as I have been looking for a solution to this issues for hours.

http://jamessuske.com/will/

I have a menu with 3 menu items on it. if you hover over the last two menu items, a div with items from a different list appear. That part works fine, but if I go to roll over the other menu items from another list, they disappear again.

This is my JavaScript:

<script type="text/javascript">

function showGalleryNav(){

document.getElementById('headerNavGallery').style.display = "";

}

function showInfoNav(){

document.getElementById('headerNavInfo').style.display = "";

}


function hideGalleryNav(){

document.getElementById('headerNavGallery').style.display = "none";

}

function hideInfoNav(){

document.getElementById('headerNavInfo').style.display = "none";

}

</script>

And The HTML

<div class="headerNav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" onmouseover="javascript:showGalleryNav()" onmouseout="javascript:hideGalleryNav()">Gallery</a></li>
<li><a href="#" onmouseover="javascript:showInfoNav()" onmouseout="javascript:hideInfoNav()">Info</a></li>
</ul>
</div><!--headerNav-->

<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li><a href="#">Categoies</a></li>
<li><a href="#">Products</a></li>
</ul>
</div><!--headerNavGallery-->

<div class="headerNavInfo" id="headerNavInfo" style="display:none;">
<ul>
<li><a href="#">William Ruppel</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Artist Bio</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--headerNavInfo-->

I've tried different Attributes, but none of them are working, I have also tried switching to jQuery with

$('#headerNavGallery").css("display", "");

also didn't work,

Any ideas would be greatly apperiated.

Improve this question
1
  • where's headerNavInfo ?? Commented Feb 6, 2012 at 22:14

3 Answers 3

Reset to default
1

Actually what you are trying to accomplish is all css-only doable but not with that markup structure. First you need to nest your lists.

<ul class="menu">
<li><a href="#">item 1</a></li>
<li>
  <a href="#">item 2 with sub</a>
  <ul>
    <li><a href="#">sub menu item 1</a></li>
    <li><a href="#">sub menu item 2</a></li>
    ... so on ..
  </ul>
</li>
</ul>

some css

.menu li {
    position: relative;
}
.menu li ul {
    position: absolute;
    top: 30px; /* the height of the root level item */
    display: none;
}
.menu li li {
    position: static; /* or you could float these for horizontal menu */

}
.menu li:hover ul {
    display: block;
}

These are pretty much the basics. But I strongly suggest you go and study superfish menu as it's jquery drop drop menu but it degrades nicely with js off, so you could just study the css of it. http://users.tpg.com.au/j_birch/plugins/superfish/

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This idea can work, but isn't always an option... especially if you're working with a CMS, or some random spaghetti code, and you're looking for smooth interactions.
0

Check that typeo, nvm... Setting the display property should always have a value "none" or "block", empty("") is a bad reset... try this:

<script>
    $(".galleryNavToggle").on("mouseenter mouseleave", function(event){
    var headNavGal = $("#headerNavGallery");
    if(event.type === "mouseenter"){
      headNavGal.show();
    }else if(event.type ==="mouseleave" &&
             ((event.relatedTarget !== headNavGal[0] && $.inArray(event.relatedTarget, headNavGal.find("*")) <=0) ||
             $.inArray(event.relatedTarget, $(".galleryNavInfoToggle")) > 0)){
        headNavGal.hide();
    }
});
$("#headerNavGallery").on("mouseleave", function(event){
    var headNavGal = $(this);
    if(event.type ==="mouseleave"){
        headNavGal.hide();
    }
});

</script>

HTML

<div class="headerNav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="" class='galleryNavToggle'>Gallery</a></li>
<li><a href="" class='galleryNavInfoToggle'>Info</a></li>
</ul>
</div><!--headerNav-->

<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li><a href="#">Categoies</a></li>
<li><a href="#">Products</a></li>
</ul>
</div><!--headerNavGallery-->

AND CSS

.headerNav{
     border:thin solid black;
     float:left;
}
.headerNavGallery{
 float:left;
 border:thin solid black;
  margin-left:-1px;
}
Improve this answer

7 Comments

Thanks for the tip, that was just my typo, I didn't use that code per say, just remembered it and tossed it into my question, but thanks
No prob, I edited my answer to give you a better idea since you're already using jQuery.
Hey great tip, but its not working.....in Dreamweaver I get an error around }); should the function be function(event){(
No, not that... hrm this was out of my head too, it might not be syntactically perfect, lemme look it over in jsfiddle-- Yeah I'm numb, I edited it, you can copy paste now...
Maybe my jquery sources files are wrong "../js/(filename).js" the file I am currenting working in is include/header.php
|
0

1) <a href="#" onmouseover="javascript:showGalleryNav()" onmouseout="javascript:hideGalleryNav()">Gallery</a>

You don't need to specify javascript:. This is redundant.

2) It is working exactly the way you programmied it to work. When you mouse-out, it disappears.

3) You have code for "headerNavInfo" but no matching HTML.

Improve this answer

1 Comment

He was trying for something a little more specific, and he'll learn over time with the more JS he learns the less obtrusive it'll become.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.