Solved

JQuery Hide/Show .RemoveClass  from Sub Menu on Navigation

Posted on 2010-11-21
3
1,017 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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

695 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