javascript - Responsive Menu not working (Menu is closing) -
i have menu in html/css/javascript , when click on menu try go 1 of pages in menu, nothing redirects , menu closes. though in html added tags href 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">☰ 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 { 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: 0.3s ease-out; -moz-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 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 { display: block; padding: 0.8em; border-bottom: 1px solid #808080; } @media screen , (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 { 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; }); });
this do, here returning false click function, prevent it's default behavior of redircting link. don't return false , 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 }); });
Comments
Post a Comment