CODEWITHSUNDEEP
javascriptjqueryhtmlcssmenu
Luke B
Luke B

Reputation: 129

Toggling Burger Menu

I have a burger menu using HTML, CSS and jQuery which changes from a full width menu to a burger menu. I need to to toggle the dropdown but it doesn't. Here is my code.

<!DOCTYPE html>
<html>
  <head>
    <title>Hamburger Menu</title>
  </head>
  <body>
    <nav class="menu">
      <ul class="active">
        <li class="current-item"><a href="#">Home</a></li>
        <li><a href="#">My Work</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Get in Touch</a></li>
        <li><a href="#">Blog</a></li>
      </ul>

      <a class="toggle-nav" href="#">&#9776;</a>
    </nav>
    <style type="text/css">
      /*----- Toggle Button -----*/
      .toggle-nav {
        display:none;
      }

      /*----- Menu -----*/
      @media screen and (min-width: 860px) {
        .menu {
          width:100%;
          padding:10px 18px;
          box-shadow:0px 1px 1px rgba(0,0,0,0.15);
          border-radius:3px;
          background:#303030;
        }
      }

      .menu ul {
        display:inline-block;
      }

      .menu li {
        margin:0px 50px 0px 0px;
        float:left;
        list-style:none;
        font-size:17px;
      }

      .menu li:last-child {
        margin-right:0px;
      }

      .menu a {
        text-shadow:0px 1px 0px rgba(0,0,0,0.5);
        color:#777;
        transition:color linear 0.15s;
      }

      .menu a:hover, .menu .current-item a {
        text-decoration:none;
        color:#66a992;
      }
      /*----- Responsive -----*/
      @media screen and (max-width: 1150px) {
        .wrap {
          width:90%;
        }
      }

      @media screen and (max-width: 970px) {
        .search-form input {
          width:120px;
        }
      }

      @media screen and (max-width: 860px) {
        .menu {
          position:relative;
          display:inline-block;
        }

        .menu ul.active {
          display:none;
        }

        .menu ul {
          width:100%;
          position:absolute;
          top:120%;
          left:0px;
          padding:10px 18px;
          box-shadow:0px 1px 1px rgba(0,0,0,0.15);
          border-radius:3px;
          background:#303030;
        }

        .menu ul:after {
          width:0px;
          height:0px;
          position:absolute;
          top:0%;
          left:22px;
          content:'';
          transform:translate(0%, -100%);
          border-left:7px solid transparent;
          border-right:7px solid transparent;
          border-bottom:7px solid #303030;
        }

        .menu li {
          margin:5px 0px 5px 0px;
          float:none;
          display:block;
        }

        .menu a {
          display:block;
        }

        .toggle-nav {
          padding:20px;
          float:left;
          display:inline-block;
          box-shadow:0px 1px 1px rgba(0,0,0,0.15);
          border-radius:3px;
          background:#303030;
          text-shadow:0px 1px 0px rgba(0,0,0,0.5);
          color:#777;
          font-size:20px;
          transition:color linear 0.15s;
        }

        .toggle-nav:hover, .toggle-nav.active {
          text-decoration:none;
          color:#66a992;
        }

        .search-form {
          margin:12px 0px 0px 20px;
          float:left;
        }

        .search-form input {
          box-shadow:-1px 1px 2px rgba(0,0,0,0.1);
        }
      }</style>
    <script type="text/javascript">
      jQuery(document).ready(function() {
        jQuery('.toggle-nav').click(function(e) {
          jQuery(this).toggleClass('active');
          jQuery('.menu ul').toggleClass('active');

          e.preventDefault();
        });
      });
    </script>
  </body>
</html>

When my menu becomes a burger menu at a small screen size the dropdown menu does not toggle it just stays how it is I've looked over my code and I cannot find a problem thats why i am asking you guys to find out why it isn't toggling.

Upvotes: 1

Views: 7169

Answers (2)

Jodi Supporter
Jodi Supporter

Reputation: 330

You forgot to include the reference to JQuery. As soon as you do, it will work. Here's the fiddle:

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

https://jsfiddle.net/np4ygrm6/

Upvotes: 3

Manuszep
Manuszep

Reputation: 823

I copied your code in a fiddle and it seems to work.

Are you sure you did not forget jQuery ?

jQuery(document).ready(function() {
        jQuery('.toggle-nav').click(function(e) {
          jQuery(this).toggleClass('active');
          jQuery('.menu ul').toggleClass('active');

          e.preventDefault();
        });
      });
/*----- Toggle Button -----*/
      .toggle-nav {
        display:none;
      }

      /*----- Menu -----*/
      @media screen and (min-width: 860px) {
        .menu {
          width:100%;
          padding:10px 18px;
          box-shadow:0px 1px 1px rgba(0,0,0,0.15);
          border-radius:3px;
          background:#303030;
        }
      }

      .menu ul {
        display:inline-block;
      }

      .menu li {
        margin:0px 50px 0px 0px;
        float:left;
        list-style:none;
        font-size:17px;
      }

      .menu li:last-child {
        margin-right:0px;
      }

      .menu a {
        text-shadow:0px 1px 0px rgba(0,0,0,0.5);
        color:#777;
        transition:color linear 0.15s;
      }

      .menu a:hover, .menu .current-item a {
        text-decoration:none;
        color:#66a992;
      }
      /*----- Responsive -----*/
      @media screen and (max-width: 1150px) {
        .wrap {
          width:90%;
        }
      }

      @media screen and (max-width: 970px) {
        .search-form input {
          width:120px;
        }
      }

      @media screen and (max-width: 860px) {
        .menu {
          position:relative;
          display:inline-block;
        }

        .menu ul.active {
          display:none;
        }

        .menu ul {
          width:100%;
          position:absolute;
          top:120%;
          left:0px;
          padding:10px 18px;
          box-shadow:0px 1px 1px rgba(0,0,0,0.15);
          border-radius:3px;
          background:#303030;
        }

        .menu ul:after {
          width:0px;
          height:0px;
          position:absolute;
          top:0%;
          left:22px;
          content:'';
          transform:translate(0%, -100%);
          border-left:7px solid transparent;
          border-right:7px solid transparent;
          border-bottom:7px solid #303030;
        }

        .menu li {
          margin:5px 0px 5px 0px;
          float:none;
          display:block;
        }

        .menu a {
          display:block;
        }

        .toggle-nav {
          padding:20px;
          float:left;
          display:inline-block;
          box-shadow:0px 1px 1px rgba(0,0,0,0.15);
          border-radius:3px;
          background:#303030;
          text-shadow:0px 1px 0px rgba(0,0,0,0.5);
          color:#777;
          font-size:20px;
          transition:color linear 0.15s;
        }

        .toggle-nav:hover, .toggle-nav.active {
          text-decoration:none;
          color:#66a992;
        }

        .search-form {
          margin:12px 0px 0px 20px;
          float:left;
        }

        .search-form input {
          box-shadow:-1px 1px 2px rgba(0,0,0,0.1);
        }
      }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="menu">
      <ul class="active">
        <li class="current-item"><a href="#">Home</a></li>
        <li><a href="#">My Work</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Get in Touch</a></li>
        <li><a href="#">Blog</a></li>
      </ul>

      <a class="toggle-nav" href="#">&#9776;</a>
    </nav>

Upvotes: 1

Related Questions