javascript - How to turn this menu into a MultiLevel one? -
i found cool horizontal drop down menu:
http://css-tricks.com/examples/diggheader/#
and love use it, require multilevel. not clue how it. have searched tutorials on how create multilevel menu, can find downloads , demo previews. :-s
can offer suggestions on how go making menu above multilevel?
thank you
i love css-tricks, can done in few ways. here quick example how suggest go this.
html markup;
<div id="nav"> <ul> <li> <a href="...">technology</a> <ul> <li><a href="...">apple</a> <ul> <li><a href="...">iphone</a></li> </ul> </li> <li><a href="...">design</a></li> </ul> </li> </ul> </div>
notice <ul>
within next <a href="...">apple</a>
.
css method;
<style> #nav ul li ul{ display:none; } #nav ul li:hover>ul{ display:block; } </style>
this css hide elements not needed shown until user hover's on element. show on hover.
this element hover can done in javascript, if wish change effect.
jquery method;
<style> #nav ul li ul{ display:none; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script> $("#nav ul li").each(function(){ $(this).mouseenter(function(){ $(this).find("ul:first").show(); }).mouseleave(function(){ $(this).find("ul:first").hide(); }); }) </script>
Comments
Post a Comment