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>-->
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。