js+css實現(xiàn)三級導航菜單
更新時間：2021年08月19日 09:57:55 作者：supertianjia
這篇文章主要為大家詳細介紹了js+css實現(xiàn)三級導航菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js+css實現(xiàn)三級導航菜單的具體代碼，供大家參考，具體內(nèi)容如下
導航菜單hover事件用css實現(xiàn)相對容易，只需要將透明度更改即可，如果想要菜單有一個漸變的效果，然而可惜的是transition并不支持display，所以用opacity實現(xiàn)效果完全相同。
下面是用css實現(xiàn)的完整代碼：
<!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實現(xiàn)的相對麻煩一點，但也可以，代替了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>-->
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JS實現(xiàn)微信 "炸屎"大作戰(zhàn),本文通過實例代碼圖文展示給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-07-07
這篇文章主要介紹了js+css實現(xiàn)tab菜單切換效果的方法,以實例形式完整講述了css與js的實現(xiàn)代碼,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
TypeScript是JavaScript的一個超集,主要提供了類型系統(tǒng)和對ES6+的支持,TypeScript的核心原則之一是對值所具有的結構進行類型檢查,這篇文章主要給大家介紹了關于Typescript學習之接口interface的相關資料,需要的朋友可以參考下2024-03-03
所謂的文本框倒敘輸入是指輸入框的焦點始終在最開始的位置，下面是具體的實現(xiàn)，感興趣的朋友可以學習下2014-09-09
本文主要為大家詳細介紹了如何利用JS+Canvas實現(xiàn)自定義頭像功能，文中的示例代碼講解詳細，對我們學習有一定的幫助，感興趣的小伙伴可以了解一下2022-06-06![[JS]點出統(tǒng)計器](http://img.jbzj.com/images/xgimg/bcimg5.png)
[JS]點出統(tǒng)計器...2006-07-07
BootStrap Table后臺分頁時前臺刪除最后一頁所有數(shù)據(jù)refresh刷新后無數(shù)據(jù)問題
這篇文章主要介紹了BootStrap Table后臺分頁時前臺刪除最后一頁所有數(shù)據(jù)refresh刷新后無數(shù)據(jù)問題,需要的朋友可以參考下2016-12-12
javascript設計模式 – 工廠模式原理與應用實例分析
這篇文章主要介紹了javascript設計模式 – 工廠模式,結合實例形式分析了javascript工廠模式基本概念、原理、定義、應用場景及相關操作注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了詳解JavaScript 浮點數(shù)運算的精度問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
下面小編就為大家?guī)硪黄狫S創(chuàng)建數(shù)組的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07