下拉菜单
1.css
用display 和布局;
2.js
- 控制style中的display
- 用div做二级布局时,控制div高度。
3.jquery
- hide/show方法
- toggle方法
4.中英文菜单切换
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .top-nav { font-size: 12px; font-weight: bold; list-style: none; border-bottom: 8px solid #DC4E1B; overflow: auto; } .top-nav li { float: left; margin-right: 1px; } .top-nav li a { line-height: 20px; text-decoration: none; background: #DDDDDD; color: #666666; display: block; width: 100px; text-align: center; } /*设置正常状态英文菜单隐藏*/ .top-nav li a span{display:none;} /*鼠标移动到链接上面时将英文菜单显示*/ .top-nav li a:hover span{display:block;} /*鼠标移动到链接上面时将中文菜单位置上移*/ .top-nav li a:hover{margin-top:-20px; </style> </head> <body> <ul class="top-nav"> <li><a href="#">首页<span>Home</span></a></li> <li><a href="#">课程大厅<span>Course</span></a></li> <li><a href="#">学习中心<span>Learn</span></a></li> <li><a href="#">关于我们<span>About</span></a></li> </ul> </body> </html>
5.三级菜单(ie6兼容)
引入hack文件 csshover.htc
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .top-nav { font-size: 12px; font-weight: bold; list-style: none; } .top-nav li { float: left; list-style: none; margin-right: 1px; } .top-nav li a { line-height: 20px; text-decoration: none; background: #DDDDDD; color: #666666; display: block; width: 80px; text-align: center; } .top-nav li a:hover { background: #900; color: #FFF; } .top-nav ul { list-style: none; display: none; width: 80px; padding: 0; position: relative; } .top-nav li ul li ul { position: absolute; top: 0; left: 80px; } /* 使用CSS设置鼠标移动到一级菜单时,二级菜单显示,三级菜单隐藏 */ .top-nav li:hover ul {display:block; } .top-nav li:hover ul li ul { display:none; } /* 使用CSS设置鼠标移动到二级菜单时,三级菜单显示 */ .top-nav li ul li:hover ul { display:block; } </style> <script type="text/javascript"> window.onload = function () { //判断是否为IE浏览器 var isIE = !!window.ActiveXOject; var isIE6= isIE && !window.XMLHttpRequest; if (isIE6) { var Lis = document.getElementsByTagName("li"); for (var i = 0; i < Lis.length; i++) { Lis[i].onmouseover = function () { var u = this.getElementsByTagName("ul")[0]; //如果包含子菜单,就将子菜单显示 if(u!=undefined){ u.style.display='block'; } } Lis[i].onmouseout = function () { var u = this.getElementsByTagName("ul")[0]; //如果包含子菜单,就将子菜单隐藏 if (u != undefined) { u.style.display = "none"; } } } } } </script> </head> <body> <ul class="top-nav"> <li><a href="#">慕课网首页</a> <ul> <li><a href="#">前端课程 +</a> <ul> <li><a href="#">javascript</a></li> <li><a href="#">css</a></li> <li><a href="#">jquery</a></li> </ul> </li> <li><a href="#">手机开发</a> <ul> <li><a href="#">ios开发</a></li> <li><a href="#">android开发</a></li> <li><a href="#">WP开发</a></li> </ul> </li> <li><a href="#">后台编程</a></li> </ul> </li> <li><a href="#">课程大厅</a> </li> <li><a href="#">学习中心 +</a> <ul> <li><a href="#">前端课程 +</a> <ul> <li><a href="#">javascript</a></li> <li><a href="#">css</a></li> <li><a href="#">jquery</a></li> </ul> </li> <li><a href="#">手机开发</a> <ul> <li><a href="#">ios开发</a></li> <li><a href="#">android开发</a></li> <li><a href="#">WP开发</a></li> </ul> </li> <li><a href="#">后台编程</a></li> </ul> </li> <li><a href="#">关于我们</a></li> </ul> </body> </html>
6.动画效果
js实现
jq实现:slidedown slideup方法