javascript - Making drop down menu by click using css -
this question has answer here:
- creating drop down menu on click css 8 answers
i have simple example of drop down menu click using ajax:
http://jsfiddle.net/dmitry313/1s62x8hc/2/
html:
<a href="javascript:void(0);" class="dropmenu">dropdown menu</a> <ul style="display:none"> <li><a href="#">dropdown link 1</a></li> <li><a href="#">dropdown link 2</a></li> </ul>
script:
$(document).ready(function () { var click = function () { var divobj = $(this).next(); var nstyle = divobj.css("display"); if (nstyle == "none") { divobj.slidedown(false, function () { $("html").bind("click", function () { divobj.slideup(); }); }); } }; $(".dropmenu").click(click); });
is possible make same without script, using css?
edit: updated link
you can trigger css click using hack!!
work checkbox!!
sample:
ul{ display: none; } #checkbox{ opacity: 0; } #checkbox:checked + ul { display: block; }
<div class="container"> <label for="checkbox">dropdown menu</label> <input id="checkbox" type="checkbox" /> <ul> <li><a href="#">dropdown link 1</a></li> <li><a href="#">dropdown link 2</a></li> </ul> </div>
you can use transitions animate show hide effect :) simple example!!
mention: css3 hack if need borwser support old browsers not working.
Comments
Post a Comment