Javascript dropdown menu not working

Question

I'm trying to create dropdown menu that will open and collapse when the "mobile-nav" button gets clicked.

Please see this video or website as examples of the intended behavior:

function mobileNav() {
  $('.mobile-nav-toggle').on('click', function() {
    var status = $(this).hasClass('is-open');
    if (status) {
      $('.mobile-nav-toggle, .mobile-nav').removeClass('is-open');
    } else {
      $('.mobile-nav-toggle, .mobile-nav').addClass('is-open');
    }
  });
}

/* ------------------------------------------ */

/* BASIC SETUP */

/* ------------------------------------------ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  text-align: justify color: #fff;
  font-family: 'Lato', 'arial', sans-serif;
  font-size: 19px;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  background: #333;
  background-position: center;
  height: 100vh;
  background-attachment: fixed;
}
/* ------------------------------------------ */

/* REUSABLE COMPONENTS */

/* ------------------------------------------ */

.row-basic {
  max-width: 1216px;
}
.main-container {
  max-width: 1216px;
  margin: 0 auto;
}
/* ------------------------------------------ */

/* HEADER */

/* ------------------------------------------ */

.mobile-nav {
  display: ;
  position: ;
  width: 1216px;
  background: white;
  padding: 31px 0px 21px;
  transform: translateY(-100%);
  transition: all 0.3s ease-in-out
}
.mobile-nav.is-open {
  display: block;
  transform: translateY(0%);
}
.mobile-nav ul {
  list-style: none;
}
.mobile-nav ul li {
  text-align: center;
  margin-bottom: 10px;
}
.mobile-nav ul li a:link,
.mobile-nav ul li a:visited {
  color: #999;
  text-decoration: none;
  text-transform: uppercase;
}
header {
  background-color: rgba(246, 149, 149, 0.06);
  height: 81px;
  width: auto;
  padding-top: 24px;
  margin-top: 26px;
  margin-bottom: 0px;
  display: flex;
  justify-content: space-between;
}
/* ----- NAVIGATION -----*/

nav {
  display: flex;
  align-items: center;
}
nav ul {
  display: flex;
}
.main-nav {
  list-style: none;
}
.main-nav li {
  display: inline-block;
  line-height: 31px;
  border-right: 1px solid rgba(255, 255, 255, 0.24);
  padding-right: 9px;
  padding-left: 9px;
  margin-right: 0px;
  width: auto;
}
.main-nav li:last-child {
  border-right: hidden;
  margin-right: 31px;
}
.main-nav li a:link,
.main-nav li a:visited {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}
.user-tools {
  display: flex;
  align-items: center;
}
.user-tools:focus {
  outline: none;
}
/* ----- MENU BUTTON -----*/

.mobile-nav-toggle {
  height: 50px;
  width: 35px;
  margin-right: 31px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.mobile-nav-toggle span,
.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after {
  border-radius: 2px;
  content: "";
  display: block;
  height: 6px;
  width: 100%;
  background: #fff;
  position: relative;
}
.mobile-nav-toggle span::before {
  top: 11px;
}
.mobile-nav-toggle span::after {
  bottom: 17px;
}

<html lang="en">

<head>

  <link rel="stylesheet" type="text/css" href="resources/css/style.css">
  <link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
  <script src="resources/js/functions.js"></script>

</head>

<body>
  <div class="main-container">
    <div class="mobile-nav is-open">
      <ul>
        <li><a href="#">Menu</a>
        </li>
        <li><a href="#">Services</a>
        </li>
        <li><a href="#">Gallery</a>
        </li>
        <li><a href="#">About Me</a>
        </li>
      </ul>
    </div>
    <header class="row-basic">
      <nav>
        <ul class="main-nav">
          <li><a href="#">Menu</a>
          </li>
          <li><a href="#">Services</a>
          </li>
          <li><a href="#">Gallery</a>
          </li>
          <li><a href="#">About Me</a>
          </li>
        </ul>
      </nav>
      <div class="user-tools">
        <div class="mobile-nav-toggle">
          <span></span>
        </div>
      </div>
    </header>
  </div>
</body>

</html>

Trike · Accepted Answer · 2015-09-28 06:20:53Z

1

You have to add link to jQuery script.

Delete declaration function mobileNav() { and it closing braket }.

$('.mobile-nav-toggle').on('click', function() {
   var status = $(this).hasClass('is-open');
   if (status) {
      $('.mobile-nav-toggle, .mobile-nav').removeClass('is-open');
   } else {
      $('.mobile-nav-toggle, .mobile-nav').addClass('is-open');
   }
});

Here is example of working code https://jsfiddle.net/efjz40ob/

answered Sep 28, 2015 at 6:20

Trike

5084 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

sparrow Over a year ago

wow thank you very much for taking time, but i can't seem to make it work on my PC, i did delete the "declaration function mobileNav() { and it closing braket }" just like you have suggested, NOT sure i'm adding the link to jQuery script, COULD you please wright me the link to jQuery? Please? name of that js file is "functions.js" and its in the same directory with index

sparrow Over a year ago

Sorry if I bother you, I'm new to javascript :-), PLEASE tell me again what I should change or add in details PS: that jQueary script don't know how to, I appreciate your answers :-)

sparrow Over a year ago

OK so I've solved it, it works now, the problem was i added js script before jQuery, it's supposed to be after. BUT now i have different problem, the code seems to work fine via brackets but if i open index.html outside brackets then the nav bar doesnt work again BUT its works fine inside brackets editor, ANY IDEAS WHAT IT CAN BE CAUSING it?

Trike Over a year ago

Can you paste somethere you code? I'm not shure what you mean in "open index.html outside brackets"? If you paste javascript code into index.html you have to wrap it inside <script type="text/javasript"> ///code here </script>

sparrow Over a year ago

OH the code is the same, what i meant by "open index.html outside brackets", when I load index.html + css + js file into Brackets Code Editor and open from there then the menu is working BUT IF I don't use Brackets Code Editor at all and instead go to the directory folder where the website is saved and double click index.html then the navigation menu is not working. ANY IDEAS WHY?

|

Collectives™ on Stack Overflow

Javascript dropdown menu not working

1 Answer 1

16 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related