CODEWITHSUNDEEP
jquerywordpress
Johnny
Johnny

Reputation: 576

WordPress Sub Menu - Show On Hover

I have a WordPress site set up with some navigation. Each of the parent nav links contains sub menus.

What I want to do in psuedoish code is as follows:

BUT

At the moment I have this:

JQUERY

    <script type="text/javascript">
    jQuery(document).ready(function($){
    $(".sub-menu").hide();
    $(".current_page_item .sub-menu").show();
    });
    </script>

This successfully shows the current pages sub menu for all pages but I can't work out how to show another sub menu if it's parent link is hovered upon.

The sub menu occupies exactly the same space so upon a hover it should hide the current pages sub menu links.

Can someone please help.

Thanks in advance.

HTML

    <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://localhost:81/pps/">Home</a></li>
    <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-16 current_page_item menu-item-34"><a href="http://localhost:81/pps/?page_id=16">Our Services</a>
    <ul class="sub-menu" style="display: block;">
        <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="http://localhost:81/pps/?page_id=18">Services Sub Page One</a></li>
        <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="http://localhost:81/pps/?page_id=20">Services Sub Page Two</a></li>
        <li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35 no-cross"><a href="http://localhost:81/pps/?page_id=22">Services Sub Page Three</a></li>
    </ul>
    </li>
    <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="http://localhost:81/pps/?page_id=24">Why Us?</a>
    <ul class="sub-menu" style="display: block;">
        <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="http://localhost:81/pps/?page_id=44">Subpage of Why Us?</a></li>
        <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50 no-cross"><a href="http://localhost:81/pps/?page_id=48">Another Subpage Of Why Us?</a></li>
    </ul>

Upvotes: 0

Views: 17000

Answers (3)

mkours
mkours

Reputation: 510

If you use a bootstrap-based theme add the following CSS:

ul.navbar-nav li.menu-item-has-children:hover > ul.dropdown-menu{
    display: block !important;
}

"display none" is not needed

Upvotes: 1

Sherri
Sherri

Reputation: 943

I accomplished this on the twenty-fifteen them with some Additional CSS on the theme. This might work for other themes too.

It basically hides sub-menus by default, then when the parent menu item is hovered, it displays the menu.

Add to your theme's Additional CSS:

/*make the menu sub-menu items drop down on mouse hover */
ul.sub-menu{ display: none; }

ul.menu li.menu-item-has-children:hover > ul.sub-menu{
    display: block;
}

Upvotes: 1

Patrick Moore
Patrick Moore

Reputation: 13344

Here's what you're looking for:

$( "li.menu-item" ).hover(function() {  // mouse enter
    $( this ).find( " > .sub-menu" ).show(); // display immediate child

}, function(){ // mouse leave
    if ( !$(this).hasClass("current_page_item") ) {  // check if current page
        $( this ).find( ".sub-menu" ).hide(); // hide if not current page
    }
});

Upvotes: 5

Related Questions