Solved

JQuery Hide/Show .RemoveClass  from Sub Menu on Navigation

Posted on 2010-11-21
3
1,014 Views
Last Modified: 2012-05-10
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>


0
Comment
Question by:LT1415
3 Comments
 
LVL 19

Expert Comment

by:Bardobrave
ID: 34185961
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.
0
 
LVL 16

Accepted Solution

by:
jmatix earned 500 total points
ID: 34189561
Change your script to handle click() instead of hover() as below. Then also dummy all hrefs of <a> elements as:


<a href="#" class="main">Link1</a>

OR

<a href="javascript:void(0)" class="main">Link1</a>

<script type="text/javascript">
$(document).ready(function(){
   $("#main_nav li a.main").click(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>

Open in new window

0
 
LVL 6

Expert Comment

by:Codebot
ID: 34189564
Just replace word hover with click in your code :)
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
This video teaches users how to migrate an existing Wordpress website to a new domain.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

766 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question