CODEWITHSUNDEEP
jqueryhtmlcss
Sidney Sousa
Sidney Sousa

Reputation: 3614

How to add a class to a menu item that has children

I just created menu and some of the items have sub items as you can see on my html structure:

<nav id="site-navigation" class="main-navigation" role="navigation">
  <div class="menu-menu-1-container">
    <ul id="primary-menu" class="menu">
      <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-41">
        <a href="http://powersol.burnnotice.co.za/">Home</a>
      </li>
      <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-42">
        <a href="http://powersol.burnnotice.co.za/our-dealers/">Our Dealers</a>
        <ul class="sub-menu">
          <li id="menu-item-250" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-250">
            <a href="http://powersol.burnnotice.co.za/dealer-1/">Dealer 1</a>
          </li>
          <li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246">
            <a href="http://powersol.burnnotice.co.za/dealer-2/">Dealer 2</a>
          </li>
          <li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245">
            <a href="http://powersol.burnnotice.co.za/dealer-3/">Dealer 3</a>
          </li>
          <li id="menu-item-249" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-249">
            <a href="http://powersol.burnnotice.co.za/dealer-4/">Dealer 4</a>
          </li>
        </ul>
      </li>
      <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39">
        <a href="http://powersol.burnnotice.co.za/companies/">Companies</a>
        <ul class="sub-menu">
          <li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247">
            <a href="http://powersol.burnnotice.co.za/companies-1/">Companies 1</a>
          </li>
          <li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-253">
            <a href="http://powersol.burnnotice.co.za/companies-3/">Companies 3</a>
          </li>
          <li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-248">
            <a href="http://powersol.burnnotice.co.za/companies-4/">Companies 4</a>
          </li>
        </ul>
      </li>
      <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40">
        <a href="http://powersol.burnnotice.co.za/contact/">Contact</a>
      </li>
    </ul>
  </div>        
</nav>

For the css, I first put a display none cause initially the sub-menus cannot be visible.

.main-navigation ul li{
    display: none;
}

Now, How can I add a class dropdown-menu to a menu item that has sub-items everytime I hover over that particular item?

Here my js but it does nothing when I hover over the item:

$('.main-navigation ul > li.menu-item-has-children').on("hover" function(){
    $('.main-navigation ul > li.menu-item-has-children').removeClass('dropdown-menu');
    if($(this).hasClass('dropdown-menu')){
        $(this).addClass('dropdown-menu');
    }else{
        $(this).addClass('dropdown-menu');
    }
});

Here my pen if needed

Upvotes: 1

Views: 4418

Answers (2)

jafarbtech
jafarbtech

Reputation: 7025

You can do it CSS :hover itself. but as you wanted in jquery here is the solution

Use $('.main-navigation ul > li.menu-item-has-children').on("mouseenter mouseleave", function(e){. mouseenter mouseleave in place of hover

$('.main-navigation ul > li.menu-item-has-children').on("mouseenter mouseleave",  function(e){
    $('.main-navigation ul > li.menu-item-has-children').removeClass('dropdown-menu');
    if(e.type=='mouseenter')
    $(this).addClass('dropdown-menu');
});
.main-navigation ul ul{
    display: none;
}
.main-navigation ul li.dropdown-menu ul{
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="site-navigation" class="main-navigation" role="navigation">
    <div class="menu-menu-1-container">
    <ul id="primary-menu" class="menu">
        <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-41">
            <a href="http://powersol.burnnotice.co.za/">Home</a>
        </li>
        <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-42">
            <a href="http://powersol.burnnotice.co.za/our-dealers/">Our Dealers</a>
            <ul class="sub-menu">
                <li id="menu-item-250" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-250">
                    <a href="http://powersol.burnnotice.co.za/dealer-1/">Dealer 1</a>
                </li>
                <li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246">
                    <a href="http://powersol.burnnotice.co.za/dealer-2/">Dealer 2</a>
                </li>
                <li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245">
                    <a href="http://powersol.burnnotice.co.za/dealer-3/">Dealer 3</a>
                </li>
                <li id="menu-item-249" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-249">
                    <a href="http://powersol.burnnotice.co.za/dealer-4/">Dealer 4</a>
                </li>
            </ul>
        </li>
        <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39">
            <a href="http://powersol.burnnotice.co.za/companies/">Companies</a>
            <ul class="sub-menu">
                <li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247">
                    <a href="http://powersol.burnnotice.co.za/companies-1/">Companies 1</a>
                </li>
                <li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-253">
                    <a href="http://powersol.burnnotice.co.za/companies-3/">Companies 3</a>
                </li>
                <li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-248">
                    <a href="http://powersol.burnnotice.co.za/companies-4/">Companies 4</a>
                </li>
            </ul>
        </li>
        <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40">
            <a href="http://powersol.burnnotice.co.za/contact/">Contact</a>
        </li>
    </ul>
    </div>        
</nav>

Upvotes: 0

Jishnu V S
Jishnu V S

Reputation: 8407

try this demo ,only use css, check the dropdown, this only for your information

#primary-menu > li {
	display:inline-block;
	position:relative;
	margin:15px;
}
#primary-menu > li ul {
	position:absolute;
	left:0;
	padding:0;
	display:none;
}
#primary-menu > li ul li {
	white-space:nowrap;
}
#primary-menu > li:hover ul {
	display:block;
}
<nav id="site-navigation" class="main-navigation" role="navigation">
  <div class="menu-menu-1-container">
    <ul id="primary-menu" class="menu">
      <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-41">
        <a href="http://powersol.burnnotice.co.za/">Home</a>
      </li>
      <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-42">
        <a href="http://powersol.burnnotice.co.za/our-dealers/">Our Dealers</a>
        <ul class="sub-menu">
          <li id="menu-item-250" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-250">
            <a href="http://powersol.burnnotice.co.za/dealer-1/">Dealer 1</a>
          </li>
          <li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246">
            <a href="http://powersol.burnnotice.co.za/dealer-2/">Dealer 2</a>
          </li>
          <li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245">
            <a href="http://powersol.burnnotice.co.za/dealer-3/">Dealer 3</a>
          </li>
          <li id="menu-item-249" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-249">
            <a href="http://powersol.burnnotice.co.za/dealer-4/">Dealer 4</a>
          </li>
        </ul>
      </li>
      <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39">
        <a href="http://powersol.burnnotice.co.za/companies/">Companies</a>
        <ul class="sub-menu">
          <li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247">
            <a href="http://powersol.burnnotice.co.za/companies-1/">Companies 1</a>
          </li>
          <li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-253">
            <a href="http://powersol.burnnotice.co.za/companies-3/">Companies 3</a>
          </li>
          <li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-248">
            <a href="http://powersol.burnnotice.co.za/companies-4/">Companies 4</a>
          </li>
        </ul>
      </li>
      <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40">
        <a href="http://powersol.burnnotice.co.za/contact/">Contact</a>
      </li>
    </ul>
  </div>        
</nav>

Upvotes: 2

Related Questions