使用jquery菜單插件HoverTree仿京東無(wú)限級(jí)菜單
效果圖:
看了上面效果圖,你或許已經(jīng)明白為什么是仿京東菜單。如果還不明白,請(qǐng)?jiān)L問(wèn)http://list.jd.com/list.html?cat=9987,653,655 看看左上的菜單。當(dāng)然這個(gè)HoverTree菜單的功能更加強(qiáng)大,可以實(shí)現(xiàn)無(wú)限級(jí)菜單。
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="正則表達(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簡(jiǎn)單實(shí)現(xiàn)仿京東商城的左側(cè)菜單效果代碼
- Jquery實(shí)現(xiàn)仿京東商城省市聯(lián)動(dòng)菜單
- jQuery簡(jiǎn)單實(shí)現(xiàn)仿京東分類導(dǎo)航層效果
- jquery仿京東側(cè)邊欄導(dǎo)航效果
- jQuery和CSS仿京東仿淘寶列表導(dǎo)航菜單
- jQuery實(shí)現(xiàn)網(wǎng)頁(yè)抖動(dòng)的菜單抖動(dòng)效果
- jQuery實(shí)現(xiàn)仿京東防抖動(dòng)菜單效果示例
相關(guān)文章
jquery仿京東導(dǎo)航/仿淘寶商城左側(cè)分類導(dǎo)航下拉菜單效果
jquery實(shí)現(xiàn)下拉菜單效果,jquery寫的仿京東導(dǎo)航菜單,一個(gè)經(jīng)典的左側(cè)多級(jí)導(dǎo)航菜單,學(xué)會(huì)了可以任意改變布局,感興趣的朋友可以參考下哈,希望對(duì)你有所幫助2013-04-04jQuery實(shí)現(xiàn)的導(dǎo)航下拉菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的導(dǎo)航下拉菜單效果,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07使用jQuery調(diào)用XML實(shí)現(xiàn)無(wú)刷新即時(shí)聊天
這篇文章主要介紹了使用jQuery調(diào)用XML實(shí)現(xiàn)無(wú)刷新即時(shí)聊天的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08jQuery-ui插件sortable實(shí)現(xiàn)自由拖動(dòng)排序
這篇文章主要為大家詳細(xì)介紹了jQuery-ui插件sortable實(shí)現(xiàn)自由拖動(dòng)排序,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12jQuery實(shí)現(xiàn)的模仿雨滴下落動(dòng)畫效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的模仿雨滴下落動(dòng)畫效果,涉及jQuery結(jié)合時(shí)間函數(shù)動(dòng)態(tài)修改頁(yè)面元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-12-12jquery.cvtooltip.js 基于jquery的氣泡提示插件
顯示氣泡提示的前提是,一定會(huì)有一個(gè)被提示的對(duì)象,默認(rèn)的位置是根據(jù)body來(lái)計(jì)算的,這樣的壞處就是如果頁(yè)面內(nèi)容發(fā)生了變化,而氣泡的位置沒(méi)有改變,導(dǎo)致提示目的失敗。2010-11-11jQuery頁(yè)面彈出框?qū)崿F(xiàn)文件上傳
這篇文章主要為大家詳細(xì)介紹了jQuery頁(yè)面彈出框?qū)崿F(xiàn)文件上傳,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02