jquery下拉/橫拉導航欄
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> *{padding: 0; margin: 0 } .nav { width: 990px; height: 40px; margin: 30px auto; border: 2px solid navy; border-radius: 4px; } .nav li { width: 110px; height: 40px; float: left; list-style: none; text-align: center; } .nav li a { width: 110px; background-color: steelblue; font-family: "Microsoft Yahei"; color: white; font-size: large; line-height: 40px; text-decoration: none; display: inline-block; } .nav div{ width: 110px; height:250px; border: 2px solid navy; position: relative; right:2px; } .nav ul li li { border-bottom: 2px solid navy; } .nav ul li a.hoverstyle { color: black; background-color: white; font-weight: bolder; } </style> <script type="text/javascript" src="jquery-2.1.4.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".nav ul li").children("div").hide(); $(".nav ul li").hover(function() { $(this).children("a").addClass("hoverstyle"); $(this).children("div").slideDown(50); }, function() { $(this).children("a").removeClass("hoverstyle"); $(this).children("div").slideUp(150); }); }); </script> </head> <body> <div class="nav"> <ul> <li><a href="">一</a> <div> <ul> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">6</a></li> </ul> </div></li> <li><a href="">二</a> <div> <ul> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">6</a></li> </ul> </div></li> <li><a href="">三</a> <div> <ul> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">6</a></li> </ul> </div></li> <li><a href="">四</a> <div> <ul> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">6</a></li> </ul> </div></li> <li><a href="">五</a> <div> <ul> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">6</a></li> </ul> </div></li> <li><a href="">六</a> <div> <ul> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">6</a></li> </ul> </div></li> <li><a href="">七</a> <div> <ul> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">6</a></li> </ul> </div></li> <li><a href="">八</a> <div> <ul> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">6</a></li> </ul> </div></li> <li><a href="">九</a> <div> <ul> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">6</a></li> </ul> </div></li> </ul> </div> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>橫拉菜單導航.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> .nav { font-family:"Microsoft Yahei"; float: left; position: relative; width: 250px; } ul li { border: 1px solid gray; background-color:GhostWhite; list-style-type: none; font-size: 15px; height: 35px; line-height: 35px; position: relative; padding: 0 20px; } ul li a { width: 148px; margin: 0 auto; } ul li.hover_bg { background: yellow; } .secon { width: 250px;; position: absolute; right: -210px; top: 0; padding-bottom: 30px; display: none; } .secon a { display: block; height: 35px; line-height: 35px; padding: 0 20px } </style> <script type="text/javascript" src="jquery-2.1.4.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".nav ul li").hover(function() { $(this).addClass("hover_bg"); $(this).children("div").show(); }, function() { $(this).removeClass("hover_bg"); $(this).children("div").hide(); }); }); </script> </head> <body> <div class="nav"> <ul> <li><strong>Menu1</strong> <div class="secon"> <ul> <li><a>Sub Menu11</a> <div class="secon"> <ul> <li><a>Sub Menu111</a> <div class="secon"> <ul> <li><a>Sub Menu1111</a></li> </ul> </div></li> <li><a>Sub Menu112</a> <div class="secon"> <ul> <li><a>Sub Menu1121</a></li> </ul> </div></li> <li><a>Sub Menu113</a> <div class="secon"> <ul> <li><a>Sub Menu1131</a></li> </ul> </div></li> <li><a>Sub Menu114</a> <div class="secon"> <ul> <li><a>Sub Menu1141</a></li> </ul> </div></li> </ul> </div></li> <li><a>Sub Menu12</a> <div class="secon"> <ul> <li><a>Sub Menu121</a> <div class="secon"> <ul> <li><a>Sub Menu1211</a></li> </ul> </div></li> <li><a>Sub Menu122</a><div class="secon"> <ul> <li><a>Sub Menu1221</a></li> </ul> </div></li> <li><a>Sub Menu123</a><div class="secon"> <ul> <li><a>Sub Menu1231</a></li> </ul> </div></li> <li><a>Sub Menu124</a><div class="secon"> <ul> <li><a>Sub Menu1241</a></li> </ul> </div></li> </ul> </div></li> <li><a>Sub Menu13</a> <div class="secon"> <ul> <li><a>Sub Menu131</a> <div class="secon"> <ul> <li><a>Sub Menu1311</a></li> </ul> </div></li> <li><a>Sub Menu132</a><div class="secon"> <ul> <li><a>Sub Menu1321</a></li> </ul> </div></li> <li><a>Sub Menu133</a><div class="secon"> <ul> <li><a>Sub Menu1331</a></li> </ul> </div></li> <li><a>Sub Menu134</a><div class="secon"> <ul> <li><a>Sub Menu1341</a></li> </ul> </div></li> </ul> </div></li> <li><a>Sub Menu14</a> <div class="secon"> <ul> <li><a>Sub Menu141</a> <div class="secon"> <ul> <li><a>Sub Menu1411</a></li> </ul> </div></li> <li><a>Sub Menu142</a><div class="secon"> <ul> <li><a>Sub Menu1421</a></li> </ul> </div></li> <li><a>Sub Menu143</a><div class="secon"> <ul> <li><a>Sub Menu1431</a></li> </ul> </div></li> <li><a>Sub Menu144</a><div class="secon"> <ul> <li><a>Sub Menu1441</a></li> </ul> </div></li> </ul> </div></li> </ul> </div></li> <li><strong>Menu2</strong> <div class="secon"> <ul> <li><a>Sub Menu21</a> <div class="secon"> <ul> <li><a>Sub Menu211</a> <div class="secon"> <ul> <li><a>Sub Menu2111</a></li> </ul> </div></li> <li><a>Sub Menu212</a> <div class="secon"> <ul> <li><a>Sub Menu2121</a></li> </ul> </div></li> <li><a>Sub Menu213</a> <div class="secon"> <ul> <li><a>Sub Menu2131</a></li> </ul> </div></li> <li><a>Sub Menu214</a> <div class="secon"> <ul> <li><a>Sub Menu2141</a></li> </ul> </div></li> </ul> </div></li> <li><a>Sub Menu22</a> <div class="secon"> <ul> <li><a>Sub Menu221</a> <div class="secon"> <ul> <li><a>Sub Menu2211</a></li> </ul> </div></li> <li><a>Sub Menu222</a><div class="secon"> <ul> <li><a>Sub Menu2221</a></li> </ul> </div></li> <li><a>Sub Menu223</a><div class="secon"> <ul> <li><a>Sub Menu2231</a></li> </ul> </div></li> <li><a>Sub Menu224</a><div class="secon"> <ul> <li><a>Sub Menu2241</a></li> </ul> </div></li> </ul> </div></li> <li><a>Sub Menu23</a> <div class="secon"> <ul> <li><a>Sub Menu231</a> <div class="secon"> <ul> <li><a>Sub Menu2311</a></li> </ul> </div></li> <li><a>Sub Menu232</a><div class="secon"> <ul> <li><a>Sub Menu2321</a></li> </ul> </div></li> <li><a>Sub Menu233</a><div class="secon"> <ul> <li><a>Sub Menu2331</a></li> </ul> </div></li> <li><a>Sub Menu234</a><div class="secon"> <ul> <li><a>Sub Menu2341</a></li> </ul> </div></li> </ul> </div></li> <li><a>Sub Menu24</a> <div class="secon"> <ul> <li><a>Sub Menu241</a> <div class="secon"> <ul> <li><a>Sub Menu2411</a></li> </ul> </div></li> <li><a>Sub Menu242</a><div class="secon"> <ul> <li><a>Sub Menu2421</a></li> </ul> </div></li> <li><a>Sub Menu243</a><div class="secon"> <ul> <li><a>Sub Menu2431</a></li> </ul> </div></li> <li><a>Sub Menu244</a><div class="secon"> <ul> <li><a>Sub Menu2441</a></li> </ul> </div></li> </ul> </div></li> </ul> </div></li> <li><strong>Menu3</strong> <div class="secon"> <ul> <li><a>Sub Menu31</a> <div class="secon"> <ul> <li><a>Sub Menu311</a> <div class="secon"> <ul> <li><a>Sub Menu3111</a></li> </ul> </div></li> <li><a>Sub Menu312</a> <div class="secon"> <ul> <li><a>Sub Menu3121</a></li> </ul> </div></li> <li><a>Sub Menu313</a> <div class="secon"> <ul> <li><a>Sub Menu3131</a></li> </ul> </div></li> <li><a>Sub Menu314</a> <div class="secon"> <ul> <li><a>Sub Menu3141</a></li> </ul> </div></li> </ul> </div></li> <li><a>Sub Menu32</a> <div class="secon"> <ul> <li><a>Sub Menu321</a> <div class="secon"> <ul> <li><a>Sub Menu3211</a></li> </ul> </div></li> <li><a>Sub Menu322</a><div class="secon"> <ul> <li><a>Sub Menu3221</a></li> </ul> </div></li> <li><a>Sub Menu323</a><div class="secon"> <ul> <li><a>Sub Menu3331</a></li> </ul> </div></li> <li><a>Sub Menu324</a><div class="secon"> <ul> <li><a>Sub Menu3241</a></li> </ul> </div></li> </ul> </div></li> <li><a>Sub Menu33</a> <div class="secon"> <ul> <li><a>Sub Menu331</a> <div class="secon"> <ul> <li><a>Sub Menu3311</a></li> </ul> </div></li> <li><a>Sub Menu332</a><div class="secon"> <ul> <li><a>Sub Menu3321</a></li> </ul> </div></li> <li><a>Sub Menu333</a><div class="secon"> <ul> <li><a>Sub Menu3331</a></li> </ul> </div></li> <li><a>Sub Menu334</a><div class="secon"> <ul> <li><a>Sub Menu3341</a></li> </ul> </div></li> </ul> </div></li> <li><a>Sub Menu34</a> <div class="secon"> <ul> <li><a>Sub Menu341</a> <div class="secon"> <ul> <li><a>Sub Menu3411</a></li> </ul> </div></li> <li><a>Sub Menu342</a><div class="secon"> <ul> <li><a>Sub Menu3421</a></li> </ul> </div></li> <li><a>Sub Menu343</a><div class="secon"> <ul> <li><a>Sub Menu3431</a></li> </ul> </div></li> <li><a>Sub Menu344</a><div class="secon"> <ul> <li><a>Sub Menu3441</a></li> </ul> </div></li> </ul> </div></li> </ul> </div></li> <li><strong>Menu4</strong> <div class="secon"> <ul> <li><a>Sub Menu41</a> <div class="secon"> <ul> <li><a>Sub Menu411</a> <div class="secon"> <ul> <li><a>Sub Menu4111</a></li> </ul> </div></li> <li><a>Sub Menu412</a> <div class="secon"> <ul> <li><a>Sub Menu4121</a></li> </ul> </div></li> <li><a>Sub Menu413</a> <div class="secon"> <ul> <li><a>Sub Menu4231</a></li> </ul> </div></li> <li><a>Sub Menu414</a> <div class="secon"> <ul> <li><a>Sub Menu4141</a></li> </ul> </div></li> </ul> </div></li> <li><a>Sub Menu42</a> <div class="secon"> <ul> <li><a>Sub Menu421</a> <div class="secon"> <ul> <li><a>Sub Menu4211</a></li> </ul> </div></li> <li><a>Sub Menu422</a><div class="secon"> <ul> <li><a>Sub Menu4221</a></li> </ul> </div></li> <li><a>Sub Menu423</a><div class="secon"> <ul> <li><a>Sub Menu4231</a></li> </ul> </div></li> <li><a>Sub Menu434</a><div class="secon"> <ul> <li><a>Sub Menu4341</a></li> </ul> </div></li> </ul> </div></li> <li><a>Sub Menu43</a> <div class="secon"> <ul> <li><a>Sub Menu431</a> <div class="secon"> <ul> <li><a>Sub Menu4311</a></li> </ul> </div></li> <li><a>Sub Menu432</a><div class="secon"> <ul> <li><a>Sub Menu4321</a></li> </ul> </div></li> <li><a>Sub Menu433</a><div class="secon"> <ul> <li><a>Sub Menu4331</a></li> </ul> </div></li> <li><a>Sub Menu434</a><div class="secon"> <ul> <li><a>Sub Menu4341</a></li> </ul> </div></li> </ul> </div></li> <li><a>Sub Menu44</a> <div class="secon"> <ul> <li><a>Sub Menu441</a> <div class="secon"> <ul> <li><a>Sub Menu4411</a></li> </ul> </div></li> <li><a>Sub Menu442</a><div class="secon"> <ul> <li><a>Sub Menu4421</a></li> </ul> </div></li> <li><a>Sub Menu443</a><div class="secon"> <ul> <li><a>Sub Menu4431</a></li> </ul> </div></li> <li><a>Sub Menu444</a><div class="secon"> <ul> <li><a>Sub Menu4441</a></li> </ul> </div></li> </ul> </div></li> </ul> </div></li> <li><strong>Menu5</strong> <div class="secon"> <ul> <li><a>Sub Menu51</a> <div class="secon"> <ul> <li><a>Sub Menu511</a> <div class="secon"> <ul> <li><a>Sub Menu5111</a></li> </ul> </div></li> <li><a>Sub Menu512</a> <div class="secon"> <ul> <li><a>Sub Menu5121</a></li> </ul> </div></li> <li><a>Sub Menu513</a> <div class="secon"> <ul> <li><a>Sub Menu5131</a></li> </ul> </div></li> <li><a>Sub Menu514</a> <div class="secon"> <ul> <li><a>Sub Menu5141</a></li> </ul> </div></li> </ul> </div></li> <li><a>Sub Menu52</a> <div class="secon"> <ul> <li><a>Sub Menu521</a> <div class="secon"> <ul> <li><a>Sub Menu5211</a></li> </ul> </div></li> <li><a>Sub Menu522</a><div class="secon"> <ul> <li><a>Sub Menu5221</a></li> </ul> </div></li> <li><a>Sub Menu523</a><div class="secon"> <ul> <li><a>Sub Menu5231</a></li> </ul> </div></li> <li><a>Sub Menu524</a><div class="secon"> <ul> <li><a>Sub Menu5241</a></li> </ul> </div></li> </ul> </div></li> <li><a>Sub Menu53</a> <div class="secon"> <ul> <li><a>Sub Menu531</a> <div class="secon"> <ul> <li><a>Sub Menu5311</a></li> </ul> </div></li> <li><a>Sub Menu532</a><div class="secon"> <ul> <li><a>Sub Menu5321</a></li> </ul> </div></li> <li><a>Sub Menu533</a><div class="secon"> <ul> <li><a>Sub Menu5331</a></li> </ul> </div></li> <li><a>Sub Menu534</a><div class="secon"> <ul> <li><a>Sub Menu5341</a></li> </ul> </div></li> </ul> </div></li> <li><a>Sub Menu54</a> <div class="secon"> <ul> <li><a>Sub Menu541</a> <div class="secon"> <ul> <li><a>Sub Menu5411</a></li> </ul> </div></li> <li><a>Sub Menu542</a><div class="secon"> <ul> <li><a>Sub Menu5421</a></li> </ul> </div></li> <li><a>Sub Menu543</a><div class="secon"> <ul> <li><a>Sub Menu5431</a></li> </ul> </div></li> <li><a>Sub Menu544</a><div class="secon"> <ul> <li><a>Sub Menu5441</a></li> </ul> </div></li> </ul> </div></li> </ul> </div></li> </ul> </div> </body> </html>
相關文章
- 1. 下拉滾動吸頂式導航欄固定導航欄吸附導航欄
- 2. 設置導航欄下拉菜單
- 3. CSS導航欄及下拉菜單
- 4. 【練習】HTML+CSS下拉菜單與導航欄下拉菜單
- 5. 下拉式導航
- 6. MDNavBarView下拉導航菜單（仿美團導航下拉菜單）
- 7. ActionBar導航（下拉列表）
- 8. 下拉導航菜單
- 9. html純css實現導航欄下拉菜單（帶下拉三級菜單）
- 10. Html+Css+Jquery實現左側滑動拉伸導航菜單欄
- 更多相關文章...
- • jQuery Mobile 導航欄 - jQuery Mobile 教程
- • ionic 下拉刷新 - ionic 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • IDEA下SpringBoot工程配置文件沒有提示
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. CVPR 2020 論文大盤點-光流篇
- 2. Photoshop教程_ps中怎麼載入圖案？PS圖案如何導入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 導入源碼包
- 6. python學習 day2——基礎學習
- 7. 3D將是頁遊市場新賽道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 圖片(pgn顯示、jpg不顯示)解決方案
歡迎關注本站公眾號,獲取更多信息
