二级下拉菜单
一、HTML/CSS方法实现下拉菜单
i. 思路:
1. 静态网页的制作
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css">
*{ margin:0; padding:0; } #nav{ background-color: #eee ; width:810px; height:45px; margin:0 auto; } ul{ /*去除默认样式*/ list-style: none ; } ul li{ /*宽度自适应*/ float:left; line-height: 45px; text-align: center ; /*二级菜单相对于此*/ position: relative; } a{ text-decoration: none ; color:#000; padding:0 10px; display:block; padding:0 10px; } a:hover{ color:#fff; background-color: #aaa ; } /*二级菜单*/ ul li ul li{ float:none; background-color: #eee ; margin-top: 2px; } ul li ul{ /* 绝对定位 相对于父级 默认浏览器 */ position: absolute; left:0; top:45px; } /*二级菜单的样式*/ ul li ul li a:hover{ background-color: #06F ; } </style> </head> <body> <div id="nav"> <ul> <li><a href="#">AAAAA</a> <ul> <li><a href="#">Java</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Mysql</a></li> </ul> </li> <li><a href="#">BBBBB</a></li> <li><a href="#">CCCCC</a></li> <li><a href="#">DDDDD</a></li> <li><a href="#">EEEEE</a></li> </ul> </div> </body> </html> |
2. 动态特效的实现---下拉菜单的显示和隐藏
a) CSS方法实现
i. 思路:
1. 先让二级菜单隐藏 display:none ;
2. 父级li:hover ul{display:block;}
b) JQuery方法实现
i. $(function(){})
ii. children()方法找子元素
iii. show()方法显示HTML元素
iv. hide()方法隐藏HTML元素
v. 思路：
1. 引入JQuery库文件
2. Mouseover() |mouseout()
c) JavaScript方法实现
i. Onmouseover()鼠标经过事件
ii. Onmouseout()鼠标离开事件
iii. getElementsByTagName() 获得一组标签 getElementById()...
<!-- this指的是当前对象 --> <li onmouseover="showMenu(this);" onmouseout="hideMenu(this)"><a href="#">AAAAA</a> <ul> <li><a href="#">Java</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Mysql</a></li> </ul> </li> <script type="text/javascript"> /*鼠标经过当前对象事件*/ function showMenu(li) { //当前对象下面的二级 显示 li.getElementsByTagName('ul')[0].style.display="block" ; } /*鼠标离开当前对象样式*/ function hideMenu(li) { li.getElementsByTagName('ul')[0].style.display="none" ; } </script> |
3. 浏览器兼容
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css">
*{ margin:0; padding:0; } #nav{ background-color: #eee ; width:810px; height:45px; margin:0 auto; } ul{ /*去除默认样式*/ list-style: none ; } ul li{ /*宽度自适应*/ float:left; line-height: 45px; text-align: center ; /*二级菜单相对于此*/ position: relative; } a{ text-decoration: none ; color:#000; padding:0 10px; display:block; padding:0 10px; } a:hover{ color:#fff; background-color: #aaa ; } /*二级菜单*/ ul li ul li{ float:none; background-color: #eee ; margin-top: 2px; } ul li ul{ /* 绝对定位 相对于父级 默认浏览器 */ position: absolute; left:0; top:45px; display:none; } /*二级菜单的样式*/ ul li ul li a:hover{ background-color: #06F ; } /*二级 ul隐藏 父级li hover*/ /*ul li:hover ul{ display:block; }*/ </style> </head> <body> <div id="nav"> <ul> <!-- this指的是当前对象 --> <li class="navMenu"><a href="#">AAAAA</a> <ul> <li><a href="#">Java</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Mysql</a></li> </ul> </li> <li><a href="#">BBBBB</a></li> <li class="navMenu"><a href="#">CCCCC</a> <ul> <li><a href="#">Java</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Mysql</a></li> </ul> </li> <li><a href="#">DDDDD</a></li> <li><a href="#">EEEEE</a></li> </ul> </div> <!--引入JQuery库 --> <script src="/static/index/js/jquery-1.8.1.min.js"></script> <script> $(function() { $('.navMenu').mouseover(function() { // 当前对象 $(this).children('ul').show() ; }) ; $('.navMenu').mouseout(function() { // 当前对象 $(this).children('ul').hide() ; }) ; }) ;
</script> </body> </html> |