Welcome to WebmasterWorld Guest from 54.158.36.59

Forum Moderators: open

Message Too Old, No Replies

JQuery Menu

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



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)

WebmasterWorld Senior Member 5+ Year Member



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)



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

WebmasterWorld Senior Member 5+ Year Member



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)



Ok, good points. Thanks.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month