i trying customise this menu.
this html markup :
<ul class="topnav" id="mytopnav"> <li id="links"><a href="#home">home</a></li> <li id="links"><a href="#news">news</a></li> <li id="links"><a href="#contact">contact</a></li> <li id="links"><a href="#about">about</a></li> <li class="icon"> <a href="javascript:void(0);" onclick="myfunction()">☰</a> </li> </ul> css :
ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li {float: left;} ul.topnav li { display: inline-block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; } ul.topnav li a:hover {background-color: #555;} ul.topnav li.icon {display: none;} @media screen , (max-width:1180px) { ul.topnav li:not(:first-child) {display: none;} ul.topnav li.icon { float: right; display: inline-block; } } @media screen , (max-width:680px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li { display: block; text-align: left; } } and js :
function myfunction() { var x = document.getelementbyid("mytopnav"); if (x.classname === "topnav") { x.classname += " responsive"; } else { x.classname = "topnav"; } } i trying add make menu close after user clicks on of list items-
$(document).ready(function($) { $('#links').click(function() { $("#mytopnav").removeclass("topnav"); }); }); but not seem work.
any idea how fix this?
the id attribute should unique in same document replace duplicate ones class :
<ul class="topnav" id="mytopnav"> <li class="links"><a href="#home">home</a></li> <li class="links"><a href="#news">news</a></li> <li class="links"><a href="#contact">contact</a></li> <li class="links"><a href="#about">about</a></li> <li class="icon"> <a href="javascript:void(0);" onclick="myfunction()">☰</a> </li> </ul> use class selector . in js code :
$(document).ready(function($) { $('.links').click(function() { $("#mytopnav").removeclass("responsive"); }); }); note : have remove responsive class instead of topnav.
hope helps.
function myfunction() { var x = document.getelementbyid("mytopnav"); if (x.classname === "topnav") { x.classname += " responsive"; } else { x.classname = "topnav"; } } $(document).ready(function($) { $('.links').click(function() { $("#mytopnav").removeclass("responsive"); }); });ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li {float: left;} ul.topnav li { display: inline-block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; } ul.topnav li a:hover {background-color: #555;} ul.topnav li.icon {display: none;} @media screen , (max-width:1180px) { ul.topnav li:not(:first-child) {display: none;} ul.topnav li.icon { float: right; display: inline-block; } } @media screen , (max-width:680px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li { display: block; text-align: left; } }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="topnav" id="mytopnav"> <li class="links"><a href="#home">home</a></li> <li class="links"><a href="#news">news</a></li> <li class="links"><a href="#contact">contact</a></li> <li class="links"><a href="#about">about</a></li> <li class="icon"> <a href="javascript:void(0);" onclick="myfunction()">☰</a> </li> </ul>
Comments
Post a Comment