homepage Welcome to WebmasterWorld Guest from 54.204.127.191
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
JQuery Menu
rwilson




msg:4382758
 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>

 

enigma1




msg:4382854
 11:37 pm on Nov 2, 2011 (gmt 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.

rwilson




msg:4383012
 12:21 pm on Nov 3, 2011 (gmt 0)

Thank you, that works great! What's wrong with using lists?

enigma1




msg:4383013
 12:40 pm on Nov 3, 2011 (gmt 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.

rwilson




msg:4383168
 7:14 pm on Nov 3, 2011 (gmt 0)

Ok, good points. Thanks.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved