CODEWITHSUNDEEP
javascripthtmlcss
Jake A
Jake A

Reputation: 41

Responsive Menu not working (Menu is closing)

I have this menu in html/css/javascript and when you click on the menu then try to go to one of the pages in the menu, nothing redirects and the menu closes. Even though in html i added the tags with href to these pages

HTML:

<div id="pattern" class="pattern menu-link" style="max-width:574px;  min-width:300px;">
  <a href="#"><span style="font-size:27px; font-weight: bold; padding-top:    20px;" id="menustylish">&#9776; MENU</span></a>
  <nav id="menu" role="navigation">
    <ul>
      <li><a style="color:white;" href="index.html">Homepage</a></li>
      <li><a style="color:white;" href="login.html">Log in</a></li>
      <li><a style="color:white;" href="signup.html">Sign up</a></li>
    </ul>
  </nav>
</div>

CSS:

a {
  color: #DADDDE;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #DADDDE;
}
p {
  margin: 1em;
  text-align: center;
}
body p a {
  color: #DADDDE;
}
.pattern {
  background: #333;
  border-bottom: 1px solid #808080;
  margin-bottom: 1em;
  overflow: hidden;
}
a.menu-link {
  float: left;
  display: block;
  padding: 1em;
}
nav[role=navigation] {
  clear: both;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.js nav[role=navigation] {
  overflow: hidden;
  max-height: 0;
}
nav[role=navigation].active {
  max-height: 15em;
}
nav[role=navigation] ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid #808080;
}
nav[role=navigation] li a {
  display: block;
  padding: 0.8em;
  border-bottom: 1px solid #808080;
}
@media screen and (min-width: 48.25em) {
  a.menu-link {
    display: none;
  }
  .js nav[role=navigation] {
    max-height: none;
  }
  nav[role=navigation] ul {
    margin: 0 0 0 -0.25em;
    border: 0;
  }
  nav[role=navigation] li {
    display: inline-block;
    margin: 0 0.25em;
  }
  nav[role=navigation] li a {
    border: 0;
  }
}

JAVASCRIPT:

$(document).ready(function() {
  $('body').addClass('js');
  var $menu = $('#menu'),
    $menulink = $('.menu-link');

  $menulink.click(function() {
    $menulink.toggleClass('active');
    $menu.toggleClass('active');
    return false;
  });
});

Upvotes: 1

Views: 61

Answers (1)

Parag Bhayani
Parag Bhayani

Reputation: 3330

This will do, here you are returning false from click function, so it will prevent it's default behavior of redircting from the link. so don't return false and it will work

$(document).ready(function() {
  $('body').addClass('js');
  var $menu = $('#menu'),
    $menulink = $('.menu-link');

  $menulink.click(function() {
    $menulink.toggleClass('active');
    $menu.toggleClass('active');
    //return false; // Don't return anything
  });
});

Upvotes: 1

Related Questions