jQuery. Two navigation menus, one nav doesn't open if another nav already opened

JavaScript
1

Hi,

I am doing a navigation menu using CSS and jQuery. The problem is: if I have one nav opened, when I try to click on the icon to open the second nav, the first opened nav disappears (and this is a good thing), but the second nav doesn’t open unless you click on that same icon for a second time! Please, can you help me? Thanks!

this is the fiddle link:
jsfiddle.net/framj00/yq3dozs1/

my jQuery code:

$( document ).ready(function() {

   $( ".nav-open" ).each( function() {
      if ($(this).has("ul").length){
         $("ul", this).addClass( "nav-hide" );
      }
   });

   $( ".nav-open span" ).click(function() {

     if (!$(this).closest("ul").hasClass("nav-menu")) {
        $(".nav-menu").addClass( 'nav-hide' );            
        // I think here is the place for the resolutive code!
     }

     if ($(this).parent().children('ul').eq(0).hasClass("nav-show"))  {
        $(this).parent().children('ul').eq(0).toggleClass("nav-show").addClass("nav-hide");
     } else {
        $(this).parent().children('ul').eq(0).toggleClass( "nav-hide" ).addClass( "nav-show" );

     }

   });

});

Here is my HTML code:

<!DOCTYPE html>
<html lang="it">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title></title>
     <link href="include/nav.css" rel="stylesheet">
     <link href='https://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
     <script src="include/jquery/jquery-1.12.3.min.js"></script>
     <script src="include/js/nav.js"></script>

   </head>
   <body>
   <div id='navs'>
      <div id='nav-top'>
         <ul>
            <li class='nav-open' id='nav-top-open'><span>Menu Top</span>
               <ul class='nav-menu' id='nav-top-menu'>
                  <li><a>Link 1</a></li>
                      <li><a>Link 2</a></li>
                      <li><a>Link 3</a></li>
                      <li><a>Link 4</a></li>
                      <li><a>Link 5</a></li>
                      <li><a>Link 6</a></li>
               </ul>
            </li>
         </ul>
      </div>
      <div id='nav-user'>
         <ul>
            <li class='nav-open' id='nav-user-open'><span>Menu user</span>
               <ul class='nav-menu' id='nav-user-menu'>
                  <li><span>Sub menu</span>
                     <ul>
                        <li><a>Sub link 1</a></li>
                        <li><a>Sub link 2</a></li>
                     </ul>
                  </li>
               </ul>
            </li>
         </ul>
      </div>
   </div>
   </body>
</html>

the CSS:

html, body {
   margin: 0;
   padding: 0;
   font-size: 16px;
   background: yellow;
}

.nav-show {
   display: table;
}

.nav-hide {
   display: none;
}

#navs {
   width: 96px;
   float: right;
}

.nav-open span {
   display: inline-block;
   float: left;
   height: 48px;
   width: 48px;
   text-indent: -9999px;
}

#nav-top-open>span {
   background-color: blue;
}

#nav-user-open>span {
   background-color: tomato;
}

.nav-open ul {  
   padding: 0;   
   width: 100%;
   text-align: right;
   position:absolute;
   top:48px;
   left: 0;
}

#nav-top ul, #nav-user ul {
   margin: 0;
   padding: 0;
}

#nav-top ul li, #nav-user ul li {
   list-style-type: none;
}

.nav-open ul li {
   display: table-row;
   background: red;
   font-family: 'PT Sans', sans-serif;
   font-size: 18px;
   text-transform: uppercase;
   line-height: 50px;
}

.nav-open ul li span {
    display: block;
    margin-left: -10px;
    width: 100%;
}

.nav-open ul li a {
   display: table-cell;
   padding-right: 10px;
   background: red;
}

Thanks again! END.

2

Hi,

Here you go: http://jsfiddle.net/yq3dozs1/3/

3

Ok Thanks, commented and documented! But, look that in your code, when I click to the “Sub menu”, the “Sub links” don’t appears! Please, can you fix it?

4

Added separate click handler for sub menus

5

It’s awesome! Thanks!

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.