基于jQuery带图标的多级下拉菜单
生活随笔
收集整理的這篇文章主要介紹了
基于jQuery带图标的多级下拉菜单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
之前為大家分享了很多導航菜單。今天我們要來分享一款很不錯的jQuery左側帶小圖標的多級下拉菜單,菜單是垂直的,每一個菜單項帶有一個小圖標,看起來非常專業。并且菜單支持無限極下拉,所以對各位Web開發者來說非常實用。菜單時基于jQuery的,所以基本可以支持所有的瀏覽器。
在線預覽???源碼下載
實現的代碼。
html代碼:
<div class="content"><ul class="vertical-nav dark red"><li class="active"><a href="http://***/"><i class="icon-home"></i>首頁</a></li><li><a href="http://***/"><i class="icon-cogs"></i>服務 <span class="submenu-icon"></span></a><ul><li><a href="http://***/">二級導航</a></li><li><a href="http://***/">二級導航</a></li><li><a href="http://***/">二級導航</a></li><li><a href="http://***/">二級導航</a></li><li><a href="http://***/">二級導航</a></li><li><a href="http://***/">二級導航</a></li></ul></li><li><a href="http://***/"><i class="icon-briefcase"></i>產品 <span class="submenu-icon"></span></a><ul><li><a href="http://***/">二級導航</a></li><li><a href="http://***/">二級導航</a></li><li><a href="http://***/">二級導航<span class="submenu-icon"></span></a><ul><li><a href="http://***/">三級導航</a></li><li><a href="http://***/">三級導航</a></li><li><a href="http://***/">三級導航 <span class="submenu-icon"></span></a><ul><li><a href="http://***/">四級導航</a></li><li><a href="http://***/">四級導航</a></li><li><a href="http://***/">四級導航</a></li><li><a href="http://***/">四級導航</a></li></ul></li><li><a href="http://***/">三級導航</a></li></ul></li><li><a href="http://***/">二級導航</a></li><li><a href="http://***/">二級導航</a></li></ul></li><li><a href="http://***/"><i class="icon-user"></i>關于我們</a></li><li><a href="http://***/"><i class="icon-comments-alt"></i>博客</a></li><li><a href="http://***/"><i class="icon-picture"></i>導航</a></li><li><a href="http://***/"><i class="icon-info"></i>信息</a></li><li><a href="http://***/"><i class="icon-group"></i>團隊</a></li><li><a href="http://***/"><i class="icon-question"></i>常見問題</a></li><li><a href="http://***/"><i class="icon-bar-chart"></i>案例</a></li><li><a href="http://***/"><i class="icon-envelope"></i>聯系我們</a></li></ul></div>via:http://***/Article/16719
轉載于:https://www.cnblogs.com/liaohuolin/p/4220549.html
總結
以上是生活随笔為你收集整理的基于jQuery带图标的多级下拉菜单的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Objective - C基础: 第一天
- 下一篇: WinRT知识积累1之读xml数据