nested drop down menu css jquery

Question

Im really new to css and HTML and don't know almost nothing about jquery. Trying to create a menu which will be displayed on devices. The menu must therefore be clickable. The menu will be nested under a so called hamburger icon, it needs to have a even deeper nested list. I have used a net ninja tutorial to achieve the top level dropdown. But the deeper nested list will not work, could anybody lend me a hand?

My html looks like this:

<nav id="MainNavigation">
   <a href="#" id="menuIcon"><img src="images/menu_logo_webb_design.svg" alt="Menu icon"></a>
    <ul id="dropDownMenu">
      <li> 
       <a href="#" title="Woman">Woman
       </a>
       <li> 
       <a class="Sub_Menu_Link" href="#" title="Womanplus">+
       </a>

        <ul>
          <li><a href="#">1</a> </li>
          <li><a href="#">2</a> </li>
          <li><a href="#">3</a> </li>
          <li><a href="#">4</a> </li>
          <li><a href="#">5</a> </li>
        </ul>
        </li>
      </li>
      <li> <a href="#" title="Man">Man</a>
       <li> 
       <a class="Sub_Menu_Link" href="#" title="Manplus">+
       </a>
         <ul>
          <li><a href="#">1</a> </li>
          <li><a href="#">2</a> </li>
          <li><a href="#">3</a> </li>
          <li><a href="#">4</a> </li>
          <li><a href="#">5</a> </li>
        </ul>
        </li>
      </li>
      <li><a class="Sub_Menu_Link" href="#" title="Sale">Sale</a></li>
    </ul>
  </nav>

And my CSS:

nav>a{
    display:block;
    background-color:red;
    padding: 0 20px;
}

nav ul.open{
    display:block;
}

nav ul ul.open{
    display:block;
}



nav ul li a{
    color:#161212;

    margin:0;
}


nav ul ul li a{
    color:#161212;

    margin:0;
}

nav ul{
    display: none;
}
nav ul ul{
    position:absolute;
    display:none;   
}

nav >ul a{
    padding:0px 0px 0px 30px;

}


nav ul ul a{
    padding:0 30px 0 0;
}
nav>ul{
    margin:0;
    padding:0 0px;;
    float:left;
    line-height:40px;
}


nav ul a{
    list-style:none;
    text-decoration:none;
}
nav ul ul li a {
    display:inline-block;

}

nav>ul:after{
    content:"";
    visibility:hidden;
    display:block;
    clear:both;
}
.Sub_Menu_Link{
    display:inline-block;

    line-height:40px;
}

.Sub_Menu_Link:hover{
    color:yellow;
}

nav ul{
    background:#E9E9E9;
    position:relative;
    width:100%;
}
nav ul ul li a:hover{
    color:yellow;
}

And Jquery:

// JavaScript Document
$(document).ready(function(){


    $("nav a").on("click", function(){

        $("nav > ul").toggleClass("open");
    });


    $(" .Sub_Menu_Link").on("click", function(){
            $("nav ul>ul").toggleClass("open");
            });      



});

Brent Boden · Accepted Answer · 2017-02-23 09:02:35Z

1

Just make these changes to the first function, and it should be alright.

$("nav a").click(function(event){
    event.stopPropagation();
    event.preventDefault();
    $(this).next("ul").toggleClass("open");
});

And maybe this can help you too:

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h

edited Feb 23, 2017 at 9:02

answered Feb 23, 2017 at 8:50

Brent Boden

5792 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Patrik Over a year ago

Thank you so much for the help! But now when i use this code, the menu after being clicked stays open all the time and will not hide. What could be that problem?How should i solve that?

Brent Boden Over a year ago

It was the default behaviour of a "anchor" (<a href>) so i included the event.preventDefault() and the event.stopPropagation to stop it reloading the page. Please don't forget to mark this question as completed.

Collectives™ on Stack Overflow

nested drop down menu css jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related