Search code examples
htmlcssmenumedia-queriesresponsive-navigation

HTML - Responsive Navigation Bar: SCRIPT NOT WORKING

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>

Solution

  • 2 issues...

    1. Missing callback function on the ready event...

      $(document).ready()

    Need to be this...

    $(document).ready(function () {

    1. 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>