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