用css和js分别实现三级导航菜单

导航菜单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>-->

用css和js分别实现三级导航菜单相关推荐

JS+CSS实现漂亮实用的红色导航菜单
代码简介: 强烈推荐一款CSS导航菜单,用到政府学校类网站上超级不错,有点类似站长网菜单的味道,只不过颜色不一样而已,这种菜单还不是真正意义上的"下拉"菜单,应该叫滑出菜单吧?反正 ...
JS超级酷的导航菜单代码
代码简介: JS超级酷的导航菜单代码,类似WINDOWS风格的导航,又又立体效果,很不错的,赶快运行一下,一睹为快吧. 代码内容: <HTML> <HEAD> <TITL ...
java 三级菜单栏的添加_[Java教程]jquery实现的三级导航菜单实例代码
[Java教程]jquery实现的三级导航菜单实例代码 0 2016-01-02 15:00:02 jquery实现的三级导航菜单实例代码: 使用最多的可能是二级导航菜单,所以网上的代码一大堆,三级菜 ...
html根据菜单角色配置菜单代码,CSS设置列表样式和创建导航菜单实现代码
一.设置列表的符号 list-style-type: 属性://设置列表样式 list-style-type: none; //清楚样式属性有很多可以自己去试:circle,disc,decimal ...
html导航栏圆角,纯css实现蓝色圆角效果水平导航菜单代码
纯css实现蓝色圆角效果水平导航菜单代码这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的'也很好,几乎兼容所有的浏览器. 运 ...
HTML如何实现多级水平导航栏,jQuery+css实现的蓝色水平二级导航菜单效果代码
本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格 ...
漂亮的CSS蓝色滑动门式的导航菜单
代码简介: CSS版相当漂亮的滑动门式导航菜单,蓝色系,立体效果,设计的非常精美,希望大家能够喜欢哦.主菜单分为二级,如果想多级,可以看看代码是如何调用的,分级后菜单结构更加明淅,用户体验更好. 代码 ...
php 菜单目录树,css实现的目录树型导航菜单
我这个导航效果是在纵向导航菜单制作的基础上,加入鼠标点击主目录的显示隐藏效果,修改的是DIV代码: onClick="document.getElementByIdx_x('child1') ...
CSS实现背景图片不规则的导航菜单
一般情况下导航菜单的背景图片都是比较有规则的,但是平时我们也会遇到很多背景图片形状不规则导航条(比如但鼠标移上的时候,背景图片不规则,本例只讨论此种类型),如下图所示: (图一) 当鼠标移上去的时候背 ...
一个css和js结合的下拉菜单，支持主流浏览器
首先声明: 本人尽管在web前端岗位干了好多年,但无奈岗位对技术要求不高.html,css用的比較多,JavaScript自己原创的非常少,基本都是copy改动,所以自己真正动手写时,发现基础非常不坚 ...

用css和js分别实现三级导航菜单

用css和js分别实现三级导航菜单相关推荐

最新文章

热门文章