本文实例为大家分享了js+css实现三级导航菜单的具体代码，供大家参考，具体内容如下
导航菜单hover事件用css实现相对容易，只需要将透明度更改即可，如果想要菜单有一个渐变的效果，然而可惜的是transition并不支持display，所以用opacity实现效果完全相同。
下面是用css实现的完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>三级导航菜单</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-size: 16px;
background-color:#EDEDED ;
font-style: inherit;
color:#757576 ;
}
.main{
width: 1050px;
margin: 0 auto;
}
.fl{
float: left;
}
.fr{
float: right;
}
a{
text-decoration: none;
outline: none;
color:#757576 ;
}
ul,ol{
list-style: none;
}
.clear{
clear: both;
}
.clearfix{
*zoom:1;
}
li{
float: left;
display: inline-block;
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
}
li a:hover{
color: red;
}
#frist {
opacity: 0;
}
#frist li{
float: none;
position: relative;
}
li a:hover{
color: red;
transition: all 0.5s;
}
:hover{
transition: all 2s;
}
#second {
opacity: 0;
margin: -40px 0 0 80px;
padding: 0px;
position: absolute;
}
#nav_one:hover #frist{
opacity:1;
transition: all 2s;
}
#nav_two:hover #second{
opacity:1;
transition: all 2s;
}
</style>
<body>
<div class="nav main">
<ul id="nav">
<li id="nav_one"><a href="#" >一级</a>
<ul id="frist">
<li id="nav_two" class="nav_two">
<a href="#" >二级</a>
<ul id="second">
<li><a href="#" >三级</a></li>
<li><a href="#" >三级</a></li>
<li><a href="#" >三级</a></li>
</ul>
</li>
<li class="nav_two"><a href="#" >二级</a></li>
<li class="nav_two"><a href="#" >二级</a></li>
</ul>
</li>
<li><a href="#" >一级</a></li>
<li><a href="#" >一级</a></li>
<li><a href="#" >一级</a></li>
<li><a href="#" >一级</a></li>
</ul>
</div>
</body>
</html>
js实现的相对麻烦一点，但也可以，代替了css中hover效果。
<!--<script>
window.onload = function(){
var one = document.getElementById("nav_one");
var frist = document.getElementById("frist");
var second = document.getElementById("second");
one.onmouseover = function(){
frist.style.opacity = "1";
frist.style.transition = "all 2s";
frist.style.WebkitTransition = "all 2s";
}
one.onmouseout = function(){
frist.style.opacity = "0";
frist.style.transition = "all 0.5s";
frist.style.WebkitTransition = "all 0.5s";
}
var two = document.getElementById("nav_two");
two.onmouseover = function(){
second.style.opacity = "1";
second.style.transition = "all 2s";
second.style.WebkitTransition = "all 2s";
}
two.onmouseout = function(){
second.style.opacity = "0";
second.style.transition = "all 0.5s";
second.style.WebkitTransition = "all 0.5s";
}
}
</script>-->
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- js左侧三级菜单导航实例代码
- JS中用三种方式实现导航菜单中的二级下拉菜单
- JS实现选中当前菜单后高亮显示的导航条效果
- 一个js控制的导航菜单实例代码
- js实现水平滚动菜单导航
- 原生js做的手风琴效果的导航菜单
- 可以媲美Flash的JS导航菜单
- 原生JS实现导航下拉菜单效果
- js实现多选项切换导航菜单的方法
- 用js实现的比较经典实用的触发型导航菜单
本文由 华域联盟 原创撰写：华域联盟 » js+css实现三级导航菜单
转载请保留出处和原文链接：https://www.cnhackhy.com/79860.htm
