HTML - Responsive Navigation Bar: SCRIPT NOT WORKING

Question

I am following this tutorial EDIT: changed link to specific time of video https://www.youtube.com/watch?v=XZsuI5wyRzs&feature=youtu.be&t=560 on how to make a responsive nagivation bar before I dive into the main content.

For some reason at this part of the timeline here (I saved the link to current time so you can see what I'm talking about without having to skim through the video) I followed the steps exactly, but my hamburger icon is not being activated when it is clicked in order to bring down the drop-down menu. Other than that, everything else looks pretty good. What is wrong with my code? Please take a look at it below.

Thanks

/*CSS Page*/

/*-----HTML Body-----*/

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

/*----End HTML Body-----*/

/*-----Start of Navigation Bar-----*/

nav {
  width: 100%;
  background: #8000ff;
}

ul {
  width: 50%;
  margin: 0 auto;
  padding: 0;
}

ul li {
  list-style: none;
  display: inline-block;
  padding: 20px;
}

/*For mouse hover*/

ul li:hover {
  background: #4dff4d;
}

/*Smartphone/Tablet: Menu Bar*/

.toggle {
  width: 100%;
  padding: 10px 20px;
  background: #cc66ff;
  text-align: right;
  box-sizing: border-box;
  color: #000000;
  font-size: 30px;
  display: none;
}

/*-----End of Navigation Bar-----*/

/* Media Queries for Smaller Screen Size Begins */

@media (max-width: 786px) {
    .toggle {
      display: block;
    }

/* Navigation Drop down */

    ul {
      width: 100%;
      display: none;
    }

/* End Navigation Drop Down */

    ul li {
      display: block;
      text-align: center;
    }
    .active {
      display: block;
    }
}


/* Media Queries for Smaller Screen Size Ends */

<!DOCTYPE html>

<!--HTML Page-->

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <title>test</title>
  </head>

  <link rel="stylesheet" href="css/style.css">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <body>


    <nav>
      <div class="toggle">
        <i class="fa fa-bars menu" aria-hidden="true"></i>
      </div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    <script src="https:////code.jquery.com/jquery-3.2.1.js"></script>
    <script type="text/javascript">
      $(document).ready() {
        $('menu').click(function() {
          $('ul').toggleClass('active')
        })
      })
    </script>

  </body>
</html>

cantuket · Accepted Answer · 2019-01-21T21:14:28.303

2 issues...

Missing callback function on the ready event...

$(document).ready()

Need to be this...

$(document).ready(function () {

You're missing the '.' in front of 'menu' class selector...

$('menu')

Needs to be like this...

$('.menu')

Working example below...

/*CSS Page*/

/*-----HTML Body-----*/

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

/*----End HTML Body-----*/

/*-----Start of Navigation Bar-----*/

nav {
  width: 100%;
  background: #8000ff;
}

ul {
  width: 50%;
  margin: 0 auto;
  padding: 0;
}

ul li {
  list-style: none;
  display: inline-block;
  padding: 20px;
}

/*For mouse hover*/

ul li:hover {
  background: #4dff4d;
}

/*Smartphone/Tablet: Menu Bar*/

.toggle {
  width: 100%;
  padding: 10px 20px;
  background: #cc66ff;
  text-align: right;
  box-sizing: border-box;
  color: #000000;
  font-size: 30px;
  display: none;
}

/*-----End of Navigation Bar-----*/

/* Media Queries for Smaller Screen Size Begins */

@media (max-width: 786px) {
    .toggle {
      display: block;
    }

/* Navigation Drop down */

    ul {
      width: 100%;
     /* display: none; */
      display: block;
      height:0px;
      transition: height 0.5s linear;
      overflow: hidden;
    }

/* End Navigation Drop Down */

    ul li {
      display: block;
      text-align: center;
    }
    .active {
      /* display: block; */  
      height: 300px;
    }
}

/* Media Queries for Smaller Screen Size Ends */

<!DOCTYPE html>

<!--HTML Page-->

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <title>test</title>
  </head>

 <!-- <link rel="stylesheet" href="css/style.css"> -->
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <body>


    <nav>
      <div class="toggle">
        <i class="fa fa-bars menu" aria-hidden="true"></i>
      </div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    <script src="https:////code.jquery.com/jquery-3.2.1.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $('.menu').click(function() {
          $('ul').toggleClass('active')
        })
      })
    </script>

  </body>
</html>

Sorry for all the crazy edits. I despise these built-in SO code editors. For longer working examples like this I'd suggest using https://codepen.io, https://codesandbox.io, https://jsfiddle.net .etc and providing a link to working example. Pretty much anything other than StackOverflow's. Sorry, not sorry SO. Love you guys. — cantuket, Jan 21 '19 at 21:00
Thanks man! It now works! Now I have one more question. Do you know of an idea of how I can now squeeze in some of the last bit of code to create a smooth transition like this here? https://jsfiddle.net/xg3s83yo/ Make sure you resize the preview panel so that you know what I'm talking about. — Azazel, Jan 21 '19 at 21:00
No problem and sure give me one second. I've lost all patience with this god forsaken code editor : / — cantuket, Jan 21 '19 at 21:07
Ok done, but its kind of an ugly/brittle implementation with the hard coded `300px` height. I thought you could transition to `height: auto`, but I was mistaken. Plenty of better ways to do this (css transform, or JS animations), but will get the job done for now — cantuket, Jan 21 '19 at 21:17
JsFiddle here if you want to play around... https://jsfiddle.net/8wuta74g/ — cantuket, Jan 21 '19 at 21:19
Thanks man! I'll play around with it until I find the transition I like to fit my taste! — Azazel, Jan 21 '19 at 21:24

HTML - Responsive Navigation Bar: SCRIPT NOT WORKING

1 Answers1