Welcome to WebmasterWorld Guest from 34.238.189.171

Forum Moderators: open

Message Too Old, No Replies

JQuery Menu

     
7:51 pm on Nov 2, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 17, 2010
posts: 188
votes: 2


I made a drop down menu using jquery. I want the menu to hide when you mouse up and out of the menu bar. Currently it hides only when you mouse out of the drop down but not out of the menu bar. I've attached my code below. Any help would be greatly appreciated!


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Main Menu -->
<script type="text/javascript">
$(document).ready(function () {
$('.mainNavContent').hide();
$(".expandThis").mouseover(function() {
$('.mainNavContent').hide();
$(this).children('.mainNavContent').show();
});

$(".mainNavContent").mouseout(function() {
$('.mainNavContent').hide();
});

$(".expandThisClose").click(function() {
$('.mainNavContent').hide();
});
});
</script>


<style type="text/css">

#logo{height:90px;}

.inlineList li{
display:inline;
list-style:none;
margin:0 0 0 20px;
padding:0;
}
.inlineFirst{margin-left:0px !important; padding-left:0px !important; border-left:none !important;}

.mainNavContent{display:none;}

.mainNav{
position:relative;
height:25px;
padding:5px 0 0 0;
background-image: url(../images/gradient-sprite.png);
background-position: 0px 1px;
}

.mainNav ul{padding:0 10px;}
.mainNav a:link, .mainNav a:visited,
.mainNav a:hover, .mainNav a:active {
font-weight:bold;
}

.mainNavDropDown{
position:absolute;
top:33px;
left:0px;
display:block;
height:263px;
z-index:1000;
background-image: url(../images/gradient-sprite.png);
background-position: 0px -181px;
background-color:#f8f8f8;
}

</style>


</head>
<body>
<div id="logo">
<img name="" src="" width="125" height="80" alt="Logo" style="background-color: #999999" />
</div>
<div class="grid_16 mainNav">
<div class="grid_12 alpha" id="mainNav-bar">
<ul class="inlineList">
<li class="expandThis inlineFirst"><a href="#">Sample Link 1</a>
<div class="grid_12 alpha omega mainNavContent mainNavDropDown">
<p>Sample Content 1</p>
</div>
</li>
<li class="expandThis"><a href="#">Sample Link 2</a>
<div class="grid_12 alpha omega mainNavContent mainNavDropDown">
<p>Sample Content 2</p>
</div>
</li>
<li class="expandThis"><a href="#">Sample Link 3</a>
<div class="grid_12 alpha omega mainNavContent mainNavDropDown">
<p>Sample Content 3</p>
</div>
</li>

<li class="expandThis"><a href="#">Sample Link 4</a>
<div class="grid_12 alpha omega mainNavContent mainNavDropDown">
<p>Sample Content 4</p>
</div>
</li>
<li class="expandThis"><a href="#">Sample Link 5</a>
<div class="grid_12 alpha omega mainNavContent mainNavDropDown">
<p>Sample Content 5</p>
</div>
</li>

<li class="expandThis"><a href="#">Sample Link 6</a>
<div class="grid_12 alpha omega mainNavContent mainNavDropDown">
<p>Sample Content 6</p>
</div>
</li>

</li>
</ul>

</div>

<div class="clear"></div>
</div>
<div class="clear"></div>
11:37 pm on Nov 2, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 30, 2007
posts:1394
votes: 0


you need to use the mouseout on an outer container. For instance you could replace:
$(".mainNavContent").mouseout(function() {

with
$("#mainNav-bar").mouseout(function() {

And get rid of the ul/li combos. Use divs.
12:21 pm on Nov 3, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 17, 2010
posts: 188
votes: 2


Thank you, that works great! What's wrong with using lists?
12:40 pm on Nov 3, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 30, 2007
posts:1394
votes: 0


From what I have seen there are more browser incompatibilities with the ul/li than using div or div/span combinations. There is likely less overhead for the css with divs. Also ul/li may often used in regular text content which forces you to put exceptions and do more testing with the css. Divs aren't often used with regular content/text

Finally if you use ul you need lis and only lis to follow and li cannot be used on its own, unlike divs where you can put pretty much anything.
7:14 pm on Nov 3, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 17, 2010
posts: 188
votes: 2


Ok, good points. Thanks.