菜单的那些事儿
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了菜单的那些事儿相关的知识，希望对你有一定的参考价值。
菜单的那些事儿（一）
首先呢，先做简单的二级导航菜单，在这里，我们用伪类的方法来实现鼠标点击出现二级菜单的效果，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo1</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } body{ font-size: 24px; } #nav{ width: 600px; height: 40px; background-color: #eee; margin: 0 auto; } ul li{ line-height: 40px; text-align: center; float: left; position: relative; } a{ display: block; text-decoration: none; padding: 0 10px; color: #000; height: 40px; } a:hover{ color: #fff; background-color: #000; } ul li ul li{ float: none; /*在这里注意float：none和clear的区别*/ background-color: #eee; margin-top: 2px; } ul li ul{ position: absolute; left: 0; top: 40px; display: none; } ul li:hover ul{ display: block; } </style> </head> <body> <div id="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">课程大厅</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">javascript</a></li> <li><a href="#">JQuery</a></li> </ul> </li> <li><a href="#">学习中心</a></li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div> </body> </html>
在这里，我们还是要注意一下，在中间的注释部分，特意强调了float：none和clear的区别；另外，hover方法对于低版本的ie浏览器兼容不太好，在这里，我们可以通过Javascript或是jquery方法来兼容低版本的ie浏览器。
Javascript方法：
首先，我们要在课程大厅的li标签上加上方法，<li onmouseover="showsubmenu(this)" onmouseout="hiddensubmenu(this)">，Javascript代码如下
<script type="text/javascript">
function showsubmenu(li){
var submenu = li.getElementsByTagName(‘ul‘)[0];
submenu.style.display = ‘block‘;
}
function hiddensubmenu(li){
var submenu = li.getElementsByTagName(‘ul‘)[0];
submenu.style.display = ‘none‘;
}
</script>
我们分别定义了两个函数，先使用DOM方法获得li标签的第一ul标签，然后进行相应的操作。
下面我们再看一看jquery方法：（注意：在使用前需要引入jquery，由于）
<script type="text/javascript">
//这种使用的是jquery方法，在使用前需要引入jquery
$(document).ready(function(){
$(‘.submenu‘).mouseover(function(){
$(this).children("ul").show();
});
$(‘.submenu‘).mouseout(function(){
$(this).children("ul").hide();
});
});
</script>
接下来，我们要对我们菜单进行一点升级改造，我们想要鼠标经过的时候，导航菜单进行中英文切换，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo2</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: 80px;
text-align: center;
}
/*设置正常状态英文菜单隐藏*/
.top-nav li a span{
display: none;
}
/*鼠标移动到链接上面时将英文菜单显示*/
.top-nav li:hover span{
display: block;
}
/*鼠标移动到链接上面时将中文菜单位置上移*/
.top-nav li: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>
下面，我们利用前面的基础继续对我们的菜单进行升级改造，我们用前面的基础做一个简单的三级菜单，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo3</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
ul{
list-style: none;
}
.top-nav
{
font-size: 12px;
font-weight: bold;
list-style: none;
}
.top-nav li
{
float: left;
margin-right: 1px;
position: relative;
}
.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-color: darkred;
color: white;
}
.top-nav li ul{
display: none;
}
.top-nav li:hover ul{
display: block;
width: 80px;
position: absolute;
top: 20px;
left: 0px;
}
.top-nav li:hover ul li ul{
display: none;
}
.top-nav li ul li:hover ul{
display: block;
width: 80px;
position: absolute;
top: 0px;
left: 80px;
}
</style>
</head>
<body>
<ul class="top-nav">
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a></li>
<li><a href="#">学习中心 +</a>
<ul>
<li><a href="#">后台课程</a></li>
<li><a href="#">手机开发</a></li>
<li><a href="#">前端课程 +</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</body>
</html>
下面介绍Javascript方法，在前面的二级菜单中，我们是在li标签中添加了两个事件，聪敏的你肯定发现了，那样做需要改动的方法太多了，下面我们对之前的方法进行改进，代码如下：
<script type="text/javascript">
window.onload = function(){
// var isIE = !!window.ActiveXObject;
// 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>
（要是想兼容ie6，去掉注释就行了），用这种方法我们不需要对html代码进行任何操作，直接引进html内容就行了。另外if(u !== undefined)此段代码判断了若li下面的第一个ul标签存在时，则执行，不加此判断会报错。
下面是jquery方法：
$(document).ready(function(){
if($.browser.msie && $.browser.version.substr(0,1)<7){
$("li").has(‘ul‘).mouseover(function(){
$(this).children(‘ul‘).css(‘display‘,‘block‘)
}).mouseout(function(){
$(this).children(‘ul‘).css(‘display‘,‘none‘)
});
}
});
经常我们看到的鼠标放在一级菜单上，二级菜单是有动画效果的，哟ucss3基础的，做出动画效果很简单，但是大家都知道，css3对于低版本的兼容不是太好，接下来我们先用css3的方法做简单的动画效果，我们会尽可能的使用css3中的新方法，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo4</title>
<style type="text/css">
*{ margin: 0; padding: 0; text-decoration: none; list-style: none;}
a{color: #000;background-color: #eee;}
a:hover{color: #fff;background-color: aqua;}
/**/
.top-nav{width: 450px;height: 40px;font-size: 24px;line-height: 40px;text-align: center;margin: 0 auto;position: relative;}
.top-nav li{float: left;}
.top-nav li a{display: block;width: 100px;margin-right: 2px;}
.top-nav li ul{position: absolute;top: 50px;left: 0;}
/*.top-nav li li{float: none;margin-top: 2px;}*/
.top-nav li ul{display: none;}
.sjx{display:block; width:0; height:0; border-width:0 10px 10px; border-style:solid; border-color:transparent transparent #eee; position:absolute; }
.one{top:-10px; left:140px;}
.two{top:-10px; left:240px;}
/*.top-nav li:hover ul{display: block;}*/
</style>
</head>
<body>
<ul class="top-nav">
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a>
<ul>
<span class="sjx one"></span>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#">学习中心</a>
<ul>
<span class="sjx two"></span>
<li><a href="#">后台课程</a></li>
<li><a href="#">手机开发</a></li>
<li><a href="#">前端课程</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo5</title>
<style type="text/css">
/*通用基础样式*/
*{margin: 0;padding: 0;list-style: none;text-decoration: none;}
body{font: 18px "微软雅黑";}
a{color: #963;font-weight: bold;}
a:hover{color: #fff;text-shadow: 0 4px 2px #963;background-image: linear-gradient(#111,#444);}
ul{background-color: #111;background-image: linear-gradient(#444,#111);border-radius: 5px;box-shadow: 1px 0 0 #444;}
/*一级菜单*/
.top-nav{width: 900px;height: 40px;box-shadow: 0 1px 1px #777;margin: 0 auto;}
.top-nav li{float: left;line-height: 40px;text-align: center;border-right: 1px solid #444;position: relative;}
.top-nav li:last-child{border-right-style: none;}
.top-nav li a{display: block;width: 100px;padding: 0 10px;}
/*二级菜单*/
/*.top-nav li ul{display: block;}*/
.top-nav li ul{float: none;position: absolute;top: 38px;left: 0;z-index: 2;}
.top-nav li ul{opacity: 0;margin: -100px 0 0 0;transition: all .2s ease-in-out;}
.top-nav li:hover>ul{opacity: 1;margin: 0;}
.top-nav ul li{border: 0;box-shadow: 0 2px 2px #000;}
.top-nav ul li:first-child{border-radius: 3px 3px 0 0;}
.top-nav ul li:last-child{border-radius: 0 0 3px 3px;}
/*三级菜单*/
.top-nav ul ul{position: absolute;top: 0;left: 118px;z-index: 4;}
.top-nav ul ul{opacity: 0;margin: 0 0 0 -100px;transition: all .2s ease-in-out;}
.top-nav li li:hover>ul{opacity: 1;margin: 0;}
/*三角效果的实现*/
.top-nav ul li:first-child a:before{
content: "";
display: block;
position: absolute;
left: 50px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid aqua;
}
.top-nav ul ul li:first-child a:before{
content: "";
display: block;
position: absolute;
left: -12px;
top: 17px;
border-top: 6px solid transparent;
border-right: 6px solid aqua;
border-bottom: 6px solid transparent;
}
</style>
</head>
<body>
<ul class="top-nav">
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a></li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">后台课程</a></li>
<li><a href="#">手机开发</a></li>
<li><a href="#">前端课程</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</body>
</html>
在上那个面的例子中，css3新增的很多方法都有使用到，但是在低版本的浏览器中，我们应该如何去实现我们想要的动画效果呢？拿demo4来说，我们可以在代码中添加如下的Javascript代码：（在这之前我们需要给需要的li标签加上id，还需要在css代码中添加.top-nav li ul{height: 0;overflow: hidden;}）
window.onload = function(){
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";
AddH(u.id);
}
};
Lis[i].onmouseleave = function(){
var u = this.getElementsByTagName("ul")[0];
if(u!=undefined){
u.style.display = "none";
SubH(u.id);
}
};
}
}
function AddH(id){//缓慢增加高度
var ulList = document.getElementById(id);
var h = ulList.offsetHeight;
h += 1;
if(h<49){
ulList.style.height = h + "px";
setTimeout("AddH(‘"+id+"‘)",10);
}else{
ulList.style.height = 50 + "px";
}
}
function SubH(id){//缓慢减少高度
var ulList = document.getElementById(id);
var h = ulList.offsetHeight;
h -=1;
if(h>0){
ulList.style.height = h + "px";
setTimeout("SubH(‘"+id+"‘)",10);
}else{
ulList.style.height = 0 + "px";
}
}
聪明的你也肯定看出了，我们可以对上面的代码进行一定程度的优化
window.onload = function(){
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";
ChangeH(u.id,1);
}
};
Lis[i].onmouseleave = function(){
var u = this.getElementsByTagName("ul")[0];
if(u!=undefined){
u.style.display = "none";
ChangeH(u.id,-1);
}
};
}
}
function ChangeH(id, count) {
// 根据ID找到ulList，同时得到其高度
var ulList = document.getElementById(id);
var h = ulList.offsetHeight;
h += count;
if (count > 0) {
if (h <= 42) {
// 将高度赋值给ulList，同时，不断调用本函数
ulList.style.height = h + "px";
setTimeout("ChangeH(‘" + id + "‘,1)", 10);
}
else {
return;
}
}
else {
if (h > 0) {
// 将高度赋值给ulList，同时，不断调用本函数
ulList.style.height = h + "px";
setTimeout("ChangeH(‘" + id + "‘,-1)", 10);
}
else {
ulList.style.display = "none";
return;
}
}
}
小结：这两天的学习，虽然说学习的新东西不多，但是加深之前对于一些概念的理解，然我对前面的一些只是进行了回顾。比如说在设置菜单横向排列的时候用到的浮动float，后面又需要对浮动进行清除clear，或者说我们有时候还可以用overflow进行清除，到底什么时候该用哪种方法？优势在哪里，这些都是我们需要考虑到的。有时候这样还是不能得到我们想要的效果，我们就要对其position进行思考了，到底是应该用相对定位还是绝对定位，或者说我们有时候会用到固定定位。以前的话可以觉得：hover伪类只用在a标签上，后面才发现原来不是那么回事，后面的css3中它对其他标签也是可以使用的，在高版本的浏览器中会得到我们想要的效果，但是在低版本的ie浏览器中并不是那么支持，在考虑兼容的方法时，我们就需要用到Javascript或是jquery来帮助我们了，说道这两个，感觉有点倾向于jquery，毕竟这是前辈们画了好多时间和精力完成的，他们考虑的问题肯定比自己编写Javascript代码考虑的问题多，然后使用起来，感觉比Javascript简单，所使用的代码量也少了好多。下面说说Javascript里面用到的知识点：DOM方法，for循环，简单的数组（都算不上吧），判断，setTimeout函数的使用……这些东西前面自己都学过，但是用起来，在没学之前，是肯定不知道这个还能这么用的。后面使用的css3就更神奇了，用短短的代码就能实现Javascript或是jquery很多代码才能完成的工作，真的很神奇。慢慢的对这些东西越来越有种说不出的感觉了。
（多点思考，多点总结，慢慢的将前面的知识融会贯通，然后还要对前面的有所突破）
后面的时间我想一边学习jquery一边做点东西，做出有效果的页面真的是件很有趣的事！
Just do it！
以上是关于菜单的那些事儿的主要内容，如果未能解决你的问题，请参考以下文章