Solved

JQuery Hide/Show .RemoveClass  from Sub Menu on Navigation

Posted on 2010-11-21
3
1,008 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
Comment Utility
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
Comment Utility
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
Comment Utility
Just replace word hover with click in your code :)
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

728 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now