使用jquery菜單插件HoverTree仿京東無限級菜單
效果圖:
看了上面效果圖,你或許已經(jīng)明白為什么是仿京東菜單。如果還不明白,請訪問http://list.jd.com/list.html?cat=9987,653,655 看看左上的菜單。當(dāng)然這個HoverTree菜單的功能更加強大,可以實現(xiàn)無限級菜單。
HTML代碼:
<!DOCTYPE html>
<html>
<head>
<title>HoverTree - jquery菜單插件</title>
<base target="_blank" />
<link href=" <script type="text/javascript" src=">
<script type="text/javascript" src=">
</head>
<body>
<div style="width: 234px; margin-left:30px;">
<div>
<h3>
HoverTree菜單 0.1.2</h3>
</div>
<div style="width: 200px;">
<div id="keleyihovertree" class="hovertree">
<div class="hovertreeitem hvtcurrent">
<h3>
<b></b><a href=" <ul>
<li><a href=">
<li><a href=" 2</a>
<ul>
<li><a href=" Item 2.1</a></li>
<li><a href=" 2.2</a>
<ul>
<li><a href=" Item 2.2.1</a></li>
<li><a href=" Item 2.2.2</a></li>
<li><a href=" 2.2.3</a>
<ul>
<li><a href=" Item 2.2.3.1</a></li>
<li><a href=" Item 2.2.3.2</a></li>
<li><a href=" Item 2.2.3.3</a></li>
<li><a href=" Item 2.2.3.4</a></li>
<li><a href=" Item 2.2.3.5</a></li>
</ul>
</li>
<li><a href=" Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=">
<li><a href=">
<li><a href="前端</a></li>
<li><a href="插件</a></li>
</ul>
</div>
<div>
<h3>
<b></b><a href=" Plugins</a></h3>
<ul>
<li><a href="菜單</a></li>
<li><a href=">
<li><a href="菜單</a></li>
<li><a href=">
<li><a href=">
</ul>
</div>
<div class="hovertreeitem">
<h3>
<b></b><a href=" <ul>
<li><a href="加密</a></li>
<li><a href="加密(Silverlight)</a></li>
<li><a href="編碼與解碼</a></li>
<li><a href="編碼與解碼</a></li>
<li><a href="正則表達式匹配工具</a></li>
<li><a href=" </ul>
</div>
<div>
<h3>
<b></b><a href=">
</div>
</div>
</div>
<a href=" $("#keleyihovertree").hovertree({ "width": "keleyi", "initStatus": 'keleyi' });
</script>
</body>
</html>
是不是非常棒的效果呢,小伙伴們自己拿走使用吧
- jquery仿京東導(dǎo)航/仿淘寶商城左側(cè)分類導(dǎo)航下拉菜單效果
- jQuery仿京東商城樓梯式導(dǎo)航定位菜單
- jQuery模仿京東/天貓商品左側(cè)分類導(dǎo)航菜單效果
- jQuery簡單實現(xiàn)仿京東商城的左側(cè)菜單效果代碼
- Jquery實現(xiàn)仿京東商城省市聯(lián)動菜單
- jQuery簡單實現(xiàn)仿京東分類導(dǎo)航層效果
- jquery仿京東側(cè)邊欄導(dǎo)航效果
- jQuery和CSS仿京東仿淘寶列表導(dǎo)航菜單
- jQuery實現(xiàn)網(wǎng)頁抖動的菜單抖動效果
- jQuery實現(xiàn)仿京東防抖動菜單效果示例
相關(guān)文章
jquery仿京東導(dǎo)航/仿淘寶商城左側(cè)分類導(dǎo)航下拉菜單效果
jquery實現(xiàn)下拉菜單效果,jquery寫的仿京東導(dǎo)航菜單,一個經(jīng)典的左側(cè)多級導(dǎo)航菜單,學(xué)會了可以任意改變布局,感興趣的朋友可以參考下哈,希望對你有所幫助2013-04-04使用jQuery調(diào)用XML實現(xiàn)無刷新即時聊天
這篇文章主要介紹了使用jQuery調(diào)用XML實現(xiàn)無刷新即時聊天的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-08-08jQuery-ui插件sortable實現(xiàn)自由拖動排序
這篇文章主要為大家詳細介紹了jQuery-ui插件sortable實現(xiàn)自由拖動排序,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-12-12jquery.cvtooltip.js 基于jquery的氣泡提示插件
顯示氣泡提示的前提是,一定會有一個被提示的對象,默認(rèn)的位置是根據(jù)body來計算的,這樣的壞處就是如果頁面內(nèi)容發(fā)生了變化,而氣泡的位置沒有改變,導(dǎo)致提示目的失敗。2010-11-11