CSS+JS下拉菜单和纯CSS下拉菜单

时间:2023-03-08 16:32:01

下拉菜单

(思路:先把二级定位到屏幕外,鼠标悬停重新定位回来;另一个就是ul浮动,li也浮动)

下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定位它。

有两个问题需要注意,

第一个问题,列表项设置了float浮动,因此列表也要浮动已防止列表收缩:

ul.nav,ul.nav ul{float:left}

ul.nav li{float:left}

第二个问题,子导航的定位

ul.nav li ul{position:absolute;left:-999em}

ul.nav li:hover ul{left:auto}

CSS+JS下拉菜单和纯CSS下拉菜单

一、CSS+JS下拉菜单

原理:一级菜单的li中包含二级菜单ul。在鼠标没有移上去时,二级菜单的ul是display:none的状态,鼠标一移上去变成display:block。改变这个display属性值是通过JS来实现。鼠标hover时,把整个二级菜单的ul给display出来,用到的事件onmouseonver。鼠标移出又把整个二级菜单的ul 给隐藏掉。

nav-js.html文件

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<link href="nav-js.css" rel="stylesheet">
<script type="text/javascript">
//显示子菜单
function showSubMenu(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>
<ul id="navigation">
<li><a href="#">首页</a></li>
<li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">我们的服务</a>
<ul>
<li><a href="#">服务一</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务三</a></li>
<li><a href="#">服务四</a></li>
<li><a href="#">服务五</a></li>
</ul>
</li>
<li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">我们的团队</a>
<ul>
<li><a href="#">服务一</a></li>
<li><a href="#">服务二</a></li>
<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>
</body>
</html>

nav-css.css文件

 @charset "UTF-8";
*{
margin:;
padding:;
} body{
font-size: 14px;
font-family: sans-serif;
}
#navigation,#navigation li ul{
list-style-type: none;
}
#navigation li{
float: left;
text-align: center;
position: relative;
}
#navigation li a:link,#navigation li a:visited{
display: block;
text-decoration: none;
color: #000;
width: 120px;
height: 40px;
line-height: 40px;
border: 1px solid #fff;
background: #c5dbf2;
border-width: 1px 1px 0 0;
}
#navigation li a:hover{
color: #fff;
background: #2687eb;
}
#navigation li ul li{
float: none;
}
#navigation li ul{
display: none;
position: absolute; /*二级ul使用绝对定位,宽度大于一级菜单时,才不会撑大一级*/

}
#navigation li ul li a:link,#navigation li ul li a:visited{
display: block;
width: 160px;
}

在46行,如果一级li的宽度小于二级li的宽度,那么就会撑大一级li的宽度,如图:

CSS+JS下拉菜单和纯CSS下拉菜单

显示和隐藏二级UL的JS函数:

//显示子菜单
function showSubMenu(li){
var subMenu = li.getElementsByTagName("ul")[0]; /*传了一个参数li进来,表示当前鼠标经过的li,
再通过查找当前li下面的第一个ul,注意数组从0开始*/
subMenu.style.display = "block";
} //隐藏子菜单
function hideSubMenu(li){
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
}

做到了兼容所有的主流浏览器。

二、纯CSS实现的下拉菜单

纯CSS写的下拉菜单,其他浏览器都可以兼容,唯独IE6这家伙不怎么听话不兼容,所以当时IE6时,采用table布局,来达到IE6兼容的目的。

HTML文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>纯css下拉菜单,兼容IE6</title>
<link rel="stylesheet" type="text/css" href="nav-css3.css">
<!--[if lte IE 6]>
<style tpye="text/css">
table{
border-collapse: collapse;
margin: 0;
padding: 0;
}
.menu ul li a.hide,.menu ul li a:visited.hide{
display: none;
}
.menu ul li a:hover{
color:#fff;
background: #b3ab79;
}
.menu ul li a:hover ul{
display: block;
position: absolute;
top: 32px;
left: 0;
width: 105px;
}
.menu ul li a:hover ul li a{
background: #faeec7;
color: #000;
width:160px;
}
.menu ul li a:hover ul li a:hover{
background: #dfc184;
color: #000;
}
</style>
<![endif]-->
</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="#">我们的服务</a>
<!--[if lte IE 6]>
<a href="#">我们的服务
<table><tr><td>
<![endif]-->
<ul>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="#">我们的服务</a>
<!--[if lte IE 6]>
<a href="#">我们的服务
<table><tr><td>
<![endif]-->
<ul>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="#">我们的服务</a>
<!--[if lte IE 6]>
<a href="#">我们的服务
<table><tr><td>
<![endif]-->
<ul>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
<li><a href="#">服务一</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>
</body>
</html>

CSS文件

*{
margin:;
padding:;
}
.menu{
font-family: arial,sans-serif;
font-size: 14px;
width: 750px;
}
.menu ul{
padding:;
margin:;
list-style-type: none;
}
.menu ul li{
float: left;
position: relative;
} .menu ul li a, .menu ul li a:visited{
display: block;
text-align: center;
text-decoration: none;
width: 104px;
height: 30px;
color: #000;
border: 1px solid #fff;
border-width: 1px 1px 0 0;
background: #c9c9a7;
line-height: 30px;
font-size: 11px;
}
/*隐藏二级菜单ul*/
.menu ul li ul{
display: none;
}/*隐藏结束*/ .menu ul li:hover a{ /*????????????尝试修改此处*/
color: #fff;
background: #b3ab79;
}
/*显示二级菜单*/
.menu ul li:hover ul{
display: block;
position: absolute;
top: 31px;
left: 0px;
width: 105px;
}/*结束*/ /*添加二级菜单鼠标移过的样式*/
.menu ul li:hover ul li a{
display: block;
background: #faeec7;
color: #000;
width: 160px;
}
.menu ul li:hover ul li a:hover{
background: #dfc184;
color: #000;
}

ok,这样IE6也达到兼容。

相关文章