asked on

JQuery Hide/Show .RemoveClass from Sub Menu on Navigation

I have a navigation menu which now reveals a submenu onHover.
I would like not to use hover. I would like the submenu to be exposed OnClick.

A user would click on Link 1 and the submenu for link 1 would be exposed.
A user would then click on Link 2 and the Submenu for link 2 would be exposed and the
submenu for link 1 is hidden.

I do not care about fading, etc.
I'm attaching what I have which is submenu fades in on hover.
Thanks

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Tabbed Navigation</title>

<style type="text/css">
* {margin:0;padding:0;}
body {
font-family: Georgia,serif;
font-size:11px;
line-height:18px;
background-color:#f0f0f0;
}
a {
color:#333;
text-decoration:none;
}
#header {
float:left;
width:100%;
height:139px;
background:url(bg.gif) repeat-x left top;
border-bottom:1px solid #4A7A97;
}
.menu {
margin:75px auto 0;
width:900px;
position:relative;
text-align: center;
}
#main_nav li {
text-align:left;
list-style:none;
display:block;
float:left;
}
#main_nav li a {
background:#3D362D;
padding:9px 12px;
position:relative;
color:#f4f4f4;
text-transform: uppercase;
}
#main_nav li a.active, #main_nav .sub_nav li a {
background:#578FB2;
border-bottom: 1px solid #578FB2;
}
.sub_nav {
display:none;
text-align:left;
position:absolute;
top:35px;
left:0px;
}
#main_nav .sub_nav li a:hover {
text-decoration: underline;
}
</style>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#main_nav li a.main").hover(function(){
$("#main_nav li a.main").removeClass("active");
$(this).addClass("active");
$(this).queue(function() {
$(".sub_nav").fadeOut();
$(this).siblings(".sub_nav").fadeIn();
$(this).dequeue();
});
});
});
</script>

</head>
<body>

<div id="wrapper">

<div id="header">

<div class="menu">
<ul id="main_nav">
<li><a href="" class="main">Link1</a>
<ul class="sub_nav">
<li><a href="">SEO</a></li>
<li><a href="">WordPress</a></li>
<li><a href="">Rants</a></li>
</ul>
</li>
<li><a href="" class="main">link2</a>
<ul class="sub_nav">
<li><a href="">Browser Add-ons</a></li>
<li><a href="">Plug-ins</a></li>
<li><a href="">WordPress</a></li>
</ul>
</li>
<li><a href="" class="main">link3</a>
<ul class="sub_nav">
<li><a href="">SEO Services</a></li>
<li><a href="">Web Analytics</a></li>
</ul>
</li>
</ul>
</div>

</div>

</div>

</body>
</html>

Bardobrave

Give your <a>'s and your submenu <ul>'s an id and use it to call them on jquery.

$("#oneMenuAId").click(function () {
$("#thisSubMenuId").show();
$("#otherSubMenuId").hide();
$("#otherSubMenuId2").hide();
....
$("#otherSubMenuIdN).hide();
});

When you click on an a tag, the function fires, all submenus potentially open get hidden, except the one attached to the clicked element, who get shown.

ASKER CERTIFIED SOLUTION

Justin Mathews

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Codebot

Just replace word hover with click in your code :)