使用jquery菜單插件HoverTree仿京東無限級菜單
更新時間：2014年12月18日 14:43:14 投稿：hebedich
這篇文章主要介紹了使用jquery菜單插件HoverTree仿京東無限級菜單,需要的朋友可以參考下
效果圖：
看了上面效果圖，你或許已經(jīng)明白為什么是仿京東菜單。如果還不明白，請訪問http://list.jd.com/list.html?cat=9987,653,655 看看左上的菜單。當(dāng)然這個HoverTree菜單的功能更加強(qiáng)大，可以實(shí)現(xiàn)無限級菜單。
HTML代碼：
復(fù)制代碼 代碼如下:
<!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="正則表達(dá)式匹配工具</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簡單實(shí)現(xiàn)仿京東商城的左側(cè)菜單效果代碼
- Jquery實(shí)現(xiàn)仿京東商城省市聯(lián)動菜單
- jQuery簡單實(shí)現(xiàn)仿京東分類導(dǎo)航層效果
- jquery仿京東側(cè)邊欄導(dǎo)航效果
- jQuery和CSS仿京東仿淘寶列表導(dǎo)航菜單
- jQuery實(shí)現(xiàn)網(wǎng)頁抖動的菜單抖動效果
- jQuery實(shí)現(xiàn)仿京東防抖動菜單效果示例
相關(guān)文章
這篇文章向大家推薦20款效果非常棒的 jQuery 插件。jQuery 是一個非常優(yōu)秀的JavaScript庫，它簡化了 HTML 文檔遍歷，事件處理，動畫以及 Ajax 交互，同時也改變了很多人編寫 JavaScript 代碼的方式2011-11-11
純jquery實(shí)現(xiàn)模仿淘寶購物車結(jié)算
在淘寶購物，需要把商品加入購車，其中包含全選、單選金額改變，當(dāng)增加商品時金額也會相應(yīng)的發(fā)生變化，下面通過本文給大家分享純jquery實(shí)現(xiàn)模仿淘寶購物車結(jié)算，需要的朋友可以參考下2015-08-08
在進(jìn)行Web開發(fā)時，并非所有的庫都適合你的項目，但你仍需要收藏一些Web UI設(shè)計相關(guān)的庫或框架，以在你需要的時候，加快你的開發(fā)效率。本文為你推薦10款非常優(yōu)秀的基于JQuery的Web UI設(shè)計框架2014-08-08
jQuery實(shí)現(xiàn)dialog設(shè)置focus焦點(diǎn)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)dialog設(shè)置focus焦點(diǎn)的方法,涉及jQuery針對dialog的操作技巧,需要的朋友可以參考下2015-06-06
Jquery中offset()和position()的區(qū)別分析
這篇文章主要介紹了Jquery中offset()和position()的區(qū)別,實(shí)例分析了offset()與position()的使用的技巧與區(qū)別,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
jquery刪除指定的html標(biāo)簽并保留標(biāo)簽內(nèi)文本內(nèi)容的方法
有時我們希望刪除這段html代碼里面的一對<p>標(biāo)簽，但是要保持里面的內(nèi)容不被刪除，本文提供的這個jquery方法就可以簡單實(shí)現(xiàn)。2014-04-04
jquery 提示信息顯示后自動消失的具體實(shí)現(xiàn)
讓提示信息顯示后自動消失的方法有很多，在本文為大家介紹下使用jquery是如何做到的，感興趣朋友可以參考下2013-12-12
jquery實(shí)現(xiàn)圖片上傳前本地預(yù)覽
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)圖片上傳前本地預(yù)覽功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
jQuery選擇器源碼解讀（六）：Sizzle選擇器匹配邏輯分析
這篇文章主要介紹了jQuery選擇器源碼解讀（六）：Sizzle選擇器匹配邏輯分析,,需要的朋友可以參考下2015-03-03
jQuery實(shí)現(xiàn)6位數(shù)字密碼輸入框
本文主要對jQuery實(shí)現(xiàn)6位數(shù)字密碼輸入框的大概思路、實(shí)現(xiàn)代碼進(jìn)行詳細(xì)介紹，具有一定的參考價值，需要的朋友一起來看下吧2016-12-12