导航菜单的实现
Posted songtianfa
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了导航菜单的实现相关的知识，希望对你有一定的参考价值。
熟练使用导航栏，对于网站排版非常重要,使用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> 75 <ul> 76 <li><a href="#">JavaScript</a></li> 77 <li><a href="#">jQuery</a></li> 78 </ul> 79 </li> 80 <li class="navmenu"><a href="#">学习中心</a> 81 <ul> 82 <li><a href="#">视频学习</a></li> 83 <li><a href="#">案例学习</a></li> 84 <li><a href="#">交流平台</a></li> 85 </ul> 86 </li> 87 <li><a href="#">经典案例</a></li> 88 <li><a href="#">关于我们</a></li> 89 <li><a href="#">联系我们</a></li> 90 </ul> 91 </div> 92 </body> 93 </html>
以上是关于导航菜单的实现的主要内容，如果未能解决你的问题，请参考以下文章