jquery+css實(shí)現(xiàn)絢麗的橫向二級(jí)下拉菜單-附源碼下載
首先給大家展示下效果圖:
html代碼部分:
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <link href="css/lanrenzhijia.css" rel="stylesheet" type="text/css" /> <script language="javascript" type="text/javascript" src="js/jquery-1.4.2.js"></script> <script language="javascript" type="text/javascript" src="js/lanrenzhijia.js"></script> <title>jquery+css實(shí)現(xiàn)橫向二級(jí)下拉菜單</title> </head> <body> <div id="menu"> <ul id="nav"> <li class="mainlevel"><span class="note">Chocolate Bar</span></li> <li class="mainlevel" id="mainlevel_01"><a href="#">browsers</a> <ul class="sub_nav_01"> <span class="Triangle_con"></span> <li><a href="#">firefox</a></li> <li><a href="#">chrome</a></li> <li><a href="#">opera</a></li> <li><a href="#">IE</a></li> <li><a href="#">Netscape</a></li> </ul> </li> <li class="mainlevel" id="mainlevel_02"><a href="#">html</a> <ul class="sub_nav_01"> <span class="Triangle_con"></span> <li><a href="#">html</a></li> <li><a href="#">xhtml</a></li> <li><a href="#">html5</a></li> <li><a href="#">css</a></li> <li><a href="#">TCP/IP</a></li> </ul> </li> <li class="mainlevel"><a href="#">xml</a> <ul class="sub_nav_01"> <span class="Triangle_con"></span> <li><a href="#">XSL</a></li> <li><a href="#">XSLT</a></li> <li><a href="#">XSL-FO</a></li> <li><a href="#">XPath</a></li> <li><a href="#">XQuery</a></li> <li><a href="#">XLink</a></li> <li><a href="#">XPointer</a></li> <li><a href="#">DTD</a></li> <li><a href="#">Schema</a></li> <li><a href="#">XForms</a></li> </ul> </li> <li class="mainlevel"><a href="#">browsers<em></em>scripting</a><!--input an em tag as a space,IE is gread need--> <ul class="sub_nav_01"> <span class="Triangle_con"></span> <li><a href="#">JavaScript</a></li> <li><a href="#">DHTML</a></li> <li><a href="#">VBScript</a></li> <li><a href="#">AJAX</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">E4X</a></li> <li><a href="#">WMLScript</a></li> </ul> </li> <li class="mainlevel"><a href="#">server<em></em>scripting</a> <ul class="sub_nav_01"> <span class="Triangle_con"></span> <li><a href="#">SQL</a></li> <li><a href="#">ASP</a></li> <li><a href="#">ADO</a></li> <li><a href="#">PHP</a></li> </ul> </li> <li class="mainlevel"><a href="#">dot<em></em>net</a></li> <li class="mainlevel"><a href="#">multimedia</a> <ul class="sub_nav_01"> <span class="Triangle_con"></span> <li><a href="#">Media</a></li> <li><a href="#">SMIL</a></li> <li><a href="#">SVG</a></li> </ul> </li> </ul> </div> </body> </html>
以上代碼很簡(jiǎn)單,jquery+css實(shí)現(xiàn)絢麗的橫向二級(jí)下拉菜單-附源碼下載就完成了,希望大家喜歡。
- 基于jQuery實(shí)現(xiàn)二級(jí)下拉菜單效果
- jQuery實(shí)現(xiàn)二級(jí)下拉菜單效果
- jQuery實(shí)現(xiàn)灰藍(lán)風(fēng)格標(biāo)準(zhǔn)二級(jí)下拉菜單效果代碼
- jquery實(shí)現(xiàn)平滑的二級(jí)下拉菜單效果
- jquery實(shí)現(xiàn)漂亮的二級(jí)下拉菜單代碼
- jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示二級(jí)下拉菜單效果
- jQuery實(shí)現(xiàn)簡(jiǎn)單二級(jí)下拉菜單
- jQuery實(shí)現(xiàn)的精美平滑二級(jí)下拉菜單效果代碼
相關(guān)文章
jQuery 實(shí)現(xiàn)批量提交表格多行數(shù)據(jù)的方法
今天小編就為大家分享一篇jQuery 實(shí)現(xiàn)批量提交表格多行數(shù)據(jù)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08jquery獲取html元素的絕對(duì)位置和相對(duì)位置的方法
這篇文章主要介紹了jquery獲取html元素的絕對(duì)位置和相對(duì)位置的方法,需要的朋友可以參考下2014-06-06用JQuery在網(wǎng)頁(yè)中實(shí)現(xiàn)分隔條功能的代碼
在C/S系統(tǒng)中有專門的分隔條控件,很方便實(shí)現(xiàn),但在Asp.net中卻沒(méi)有。本文介紹了一種使用JQuery技術(shù)實(shí)現(xiàn)分隔條的功能2012-08-08jQuery scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條分頁(yè)示例
這篇文章主要介紹了jQuery scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條分頁(yè)簡(jiǎn)單示例,使用ajax加載,同時(shí)介紹了(document).height()與$(window).height()的區(qū)別,需要的朋友可以參考下2014-04-04JQuery防止退格鍵網(wǎng)頁(yè)后退的實(shí)現(xiàn)代碼
有時(shí)我們需要防止退格鍵的網(wǎng)頁(yè)后退,一般情況下最好不要這么用,因?yàn)閷?duì)UX體驗(yàn)不好2012-03-03jquery實(shí)現(xiàn)marquee效果(文字或者圖片的水平垂直滾動(dòng))
原本在前端html代碼中,實(shí)現(xiàn)文字或者圖片的水平垂直滾動(dòng),都是使用的marquee,但隨著考慮瀏覽器的兼容性和符合為w3c的標(biāo)準(zhǔn),接下來(lái)介紹使用Jquery實(shí)現(xiàn)網(wǎng)頁(yè)marquee效果,感興趣的朋友可以了解下哦2013-01-01jQuery實(shí)現(xiàn)左右滑動(dòng)的toggle方法
下面小編就為大家分享一篇jQuery實(shí)現(xiàn)左右滑動(dòng)的toggle方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03jQuery實(shí)現(xiàn)鼠標(biāo)劃過(guò)修改樣式的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)劃過(guò)修改樣式的方法,涉及jQuery針對(duì)鼠標(biāo)事件及樣式操作的技巧,是jQuery鼠標(biāo)事件的典型應(yīng)用,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04