homepage Welcome to WebmasterWorld Guest from 54.237.98.229
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
JQuery Menu
rwilson



 
Msg#: 4382756 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4382756 posted 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#: 4382756 posted 12:21 pm on Nov 3, 2011 (gmt 0)

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

enigma1

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4382756 posted 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#: 4382756 posted 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