Hamburger menu not functioning

Question

I've gotten sort of close with this hamburger menu but it's still not functioning. Any help would be great. (I'm sure it's obvious but forest for the trees and all that.) To a newb, it seems like my js isn't functioning/triggering/whatever the correct word is. Perhaps I linked it wrong?

<!DOCTYPE html>
<title>Bad Doc</title>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script> 
      $('.menu-btn').click(function(){
        $('.responsive-menu').toggleClass('expand')
      })
    </script>
    <style>

      .clearfix:after {
        content: "";
        display: table;
        clear: both;
      }


      .body {
        margin: 0;
        padding: 0;
      }

      a:hover { 
        background-color: #D3D3D3;
      }

      a:link {
        text-decoration: none;
      }

      p {
        font-family: "Garamond", Times, serif;
      }

      .wrapper {
        border: 1px solid blue;
        padding: 1px;
        background-color: gray;
      }

      .main-nav {
        border: 1px solid blue; 
        float: left;
        margin: 0 5px 0 0;
      }

      .content {
        border: 1px solid blue; 
        overflow: auto;

      }

      h1 {
        font-size: 72px;
        text-align: center;
        margin: 0 0 20px 0;
        font-family: "Garamond", Times, serif;
      }

      ul {
        margin-right: 10px;
        padding: 0 20px 0 20px;
      }

      li {
        list-style-type:none;
        font-family: "Garamond", Times, serif;
        font-size: 14px;
      }

      .photos {
        text-align: center;
      }

      img {
        max-width: 30%;
        height: auto;
        opacity: 0.7;
        filter: alpha(opacity=70); 
      }   

      img:hover {
        opacity: 1.0;
        filter: alpha(opacity=100); 
      }

      #footer p {
        text-align: center;
        font-size: 14px;
        border: 1px solid blue; 
        margin: 3px 0 0 0;
        padding: 3px;
        background-color: gray;
      }

      @media only screen and (max-width: 600px) {
        body {
          background-color: lightblue;
        }
        img {max-width: 70%; padding-bottom: 10px;
        }
        h1 {
          font-size: 30px;
        }
        .content {
          background-color: black;
          padding-right: 0;
          margin-left: 60px;
          margin-right: 60px;
        }

        .menu-btn div{
          float: left;
          padding-right: 8px;
          margin-top: 1em;
          line-height: 1.2;
          font-size: 18px;
          font-weight: 200;
          vertical-align: middle;
          z-index: 99;
        }
        .menu-btn span {
          display: block;
          width: 25px;
          height: 4px;
          margin-bottom: 5px;
          background: rgb(0,0,0);
          z-index: 99;
        }

        .responsive-menu{
          display: none;
          overflow: hidden;
        }

        .responsive-menu ul {
          margin: 0;
          padding: 0;
          width: 100px;
          float: left;
        }

        .responsive-menu li {
          margin: 0;
          padding: 0;
          list-style-type: none;
        }

        .expand {
          display: block !important; 
        }

        <!-- nav ends here-->

    </style>
  </head>

  <body>

    <!-- added clearfix here with style at top of style list-->
    <div class="wrapper clearfix">
      <h1>gage</h1>

      <!-- this is nav-->
      <div class="menu-btn" id="menu-btn">
        <div></div>
        <span></span>
        <span></span>
        <span></span>

        <div class="main-nav responsive-menu">
          <ul>
            <li><a href="#">about</a></li>
            <li><a href="#">contact</a></li>
          </ul>
        </div>
      </div>

      <!-- this is main body of page -->
      <div class="content"> 
        <div class="photos">
          <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
          <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
          <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
          <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
          <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
          <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
        </div>
      </div>
      <!-- this is footer (inside or outside last div???) -->
    </div>

    <div id="footer">
      <p>More stuff</p>
    </div>
  </body>
</html>

Please add a JSFiddle or CodePen to your question, instead of just pasting the code here. See also http://stackoverflow.com/help/mcve — Roy, Apr 14 '16 at 10:39
@Roy External sites likes those are a courtesy, not a requirement to post questions. — Yoshi, Apr 14 '16 at 10:52
@Yoshi But people will be more motivated to look into code on codepen/JSfiddle, because they can start editing/fixing it right away. — IdeaMan, Apr 14 '16 at 10:56
@IdeaMan I understand that, though I think the tone of Roys comment is not appropriate (*...instead of just pasting...*). — Yoshi, Apr 14 '16 at 10:59

Mosh Feu · Accepted Answer · 2016-04-14T10:47:55.263

4

The better option is to move your scripts to the end of the body tag.

If you can't, you need to wrap this code:

$('.menu-btn').click(function(){
  $('.responsive-menu').toggleClass('expand')
})

With $(document).ready

Like this:

$(document).ready(function() {
  $('.menu-btn').click(function() {
    $('.responsive-menu').toggleClass('expand')
  })
});

http://jsbin.com/gelode/edit?html,js

edited Apr 14 '16 at 10:47

answered Apr 14 '16 at 10:42

Mosh Feu

28,354
16
88
135

2

Or better - include all your javascript files at the end of your document. That way scripts will be loaded after the DOM. – Wish Apr 14 '16 at 10:45
If you place JS in – IdeaMan Apr 14 '16 at 10:48
@MoshFeu Edited and clarified qurstion a bit. – IdeaMan Apr 14 '16 at 10:53
1

@IdeaMan yes, you are right. Unless you wrap this code with listener like `window.onload` or `document.addEventListener("DOMContentLoaded"` or jQuery equivalent. – Mosh Feu Apr 14 '16 at 10:54
Thanks for the help. I see where I went wrong now. And thanks especially the bit about jsbin -- I didn't know about that. – Chris Apr 14 '16 at 10:58
;) My pleasure.. Glad I could help. Good luck. – Mosh Feu Apr 14 '16 at 10:59

Hamburger menu not functioning

1 Answers1