Menu isn't clickable with jQuery

Question

I'd like my Menu to be initially hidden on load and then clicking the text Menu reveals the Menu. Currently, the Menu is visible always. Why is this?

Demo: http://jsfiddle.net/eoxug3cz/

 $('nav.primary').prepend('<div id="menu-button">Menu</div>'); $('nav.primary #menu-button').on('click', function(){ var menu = $(this).next('ul#menu-header'); if (menu.hasClass('open')) { menu.removeClass('open'); } else { menu.addClass('open'); } }); 

 nav.columns ul { padding-left: 0px; } nav.primary { padding-top:0; text-align:left; float:left; margin-top:0; } nav.primary > ul { max-height: 0; overflow: hidden; -webkit-transition: max-height 0.35s ease-out; -moz-transition: max-height 0.35s ease-out; -ms-transition: max-height 0.35s ease-out; -o-transition: max-height 0.35s ease-out; transition: max-height 0.35s ease-out; } nav.primary > ul > li > ul { width: 100%; display: block; } nav.primary.align-right ul li a { text-align: left; } nav.primary > ul > li > ul > li { width: 100%; display: block; } nav.primary.align-right ul ul li a { text-align: left; } nav.primary > ul > li > ul > li > a { width: 100%; display: block; } nav.primary ul li ul li a { width: 100%; } nav.primary.align-center > ul { text-align: left; } nav.primary.align-center > ul > li { display: block; } nav.primary > ul.open { max-height: 1000px; border-top: 1px solid rgba(110, 110, 110, 0.25); } nav.primary ul { width: 100%; } nav.primary ul > li { float: none; width: 100%; } nav.primary ul li a { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 12px 20px; } nav.primary ul > li:after { display: none; } nav.primary ul li.has-sub > a:after, nav.primary ul li.has-sub > a:before, nav.primary ul li ul li.has-sub:after, nav.primary ul li ul li.has-sub:before { display: none; } nav.primary ul li ul, nav.primary ul li ul li ul, nav.primary ul li ul li:hover > ul, nav.primary.align-right ul li ul, nav.primary.align-right ul li ul li ul, nav.primary.align-right ul li ul li:hover > ul { left: 0; position: relative; right: auto; } nav.primary ul li ul li, nav.primary ul li:hover > ul > li { max-height: 999px; position: relative; background: none; } nav.primary ul li ul li a { padding: 0px 20px 0px 35px; } nav.primary ul li ul ul li a { padding: 0px 20px 0px 50px; } nav.primary ul li ul li:hover > a { color: #000000; } nav.primary #menu-button { display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 15px 20px; text-transform: uppercase; font-weight: 700; font-size: 14px; letter-spacing: 1px; color: #111; cursor: pointer; } nav.primary #menu-button:after { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; right: 20px; top: 16px; } nav.primary #menu-button:before { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #ffffff; right: 20px; top: 26px; } @media screen and (max-width: 480px) { .sticky-header { padding-top:0px; position:absolute; } nav.primary #menu-button { text-transform:lowercase; padding: 30px 20px 10px 20px; } footer ul li { border: 0; display: block; width: 100%; padding: 0 20px!important; } nav.primary #menu-button:after, nav.primary #menu-button:before { display:none; } .primary-item:hover .sub-menu, .primary-item .sub-menu { margin:0; } .selected { background:#748d1b; color:#fff!important; } li.primary-item { background:#ddd; padding-top:0; padding-bottom:0; border-bottom:2px solid #ccc; } li.primary-item a { display:block; } #menu-button { margin-top: 20px; } nav.primary > ul { margin-top:10px; } nav.primary #menu-button { padding: 10px 20px 10px 20px; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <nav class="primary menu right"> <div class="menu-header-container"> <ul id="menu-header" class="menu menu inline naked horizontal bold"> <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32 primary-item"><a href="http://localhost:8888/wordpress/?page_id=13">About</a></li> <li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78 primary-item"><a href="http://localhost:8888/wordpress/?page_id=58">Team</a></li> <li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77 primary-item"><a href="http://localhost:8888/wordpress/?page_id=64">Work</a></li> </ul> </div> </nav> 

Thank you.

Answer 1

There is a problem with your css. Use nav.primary > div > ul instead of nav.primary > ul . Use > only for immediate children.

Answer 2

You can use JQuery toggle - JQuery toggle

JSFiddle example:

A working toggle exaple

JS

$('nav.primary').prepend('<div id="menu-button">Menu</div>');
      $('nav.primary #menu-button').on('click', function(){
          var menuItems = $(".menu-header-container");
          menuItems.toggle();
    });

CSS

.menu-header-container {
    display:none;
}

Answer 3

If I understand correct :) hope it's what you want

example

js

$('nav.primary').prepend('<div id="menu-button">Menu</div>');
$('nav.primary #menu-button').on('click', function(){
    if(!$(".menu-header-container").hasClass("opened")) {
        $(".menu-header-container").show();
        $(".menu-header-container").addClass("opened");
    }else {
        $(".menu-header-container").hide();
        $(".menu-header-container").removeClass("opened");
    }
});

Answer 4

nav.columns ul {
    padding-left: 0px;
  }

  nav.primary {
    padding-top:0;
    text-align:left;
    float:left;
    margin-top:0;
  }
  nav.primary > ul {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.35s ease-out;
    -moz-transition: max-height 0.35s ease-out;
    -ms-transition: max-height 0.35s ease-out;
    -o-transition: max-height 0.35s ease-out;
    transition: max-height 0.35s ease-out;
  }
  nav.primary > ul > li > ul {
    width: 100%;
    display: block;
  }
  nav.primary.align-right ul li a {
    text-align: left;
  }
  nav.primary > ul > li > ul > li {
    width: 100%;
    display: block;
  }
  nav.primary.align-right ul ul li a {
    text-align: left;
  }
  nav.primary > ul > li > ul > li > a {
    width: 100%;
    display: block;
  }
  nav.primary ul li ul li a {
    width: 100%;
  }
  nav.primary.align-center > ul {
    text-align: left;
  }
  nav.primary.align-center > ul > li {
    display: block;
  }
  nav.primary > ul.open {
    max-height: 1000px;
    border-top: 1px solid rgba(110, 110, 110, 0.25);
  }
  nav.primary ul {
    width: 100%;
  }
  nav.primary ul > li {
    float: none;
    width: 100%;
  }
  nav.primary ul li a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 20px;
  }
  nav.primary ul > li:after {
    display: none;
  }
  nav.primary ul li.has-sub > a:after,
  nav.primary ul li.has-sub > a:before,
  nav.primary ul li ul li.has-sub:after,
  nav.primary ul li ul li.has-sub:before {
    display: none;
  }
  nav.primary ul li ul,
  nav.primary ul li ul li ul,
  nav.primary ul li ul li:hover > ul,
  nav.primary.align-right ul li ul,
  nav.primary.align-right ul li ul li ul,
  nav.primary.align-right ul li ul li:hover > ul {
    left: 0;
    position: relative;
    right: auto;
  }
  nav.primary ul li ul li,
  nav.primary ul li:hover > ul > li {
    max-height: 999px;
    position: relative;
    background: none;
  }
  nav.primary ul li ul li a {
    padding: 0px 20px 0px 35px;
  }
  nav.primary ul li ul ul li a {
    padding: 0px 20px 0px 50px;
  }
  nav.primary ul li ul li:hover > a {
    color: #000000;
  }
  nav.primary #menu-button {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 15px 20px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    color: #111;
    cursor: pointer;
  }
  nav.primary #menu-button:after {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    right: 20px;
    top: 16px;
  }
  nav.primary #menu-button:before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #ffffff;
    right: 20px;
    top: 26px;
  }

@media screen and (max-width: 480px) {
      .sticky-header {
          padding-top:0px;
          position:absolute;

        }

        nav.primary #menu-button {
          text-transform:lowercase;
          padding: 30px 20px 10px 20px;
        }

        footer ul li {
          border: 0;
          display: block;
          width: 100%;
          padding: 0 20px!important;
        }

        nav.primary #menu-button:after,
        nav.primary #menu-button:before {
          display:none;
        }

        .primary-item:hover .sub-menu, .primary-item .sub-menu {
          margin:0;
        }

        .selected {
          background:#748d1b;
          color:#fff!important;
        }

        li.primary-item {
          background:#ddd;
          padding-top:0;
          padding-bottom:0;
          border-bottom:2px solid #ccc;
        }

        li.primary-item a {
          display:block;
        }

       #menu-button {
            margin-top: 20px;
       }

       nav.primary > ul {
          margin-top:10px;
       }

       nav.primary #menu-button {
         padding: 10px 20px 10px 20px;
       }

  }
div.menu-header-container{
    display:none;
}
div.menu-header-container.open{
    display:block;
}


<nav class="primary menu right">

    <div class="menu-header-container">

        <ul id="menu-header" class="menu menu inline naked horizontal bold">

            <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32 primary-item"><a href="http://localhost:8888/wordpress/?page_id=13">About</a></li>
            <li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78 primary-item"><a href="http://localhost:8888/wordpress/?page_id=58">Team</a></li>
            <li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77 primary-item"><a href="http://localhost:8888/wordpress/?page_id=64">Work</a></li>

        </ul>

    </div>

</nav>

$('nav.primary').prepend('<div id="menu-button">Menu</div>');
      $('nav.primary #menu-button').on('click', function(){

        var menu = $(this).next('div.menu-header-container');

        if (menu.hasClass('open')) {
          menu.removeClass('open');           
        } else {
          menu.addClass('open');            
        }
    });

see demo