How can I keep my sub-menu open in jQuery hover menu

0 votes

I just started coding in jQuery last week and need some help figuring out how to make a menu work properly. I have 3 tabs each with their own menu. When a page is displayed a menu and a sub menu is automatically displayed. Once it's displayed the user can hover over the tabs to see the other sub menus and when they stop hovering the originally sub menu appears.

My issue is that although, I can show them the sub menu of the other tabs, I can't keep the sub menu open for the user to click on a sub menu item. Other tutorials show how to do this only when the sub menu is nested within a parent element, but my code for the menu structure doesn't have the sub menus nested (this is how the code was when I joined the project). Is there some way I can keep the sub-menu open if the user hovers on the respective tab?

Here is my menu HTML:

    <div id="navigation">
        <div id="main-nav">
            <div id="kids"><a href="../images/nav1.png"></a></div>
            <div id="community"><a href="../images/nav2.png"></a></div>
            <div id="about"><a href="../images/nav3.png"></a></div>
        </div>
    </div>

    <div id="sub-nav"> 
        <ul class="menu-1 requiresJS">
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
            <li><a href="#">Item4</a></li>
            <li><a href="#">Item5</a></li>
            <li><a href="#">Item6</a></li>
        </ul>
        <ul class="menu-2 requiresJS">
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
            <li><a href="#">Item4</a></li>
            <li><a href="#">Item5</a></li>
            <li><a href="#">Item6</a></li>
        </ul>
        <ul class="menu-3 requiresJS">
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
            <li><a href="#">Item4</a></li>
            <li><a href="#">Item5</a></li>
            <li><a href="#">Item6</a></li>
        </ul>

Here is my jQuery thus far:

// For JS users, display sub menus by default
$(".requiresJS").css("display","block");

var startMenu

//hide all sub menus
$("#sub-nav ul").hide();

// check URL for about, community or kids and set startMenu with correct term
if(window.location.href.indexOf("about") != -1){startMenu = "about"}
else if(window.location.href.indexOf("community") != -1){startMenu = "community"}
else{startMenu = "kids"}

// highlight correct category tab
$("div#main-nav #" + startMenu).addClass("selected");

// show correct starting menu
$("#sub-nav ul.menu-" + startMenu).show('slide', {direction: 'right'}, 600).effect("bounce", { times:1,direction:"right",distance:13 }, 300);

// show correct menu on mouseover of div
$("div#main-nav div").mouseover(function() {

    $("#sub-nav ul").stop(true, true)
    $("#sub-nav ul").hide();

    var currentId = $(this).attr('id');

    $("#sub-nav ul.menu-" + currentId).show();      
});

$("div#main-nav div").mouseover(function() {
        $("#sub-nav ul").stop(true, true)
        $("#sub-nav ul").hide();
        var currentId = $(this).attr('id');
        $("#sub-nav ul.menu-" + currentId).show();      
});

Aug 2, 2022 in Web Development by gaurav
• 23,260 points
3,624 views

1 answer to this question.

0 votes

keeping sub menu open on hover and close sub menu on mouse move down or scrolling

  1. (document). ready(function(){
  2. $("#main-nav li a.main-link"). hover(function(){
  3. $("#main-nav li a.main-link"). removeClass("active");
  4. $(this). addClass("active");
  5. $("#sub-link-bar"). animate({
  6. height: "40px"
  7. });
  8. $(".sub-links"). hide();
answered Aug 2, 2022 by rajatha
• 7,680 points

Related Questions In Web Development

0 votes
0 answers

How can I specify Google map with driving direction in jQuery mobile

I have done a Google Maps based ...READ MORE

Jul 20, 2022 in Web Development by gaurav
• 23,260 points
592 views
0 votes
0 answers

how can i get the url of the content( home.html) in adress bar by jquery load() function?

I am using jquery load() function to ...READ MORE

Jul 28, 2022 in Web Development by gaurav
• 23,260 points
615 views
0 votes
0 answers

How can I use jQuery in Greasemonkey?

I tried putting this line but it ...READ MORE

Jul 28, 2022 in Web Development by gaurav
• 23,260 points
1,007 views
0 votes
0 answers

jQuery add class .active on menu

I've got a problem. I want to add ...READ MORE

Jun 10, 2022 in JQuery by gaurav
• 23,260 points
711 views
0 votes
1 answer

Unclear usage of font awesome icons in jquery context menu

<script type="text/javascript"> jQuery(function ($) ...READ MORE

answered Jun 17, 2022 in JQuery by rajatha
• 7,680 points
918 views
0 votes
1 answer

How to use jquery with asp.net ajax?

If you weren't aware, Microsoft is planning ...READ MORE

answered Oct 15, 2018 in IoT (Internet of Things) by Annie97
• 2,160 points
764 views
0 votes
1 answer

Is 'sparkline' a method?

I suggest you to check 2 things That jquery.sparkline.js is actually ...READ MORE

answered Nov 9, 2018 in Apache Spark by Frankie
• 9,830 points
1,301 views
0 votes
1 answer

How can I create a simple page vertical scroll bar without using jQuery?

Surprisingly, there is not a great, simple ...READ MORE

answered Jun 22, 2022 in Web Development by rajatha
• 7,680 points
550 views
0 votes
1 answer

how to use substr() function in jquery?

To get substring of a string in ...READ MORE

answered Jun 27, 2022 in Web Development by rajatha
• 7,680 points
1,281 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP