jQuery垂直多級導(dǎo)航菜單代碼分享
這是一款基于jquery實(shí)現(xiàn)的垂直導(dǎo)航菜單特效代碼,總共有三級,實(shí)現(xiàn)效果簡單大方,最后一級還可以進(jìn)行圖片展示說明,是一款非常實(shí)用的導(dǎo)航菜單特效源碼。
為大家分享的jQuery垂直多級導(dǎo)航菜單代碼如下
<head> <title>jQuery垂直多級導(dǎo)航菜單代碼</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <ul class="ce"> <li> <a class="xz" href="#">腳本之家</a> </li> <li> <a href="#">目錄B<img class="more" src="images/more.png"/></a> <ul class="er"> <li> <a href="##">二級目錄A</a> </li> <li class="e_li"> <a href="##">二級目錄B</a> <ul class="thr"> <li> <a href="##">三級目錄A</a> </li> <li> <a href="##">三級目錄B <img class="more1" src="images/more1.png"/></a> <div class="thr_nr"> <h3> 三級目錄B主要內(nèi)容 </h3> <img src="images/aa.png"/> </div> </li> <li> <a href="##">三級目錄C</a> </li> <li> <a href="##">三級目錄D <img class="more1" src="images/more1.png"/></a> <div class="thr_nr"> <h3> 三級目錄D主要內(nèi)容 </h3> <img src="images/bb.png"/> </div> </li> <div class="clear"></div> </ul> </li> <li> <a href="##">二級目錄C</a> </li> <li class="e_li"> <a href="##">二級目錄D</a> <ul class="thr"> <li> <a href="##">三級目錄A</a> </li> <li> <a href="##">三級目錄B</a> </li> <li> <a href="##">三級目錄C</a> </li> <li> <a href="##">三級目錄D</a> </li> <div class="clear"></div> </ul> </li> </ul> </li> <li> <a href="http://www.dbjr.com.cn/jiaoben/369410.html">源碼下載</a> </li> <li> <a >演示地址</a> </li> <li> <a href="#">目錄E</a> </li> <li> <a href="#">目錄F <img class="more" src="images/more.png"/></a> <ul class="er"> <li> <a href="##">二級目錄A</a> </li> <li> <a href="##">二級目錄B</a> </li> <li> <a href="##">二級目錄C</a> </li> <li> <a href="##">二級目錄D</a> </li> </ul> </li> <div class="clear"></div> </ul> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/main.js"></script> < </body> </html>
運(yùn)行效果圖:
以上就是為大家分享的jQuery垂直多級導(dǎo)航菜單代碼,希望大家可以喜歡。
- jquery 實(shí)現(xiàn)二級/三級/多級聯(lián)動菜單的思路及代碼
- jquery 多級下拉菜單核心代碼
- jquery實(shí)現(xiàn)多級下拉菜單的實(shí)例代碼
- jquery+CSS實(shí)現(xiàn)的多級豎向展開樹形TRee菜單效果
- jQuery實(shí)現(xiàn)精美的多級下拉菜單特效
- jQuery插件實(shí)現(xiàn)多級聯(lián)動菜單效果
- jQuery實(shí)現(xiàn)多級下拉菜單jDropMenu的方法
- jQuery多級手風(fēng)琴菜單實(shí)例講解
- jquery實(shí)現(xiàn)帶漸變淡入淡出并向右依次展開的多級菜單效果實(shí)例
- 快速實(shí)現(xiàn)jQuery多級菜單效果
相關(guān)文章
jQuery選擇器中含有空格的使用示例及注意事項(xiàng)
選擇器中的空格是不容忽視的,多一個空格或少一個空格也許得到的結(jié)果會截然不同的,下面以一個示例為大家詳細(xì)介紹下到底有什么不同,感興趣的朋友額可以參考下2013-08-08jQuery EasyUI API 中文文檔 - PropertyGrid屬性表格
jQuery EasyUI API 中文文檔 - PropertyGrid屬性表格使用介紹,需要的朋友可以參考下。2011-11-11騰訊與新浪的通過IP地址獲取當(dāng)前地理位置(省份)的接口
通過IP地址獲取當(dāng)前地理位置(省份)的接口,方便大家可以直接使用結(jié)合自己的系統(tǒng)。2010-07-07jquery.pagination.js 無刷新分頁實(shí)現(xiàn)步驟分享
jquery.pagination.js 無刷新分頁實(shí)現(xiàn)步驟分享,需要的朋友可以參考下2012-05-05jquery動畫2.元素坐標(biāo)動畫效果(創(chuàng)建一個圖片走廊)
今天文章的內(nèi)容是關(guān)于使用jquery的animate方法,修改html元素的position屬性,創(chuàng)建一個圖片走廊2012-08-08jQuery數(shù)據(jù)緩存功能的實(shí)現(xiàn)思路及簡單模擬
jQuery緩存系統(tǒng)不僅運(yùn)用于DOM元素,動畫、事件等都有用到這個緩存系統(tǒng)2013-05-05jQuery EasyUI 獲取tabs的實(shí)例解析
左邊tree,右邊tabs。點(diǎn)擊tree增加相應(yīng)的tabs。下面通過一段代碼給大家解析,需要的朋友參考下吧2016-12-12