javascript - Nav menu won't open or close on click -
i've been trying make hamburger menu work longest time , i've tried lot, keep going in circles reason menu won't open( menu not opening problem :( ),
i got menu learning how create tutorial -> youtube link
please let me know how fix or refer me similar post, thanks!
$(document).ready(function() { $(".burger-nav").on("click", function() { $("header nav ul").toggleclass("open"); }); });
header nav ul { height: 0; overflow: hidden; background: #6134a3; } header nav ul.open { height: auto; } .burger-nav { padding: 0px; margin: 0px; display: block; height: 40px; width: 100%; cursor: pointer; background-image: url(images/nav.png); background-repeat: no-repeat; background-size: 10%; background-position: 97%; background-color: #502196; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head> <title>menu</title> <link rel="stylesheet" href="slicknav.css" /> <script language="javascript" type="text/javascript" scr="http://code.jquery.com/jquery-1.11.3.min.js"></script> </head> <style> </style> <body> <header> <div class="wrapper"> <nav> <a class="burger-nav"></a> <ul> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> </ul> </nav> </div> </header> <!--watch video finish drop down https://www.youtube.com/watch?v=fdh7mdl2oww --> <script language="javascript" type="text/javascript" scr="menu.js"></script> </body>
use latest version of jquery....
<head> <title>menu</title> <link rel="stylesheet" href="slicknav.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head>
Comments
Post a Comment