javascript - Dropdown onclick without js, php or target -
i want make onclick dropdown menu without javascript, php can't used. using targets, page jumps every time click on it, because not on top of page. possible make dropdown menu without js , php, onclick?
what after possible, though i not advise use technique. nothing less hack, semanticly incorrect, , nightmare seo.
this taken account, explain technique proof of concept:
first make sure organise html this:
<nav> <ul> <li> <label for='item-1'>main item 1</label> <input type="checkbox" id="item-1"/> <ul> <li><a href="#">sub 1</a></li> ... </ul> </li> ... </ul> </nav>
some smart use of :checked
selector , sibling +
selector allows simulate dropdown on click. relevant css this:
/* hide checkboxes, there store 'state' in background */ /* state triggered clicking corresponding label */ nav input[type="checkbox"] { display: none; } /* hide sub menu's default */ nav > ul > li > ul { display: none; } /* show sub menu, if follows checked checkbox */ nav input[type="checkbox"]:checked + ul { display: block; }
for working example, check fiddle set up: http://jsfiddle.net/xj8ce/
Comments
Post a Comment