-1

i am trying to create multi level drop down with 1 mega menu.

First we clicking on sub menu link to expand all "UL" and after click on "megamenu" link.. all sub menu ul classes should be removed. so only mega menu div visible.

Ref.

jsfiddle https://jsfiddle.net/8mztfvgp/1/

jQuery code:

$('.mynavul > li > a').on('click', function(){
    if(!$(this).parents().hasClass('onclickopen')){
        $('.mynavul > li').removeClass('onclickopen');    
    }
    $(this).parent().toggleClass('onclickopen');
    });

    $('.mynavul01 > li > a').on('click', function(){
    $(this).parent().toggleClass('onclickopen02');
    });

    $('.mynavul02 > li > a').on('click', function(){
    $(this).parent().toggleClass('onclickopen03');
    });

    $("body").click(function () {
        $(".mynavul > li").removeClass('onclickopen');
        $(".mynavul01 > li").removeClass('onclickopen02');
        $(".mynavul02 > li").removeClass('onclickopen03');
    });

    $(".mynavul > li > a, .mynavul01 > li > a, .mynavul02 > li > a, .mynavul03 > li > a").click(function(e){
    e.stopPropagation();
    });

CSS:

body {margin: 0px;padding: 0px; min-height:1024px;}
.mynav .mynavul > li { float:left; margin:0px 35px; list-style:none; }
.mynavul01{min-width:150px;  position:absolute; top:48px; display:none; }
.mynavul02{min-width:150px;  position:absolute; top:100%; left:100%; display:none;  }
.mynavul03{min-width:150px;  position:absolute; top:100%; left:100%;  display:none;}
.onclickopen .mynavul01{ display:block;}
.onclickopen02 .mynavul02{ display:block;}
.onclickopen03 .mynavul03{ display:block;}
.bigmenu{width:100%;  position:absolute; top:48px; left:0px; display:none; border:solid 1px #ccc;   }
.onclickopen .bigmenu{display:block;}

HTML code:

<nav class="mynav clearfix">
  <ul class="mynavul">
    <li><a href="#">Dropdown</a>
      <ul class="mynavul01">
        <li><a href="#">Submenu item 1 </a></li>
        <li><a href="#">Submenu item 2</a></li>
        <li><a href="#">Submenu item 3</a></li>
        <li><a href="#">Submenu item 4 »</a>
          <ul class="mynavul02">
            <li><a href="#">Submenu item 1</a></li>
            <li><a href="#">Submenu item 2</a></li>
            <li><a href="#">Submenu item 3</a></li>
            <li><a href="#">Submenu item 4  »</a>
              <ul class="mynavul03">
                <li class=""><a href="#">Submenu item 1</a></li>
                <li class=""><a href="#">Submenu item 2</a></li>
                <li class=""><a href="#">Submenu item 3</a></li>
                <li class=""><a href="#">Submenu item 4</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Mega menu</a>
      <div class="bigmenu clearfix"> Lot of links<br>
        Lot of links<br>
        Lot of links<br>
      </div>
    </li>
  </ul>
</nav>
Ravi Gadhiya
  • 390
  • 3
  • 15

1 Answers1

0

All I did was put your jquery code in that you provided. The if statement was not in your jsfiddle link. Works now! Personally I like the hover feature better then I query my mobile nav in css.

https://jsfiddle.net/8mztfvgp/2/

$('.mynavul > li > a').on('click', function(){
if(!$(this).parents().hasClass('onclickopen')){
    $('.mynavul > li').removeClass('onclickopen');    
}
$(this).parent().toggleClass('onclickopen');
});

$('.mynavul01 > li > a').on('click', function(){
$(this).parent().toggleClass('onclickopen02');
});

$('.mynavul02 > li > a').on('click', function(){
$(this).parent().toggleClass('onclickopen03');
});

$("body").click(function () {
    $(".mynavul > li").removeClass('onclickopen');
    $(".mynavul01 > li").removeClass('onclickopen02');
    $(".mynavul02 > li").removeClass('onclickopen03');
});

$(".mynavul > li > a, .mynavul01 > li > a, .mynavul02 > li > a, .mynavul03 > li > a").click(function(e){
e.stopPropagation();
});
//this works fine for what you want
Anthony
  • 111
  • 4
  • Thank you for you answer.. but we need to do same event when user click ok any body area.. you can inspect code..and click body area all sub "UL" class was removed (.onclickopen, .onclickopen02, onclickopen03).. i want to do same thing when user click on "Mega menu" link.. – Ravi Gadhiya Jan 04 '17 at 06:13
  • Sorry I don't get what you want exactly. Do you want to make more sub menus for your "mega menu"? Do you want to have the menus disappear when you click off it? – Anthony Jan 04 '17 at 07:52
  • No submenu in megamenu only 3 sub level in dropdown link – Ravi Gadhiya Jan 04 '17 at 07:54
  • briefly explain what you want – Anthony Jan 04 '17 at 07:56
  • when I click on mega menu and on the body it disappears in jsfiddle does it not in your version? – Anthony Jan 04 '17 at 08:04
  • Yes i was try it. After posting this question.. it is disappears but not removing sub classes.. – Ravi Gadhiya Jan 04 '17 at 08:49