js+css实现三级导航菜单
本文实例为大家分享了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>-->
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)