Based on jQuery's multi-level drop-down menu with icons, jquery drop-down menu

Based on jQuery's multi-level drop-down menu with icons, jquery drop-down menu

I have shared a lot of navigation menus. Today we will share a very good multi-level drop-down menu with a small icon on the left of jQuery. The menu is vertical, and each menu item has a small icon, which looks very professional. In addition, the menu supports an infinitus drop-down, so it is very practical for Web developers. The menu is based on jQuery, so it basically supports all browsers.

Download Online Preview source code

Implementation code.

Html code:

<Div class = "content"> <ul class = "vertical-nav dark red"> <li class = "active"> <a href =" http://www.w2bc.com/ "> <I class =" icon-home "> </I> homepage </a> </li> <a href =" http://www.w2bc.com/ "> <I class =" icon-cogs "> </I> service <span class =" submenu-icon "> </span> </a> <ul> <li> <a href =" http://www.w2bc.com/ "> Secondary navigation </a> </li> <a href =" http://www.w2bc.com/ "> Secondary navigation </a> </li> <a href =" http://www.w2bc.com/ "> Secondary navigation </a> </li> <a href =" http://www.w2bc.com/ "> Secondary navigation </a> </li> <a href =" http://www.w2bc.com/ "> Secondary navigation </a> </li> <a href =" http://www.w2bc.com/ "> Secondary navigation </a> </li> </ul> </li> <a href =" http://www.w2bc.com/ "> <I class =" icon-briefcase "> </I> product <span class =" submenu-icon "> </span> </a> <ul> <li> <a href =" http://www.w2bc.com/ "> Secondary navigation </a> </li> <a href =" http://www.w2bc.com/ "> Secondary navigation </a> </li> <a href =" http://www.w2bc.com/ "> Secondary navigation <span class =" submenu-icon "> </span> </a> <ul> <li> <a href =" http://www.w2bc.com/ "> Third-level navigation </a> </li> <a href =" http://www.w2bc.com/ "> Third-level navigation </a> </li> <a href =" http://www.w2bc.com/ "> Third-level navigation <span class =" submenu-icon "> </span> </a> <ul> <li> <a href =" http://www.w2bc.com/ "> Level 4 navigation </a> </li> <a href =" http://www.w2bc.com/ "> Level 4 navigation </a> </li> <a href =" http://www.w2bc.com/ "> Level 4 navigation </a> </li> <a href =" http://www.w2bc.com/ "> Level 4 navigation </a> </li> </ul> </li> <a href =" http://www.w2bc.com/ "> Third-level navigation </a> </li> </ul> </li> <a href =" http://www.w2bc.com/ "> Secondary navigation </a> </li> <a href =" http://www.w2bc.com/ "> Secondary navigation </a> </li> </ul> </li> <a href =" http://www.w2bc.com/ "> <I class =" icon-user "> </I> about us </a> </li> <a href =" http://www.w2bc.com/ "> <I class =" icon-comments-alt "> </I> blog </a> </li> <a href =" http://www.w2bc.com/ "> <I class =" icon-picture "> </I> navigation </a> </li> <a href =" http://www.w2bc.com/ "> <I class =" icon-info "> </I> Information </a> </li> <a href =" http://www.w2bc.com/ "> <I class =" icon-group "> </I> Team </a> </li> <a href =" http://www.w2bc.com/ "> <I class =" icon-question "> </I> FAQ </a> </li> <a href =" http://www.w2bc.com/ "> <I class =" icon-bar-chart "> </I> case study </a> </li> <a href =" http://www.w2bc.com/ "> <I class =" icon-envelope "> </I> Contact Us </a> </li> </ul> </div>

Via: http://www.w2bc.com/Article/16719