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>

score 1 · Accepted Answer · answered Sep 28 '15 at 06:20

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 '15 at 06:20

Trike

498
4
9

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 Sep 28 '15 at 07:16
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 Sep 28 '15 at 07:48
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? – sparrow Sep 28 '15 at 08:29
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 – Trike Sep 28 '15 at 08:36
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? – sparrow Sep 28 '15 at 09:29
Have you added link to jquery library to index.html? Link like this – Trike Sep 28 '15 at 09:37
here are the files download it from my dropbox https://www.dropbox.com/sh/hx8jfquynv8ar07/AACXG4BMEMj1enjfoN3aZtsIa?dl=0 – sparrow Sep 28 '15 at 09:53
I've changed the link to jquery to and it works now - warning - parser its out HTTPS: at the beginning of the URL – Trike Sep 28 '15 at 10:18
IT WORKS WHEN ITS LIKE THIS: http://127.0.0.1:58200/index.html BUT IT DOESNT WORK WHEN ITS LIKE THIS: file:///C:/Users/miro/Desktop/test/index.html – sparrow Sep 28 '15 at 23:47
I have uploaded the website on my server and it works as well BUT why it doesnt work when i open from the folder directory...then it looks like this: file:///C:/Users/miro/Desktop/test/index.html – sparrow Sep 29 '15 at 00:12
ANY ideas why its doing?, why it needs http to work? – sparrow Sep 29 '15 at 02:23
If it working on your webserver bot not on pc then something wrong with you pc, may be firewoll or something – Trike Sep 29 '15 at 06:30
NO my pcs are fine, when i open the index.html from folder directory i get this address: file:///C:/Users/miro/Desktop/test/index.html ...AND when I get this address then it doesnt work...so I have to open it with a code editor and then it works OR upload it on a webhosting server – sparrow Sep 29 '15 at 08:02
ANYWAY thank you for your time, NOW I have another question regarding this website, do you want to help me with it? If yes should I create a new topic section? – sparrow Sep 29 '15 at 08:04
Of course you have to create a new topic. Post me the link to see if I can help – Trike Sep 30 '15 at 10:39
HEY Trike, can you look at my topic and give me vote up for my answer? http://stackoverflow.com/questions/32947655/change-hamburger-button-color – sparrow Oct 05 '15 at 14:16

Javascript dropdown menu not working

1 Answers1