jquery - Changing the menu character into a x -
i have created responsive menu following tutorial on internet
<a class="menu_button" href="#"><span class="icon">≡</span> </a> <div id='menu'> <nav> <ul> <li><a href="link">link1</a></li> <li><a href="link">link2</a></li> <li><a href="link">link3</a></li> <li><a href="link">link4</a></li> <li><a href="link">link5</a></li> <li><a id="selected" href="link">link6</a></li> </ul> </nav> </div> the menù it's shown when user press link , uses script
jquery(document).ready(function() { $('.menu_button').click(function(e) { // $("#menu").toggleclass("show"); $("#menu").slidetoggle(); }); }); i want when menù it's closed there ≡ symbol when open want turn x.
how can thing?
use this:
jquery(document).ready(function() { $('.menu_button').click(function(e) { $("#menu").slidetoggle(); if ($("#menu").is(":visible")) $(this).find(".icon").text("×"); else $(this).find(".icon").text("≡"); }); });
Comments
Post a Comment