How can I change the provided jQuery to toggle menu correctly?

Question

I have a hamburger menu icon displayed and want it to have a drop down menu, shown here:

<div id="nav-icon">
  <div id="hamburger-nav"></div>
  <ul id="nav-list">
    <li><a id="about" href="#about">about</a></li>
    <li><a id="work" href="#work">work</a></li>
    <li><a id="contact" href="#contact">contact</a></li>
  </ul>
</div>

This menu's display is set to "none". Below is my jQuery I am using to display the nav list. I want it to appear when clicked and disappear when clicked again (toggle). Why does this not work? What adjustments need to be made? jsfiddle here

$(document).ready(function() {
    var n = $("#nav-list");

    $("#nav-icon").click(function() {
        if (n.css("display, none")) {
            n.css("display, block");
        } else {
            n.css("display, none");
        }
    });
});

Answer 1

Your code is good u have few syntax mistakes

$(document).ready(function() {

  var n = $("#nav-list");

  $("#nav-icon").click(function() {
    if (n.css("display") == "none") {
      n.css("display","block");
    } else {
      n.css("display","none");
    }
    
    /*
    * n.slideToggle();
    * n.toggle(); 
    * n.fadeToggle();
    *
    */
   
  });

});

#nav-icon {
  display: block;
  padding: 1.3em;
  position: absolute;
  top: 1.6em;
  right: .8em;
  cursor: pointer;
}

#hamburger-nav,
#hamburger-nav::before,
#hamburger-nav::after {
  content: "";
  display: block;
  width: 2.3em;
  height: 3px;
  background: #000;
}

#hamburger-nav::after {
  transform: translateY(-.75em);
}

#hamburger-nav::before {
  transform: translateY(.6em);
}

#nav-list {
  display: none;
  list-style: none;
  position: absolute;
  top: 4.2em;
  left: -6em;
  width: 12em;
  height: 10em;
  z-index: 5;
  background: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

#nav-list li {
  text-align: center;
  position: relative;
  right: 2.8em;
  padding: .95em;
  width: 12em;
  font-weight: 600;
  border-top: 1px solid #ccc;
}

#nav-list a {
  color: #000;
  text-decoration: none;
}

#top:hover {
  border-bottom: 2px solid #0f0;
}

#middle:hover {
  border-bottom: 2px solid #f00;
}

#botttom:hover {
  border-bottom: 2px solid #00f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav-icon">
  <div id="hamburger-nav"></div>
  <ul id="nav-list">
    <li><a id="top" href="#about">about</a></li>
    <li><a id="middle" href="#work">work</a></li>
    <li><a id="bottom" href="#contact">contact</a></li>
  </ul>
</div>

Answer 2

Play with toggle class more easy and simply can apply some effect just by CSS. Check out this 2 option:

with pure javascript:

document.getElementById("nav-icon").onclick = function(){
this.classList.toggle('show-nav-list');
}

#nav-icon {
  display: block;
  padding: 1.3em;
  position: absolute;
  top: 1.6em;
  right: .8em;
  cursor: pointer;
}

#hamburger-nav,
#hamburger-nav::before,
#hamburger-nav::after {
  content: "";
  display: block;
  width: 2.3em;
  height: 3px;
  background: #000;
}

#hamburger-nav::after {
  transform: translateY(-.75em);
}

#hamburger-nav::before {
  transform: translateY(.6em);
}

#nav-list {
  display:none;
  list-style: none;
  position: absolute;
  top: 4.2em;
  left: -6em;
  width: 12em;
  height: 10em;
  z-index: 5;
  background: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

#nav-list li {
  text-align: center;
  position: relative;
  right: 2.8em;
  padding: .95em;
  width: 12em;
  font-weight: 600;
  border-top: 1px solid #ccc;
}

#nav-list a {
  color: #000;
  text-decoration: none;
}

#top:hover {
  border-bottom: 2px solid #0f0;
}

#middle:hover {
  border-bottom: 2px solid #f00;
}

#botttom:hover {
  border-bottom: 2px solid #00f;
}


.show-nav-list #nav-list {
  display:block !important;
}

<div id="nav-icon">
  <div id="hamburger-nav"></div>
  <ul id="nav-list" >
    <li><a id="top" href="#about">about</a></li>
    <li><a id="middle" href="#work">work</a></li>
    <li><a id="bottom" href="#contact">contact</a></li>
  </ul>
</div>

or With Jquery:

$(function(){
$('#nav-icon').click(function(){
$("#nav-list").toggleClass("show-nav-list")
})
})

/* Check last line of this CSS, i add .show-nav-list  class CSS*/

#nav-icon {
  display: block;
  padding: 1.3em;
  position: absolute;
  top: 1.6em;
  right: .8em;
  cursor: pointer;
}

#hamburger-nav,
#hamburger-nav::before,
#hamburger-nav::after {
  content: "";
  display: block;
  width: 2.3em;
  height: 3px;
  background: #000;
}

#hamburger-nav::after {
  transform: translateY(-.75em);
}

#hamburger-nav::before {
  transform: translateY(.6em);
}

#nav-list {
  display: none;
  list-style: none;
  position: absolute;
  top: 4.2em;
  left: -6em;
  width: 12em;
  height: 10em;
  z-index: 5;
  background: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

#nav-list li {
  text-align: center;
  position: relative;
  right: 2.8em;
  padding: .95em;
  width: 12em;
  font-weight: 600;
  border-top: 1px solid #ccc;
}

#nav-list a {
  color: #000;
  text-decoration: none;
}

#top:hover {
  border-bottom: 2px solid #0f0;
}

#middle:hover {
  border-bottom: 2px solid #f00;
}

#botttom:hover {
  border-bottom: 2px solid #00f;
}

.show-nav-list {
  display:block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="nav-icon">
  <div id="hamburger-nav"></div>
  <ul id="nav-list">
    <li><a id="top" href="#about">about</a></li>
    <li><a id="middle" href="#work">work</a></li>
    <li><a id="bottom" href="#contact">contact</a></li>
  </ul>
</div>

Answer 3

The problem is with the typos you have in your code (https://codepen.io/anon/pen/rwyNqM):

$(document).ready(function() {
  var n = $("#nav-list");
  $("#nav-icon").click(function() {
    // This is how we check the current display value.
    if (n.css("display") === "none") {
      // First parameter and second parameter should be in quotes.
      n.css("display", "block");
    } else {
      n.css("display", "none");
    }
  });
});

Answer 4

I would use :hidden to check if the menu is hidden/visible, then you need to separate the CSS in $.css() with quotes.

$(document).ready(function() {

  var $n = $("#nav-list");

  $("#nav-icon").click(function() {

    if ($n.is(':hidden')) {

      $n.css("display","block");

    } else {

      $n.css("display","none");
    }
  });

});

#nav-icon {
  display: block;
  padding: 1.3em;
  position: absolute;
  top: 1.6em;
  right: .8em;
  cursor: pointer;
}

#hamburger-nav,
#hamburger-nav::before,
#hamburger-nav::after {
  content: "";
  display: block;
  width: 2.3em;
  height: 3px;
  background: #000;
}

#hamburger-nav::after {
  transform: translateY(-.75em);
}

#hamburger-nav::before {
  transform: translateY(.6em);
}

#nav-list {
  display: none;
  list-style: none;
  position: absolute;
  top: 4.2em;
  left: -6em;
  width: 12em;
  height: 10em;
  z-index: 5;
  background: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

#nav-list li {
  text-align: center;
  position: relative;
  right: 2.8em;
  padding: .95em;
  width: 12em;
  font-weight: 600;
  border-top: 1px solid #ccc;
}

#nav-list a {
  color: #000;
  text-decoration: none;
}

#top:hover {
  border-bottom: 2px solid #0f0;
}

#middle:hover {
  border-bottom: 2px solid #f00;
}

#botttom:hover {
  border-bottom: 2px solid #00f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav-icon">
  <div id="hamburger-nav"></div>
  <ul id="nav-list">
    <li><a id="top" href="#about">about</a></li>
    <li><a id="middle" href="#work">work</a></li>
    <li><a id="bottom" href="#contact">contact</a></li>
  </ul>
</div>