下拉菜單的實現
阿新 • • 發佈：2017-05-05
this 首頁 type san -h href abs charset ati
CSS實現下拉菜單：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<meta name="author" content="宋添發" />
<meta name="Genarator" content="Sublime Text"/>
<meta name="description" content="菜單的實現" />
<meta name="keywords" content="CSS實現，下拉菜單"/><title>CSS實現下拉菜單</title> <style type="text/css"> *{ margin:0px; padding:0px;} #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;} ul{ list-style:none;} ul li{ float:left; line-height:40px; text-align:center; position:relative;} a{ text-decoration:none; color:#000; display:block; width:90px;} a:hover{ color:#FFF; background-color:#666;} ul li ul li{ float:none; border-left:none; margin-top:2px; background-color:#eee; } ul li ul{ display:none; width:90px; position:absolute;} ul li:hover ul{ display:block;} </style> </head> <body> <div id="menu"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">課程大廳</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> </ul> </li> <li><a href="#">學習中心</a> <ul> <li><a href="#">視頻學習</a></li> <li><a href="#">案例學習</a></li> <li><a href="#">交流平臺</a></li> </ul> </li> <li><a href="#">經典案例</a></li> <li><a href="#">關於我們</a></li> </ul> </div> </body> </html>
JavaScript實現下拉菜單：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<meta name="author" content="宋添發" />
<meta name="Genarator" content="Sublime Text"/>
<meta name="description" content="菜單的實現" />
<meta name="keywords" content="javascript實現，下拉菜單"/> <title>JavaScript實現下拉菜單</title> <style type="text/css"> *{ margin:0px; padding:0px;} body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;} #nav{ width:600px; height:40px; background-color:#eee; margin:0 auto;} ul{ list-style:none;} ul li{ float:left; line-height:40px; text-align:center; width:100px;} a{ text-decoration:none; color:#000; display:block;} a:hover{ color:#F00; background-color:#666;} ul li ul li{ float:none;background-color:#eee; margin:2px 0px;} ul li ul{ display:none;} </style> <script type="text/javascript"> function displaySubMenu(li) { var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = "block"; } function hideSubMenu(li) { var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = "none"; } </script> </head> <body> <div id="nav"> <ul> <li><a href="#">首頁</a></li> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">課程大廳</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">Html/CSS</a></li> </ul> </li> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">學習中心</a> <ul> <li><a href="#">視頻學習</a></li> <li><a href="#">實例練習</a></li> <li><a href="#">問與答</a></li> </ul> </li> <li><a href="#">經典案例</a></li> <li><a href="#">關於我們</a></li> </ul> </div> </body> </html>
JQuery實現下拉菜單：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<meta name="author" content="宋添發" />
<meta name="Genarator" content="Sublime Text"/>
<meta name="description" content="菜單的實現" />
<meta name="keywords" content="JQuery實現，下拉菜單"/> <title>JQuery實現下拉菜單</title> <style type="text/css"> *{ margin:0px; padding:0px;} #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;} ul{ list-style:none;} ul li{ float:left; line-height:40px; text-align:center; position:relative;} a{ text-decoration:none; color:#000; display:block; width:90px;} a:hover{ color:#FFF; background-color:#666;} ul li ul li{ float:none; border-left:none; margin-top:2px; background-color:#eee; } ul li ul{ width:90px; position:absolute; left:0px; top:40px; display:none;} </style> <script src="jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function(){ $(".navmenu").mouseover(function(){ $(this).children("ul").show(); }) $(".navmenu").mouseout(function(){ $(this).children("ul").hide(); }) }) </script> </head> <body> <div id="menu"> <ul> <li><a href="#">首頁</a></li> <li class="navmenu"><a href="#">課程大廳</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> </ul> </li> <li class="navmenu"><a href="#">學習中心</a> <ul> <li><a href="#">視頻學習</a></li> <li><a href="#">案例學習</a></li> <li><a href="#">交流平臺</a></li> </ul> </li> <li><a href="#">經典案例</a></li> <li><a href="#">關於我們</a></li> </ul> </div> </body> </html>
下拉菜單的實現