熟練使用導航欄，對於網站排版非常重要,使用CSS，js，jq等你可以轉換成好看的導航欄而不是枯燥的HTML菜單。 CSS實現： js實現： jq實現： ...
熟練使用導航欄，對於網站排版非常重要,使用CSS，js，jq等你可以轉換成好看的導航欄而不是枯燥的HTML菜單。
CSS實現：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Genarator" content="Sublime Text"/> 6 <meta name="description" content="菜單的實現" /> 7 <meta name="keywords" content="CSS實現，下拉菜單"/> 8 <title>CSS實現下拉菜單</title> 9 <style type="text/css"> 10 *{ margin:0px; padding:0px;} 11 #menu{ 12 background-color:#eee; 13 width:600px; 14 height:40px; 15 margin:0 auto; 16 } 17 ul{ list-style:none;} 18 ul li{ 19 float:left; 20 line-height:40px; 21 text-align:center; 22 position:relative; 23 } 24 a{ 25 text-decoration:none; 26 color:#000; 27 display:block; 28 width:90px; 29 } 30 a:hover{ 31 color:#FFF; 32 background-color:#666; 33 } 34 ul li ul li{ 35 float:none; 36 border-left:none; 37 margin-top:2px; 38 background-color:#eee; 39 } 40 ul li ul{ 41 display:none; 42 width:90px; 43 position:absolute; 44 } 45 ul li:hover ul{ display:block;} 46 </style> 47 </head> 48 <body> 49 <div id="menu"> 50 <ul> 51 <li><a href="#">首頁</a></li> 52 <li><a href="#">課程大廳</a> 53 <ul> 54 <li><a href="#">JavaScript</a></li> 55 <li><a href="#">jQuery</a></li> 56 </ul> 57 </li> 58 <li><a href="#">學習中心</a> 59 <ul> 60 <li><a href="#">視頻學習</a></li> 61 <li><a href="#">案例學習</a></li> 62 <li><a href="#">交流平臺</a></li> 63 </ul> 64 </li> 65 <li><a href="#">經典案例</a></li> 66 <li><a href="#">關於我們</a></li> 67 <li><a href="#">聯繫我們</a></li> 68 </ul> 69 </div> 70 </body> 71 </html>
js實現：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Genarator" content="Sublime Text"/> 6 <meta name="description" content="菜單的實現" /> 7 <meta name="keywords" content="javascript實現，下拉菜單"/> 8 <title>JavaScript實現下拉菜單</title> 9 <style type="text/css"> 10 *{ margin:0px; padding:0px;} 11 body{ 12 font-family:Verdana, Geneva, sans-serif; 13 font-size:14px; 14 } 15 #nav{ 16 width:600px; 17 height:40px; 18 background-color:#eee; 19 margin:0 auto; 20 } 21 ul{ list-style:none;} 22 ul li{ 23 float:left; 24 line-height:40px; 25 text-align:center; 26 width:100px; 27 } 28 a{ 29 text-decoration:none; 30 color:#000; 31 display:block; 32 } 33 a:hover{ 34 color:#F00; 35 background-color:#666; 36 } 37 ul li ul li{ 38 float:none; 39 background-color:#eee; 40 margin:2px 0px; 41 } 42 ul li ul{ display:none;} 43 </style> 44 <script type="text/javascript"> 45 46 function displaySubMenu(li) { 47 48 var subMenu = li.getElementsByTagName("ul")[0]; 49 50 subMenu.style.display = "block"; 51 52 } 53 54 function hideSubMenu(li) { 55 56 var subMenu = li.getElementsByTagName("ul")[0]; 57 58 subMenu.style.display = "none"; 59 60 } 61 62 </script> 63 </head> 64 65 <body> 66 <div id="nav"> 67 <ul> 68 <li><a href="#">首頁</a></li> 69 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">課程大廳</a> 70 <ul> 71 <li><a href="#">JavaScript</a></li> 72 <li><a href="#">Html/CSS</a></li> 73 </ul> 74 </li> 75 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">學習中心</a> 76 <ul> 77 <li><a href="#">視頻學習</a></li> 78 <li><a href="#">實例練習</a></li> 79 <li><a href="#">問與答</a></li> 80 </ul> 81 </li> 82 <li><a href="#">經典案例</a></li> 83 <li><a href="#">關於我們</a></li> 84 <li><a href="#">聯繫我們</a></li> 85 </ul> 86 </div> 87 </body> 88 </html>
jq實現：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Genarator" content="Sublime Text"/> 6 <meta name="description" content="菜單的實現" /> 7 <meta name="keywords" content="JQuery實現，下拉菜單"/> 8 <title>JQuery實現下拉菜單</title> 9 <style type="text/css"> 10 *{ margin:0px; padding:0px;} 11 #menu{ 12 background-color:#eee; 13 width:600px; 14 height:40px; 15 margin:0 auto; 16 } 17 ul{ list-style:none;} 18 ul li{ 19 float:left; 20 line-height:40px; 21 text-align:center; 22 position:relative; 23 } 24 a{ 25 text-decoration:none; 26 color:#000; 27 display:block; 28 width:90px; 29 } 30 a:hover{ 31 color:#FFF; 32 background-color:#666; 33 } 34 ul li ul li{ 35 float:none; 36 border-left:none; 37 margin-top:2px; 38 background-color:#eee; 39 } 40 ul li ul{ 41 width:90px; 42 position:absolute; 43 left:0px; 44 top:40px; 45 display:none; 46 } 47 </style> 48 <script src="jquery-1.12.0.min.js"></script> 49 <script type="text/javascript"> 50 $(function(){ 51 52 $(".navmenu").mouseover(function(){ 53 54 $(this).children("ul").show(); 55 56 }) 57 58 $(".navmenu").mouseout(function(){ 59 60 61 $(this).children("ul").hide(); 62 63 64 }) 65 66 }) 67 68 </script> 69 </head> 70 <body> 71 <div id="menu"> 72 <ul> 73 <li><a href="#">首頁</a></li> 74 <li class="navmenu"><a href="#">課程大廳</a>
