js+css實現三級導航選單
阿新 • • 發佈：2021-08-20
本文例項為大家分享了+實現三級導航選單的具體程式碼caSaCCJq，供大家參考，具體內容如下
導航選單hover事件用css實現相對容易，只需要將透明度更改即可，如果想要選單有一個漸變的效果，然而可惜的是transition並不支援display，所以用opacity實現效果完全相同。
下面是用css實現的完整程式碼：
<!DOCTYPE html> <html> <head> <meta chacaSaCCJqrset="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.5
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。