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

Popular posts from this blog

java - SNMP4J General Variable Binding Error -

sql server - python to mssql encoding problem -

windows - Python Service Installation - "Could not find PythonClass entry" -