Solved

JQuery Hide/Show .RemoveClass  from Sub Menu on Navigation

Posted on 2010-11-21
3
1,016 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

730 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