JavaScript模擬實(shí)現(xiàn)新浪下拉菜單效果
更新時(shí)間：2022年03月09日 11:06:31 作者：一夕ξ
這篇文章主要為大家介紹了如何通過JavaScript模擬實(shí)現(xiàn)新浪的下拉菜單效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手試一試
思考：首先在CSS布局上就出錯(cuò)了，導(dǎo)致后面設(shè)置JS時(shí)就有很大的問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav {
background-color: rgb(235, 225, 225);
line-height: 30px;
height: 30px;
position: relative;
}
ul {
margin: 0px 0px;
padding: 0 0 0 0;
}
.nav1 li,
.nav2 li,
.nav3 li {
display: block;
padding-left: 10px;
height: 20px;
padding-top: 5px;
padding-bottom: 5px;
border: 1px solid orange;
margin-top: -1px;
}
.nav1,
.nav2,
.nav3 {
display: none
}
.nav1 {
background-color: white;
width: 80px;
position: absolute;
top: 0px;
left: 0px
}
.nav2 {
background-color: white;
width: 100px;
position: absolute;
top: 0px;
left: 80px
}
.nav3 {
background-color: white;
width: 120px;
position: absolute;
top: 0px;
left: 160px
}
.nav div {
width: 80px;
text-align: center;
line-height: 30px;
float: left
}
.tort {
position: relative;
left: 0px
}
.se {
background-color: rgb(201, 192, 192);
color: orange
}
ul li:hover {
background-color: orange;
}
</style>
</head>
<body>
<div class="nav">
<div>微博</div>
<div>博客</div>
<div>郵箱</div>
</div>
<div class="tort">
<div class="nav1">
<ul>
<li>私信</li>
<li>評(píng)論</li>
<li>@我</li>
</ul>
</div>
<div class="nav2">
<ul>
<li>博客評(píng)論</li>
<li>未讀提醒</li>
</ul>
</div>
<div class="nav3">
<ul>
<li>免費(fèi)郵箱</li>
<li>VIP郵箱</li>
<li>企業(yè)郵箱</li>
<li>新浪客戶郵箱</li>
</ul>
</div>
</div>
<script>
//獲得導(dǎo)航欄元素
var nav = document.querySelector('.nav')
//注冊下拉事件點(diǎn)擊的時(shí)候，對應(yīng)的下拉菜單就是顯示的（一一對應(yīng)）因此需要索引號(hào)
//給na.children即下面的所有l(wèi)i設(shè)置自定義屬性
//用不著，因?yàn)橄旅嫦吕藛味歼M(jìn)行了分別命名，但這樣就不能用循環(huán)了
nav.children[0].setAttribute('data-index', '0')
nav.children[1].setAttribute('data-index', '1')
nav.children[2].setAttribute('data-index', '2')
var nav1 = document.querySelector('.nav1')
var nav2 = document.querySelector('.nav2')
var nav3 = document.querySelector('.nav3')
//獲取下拉菜單子元素
//應(yīng)該用data-index來獲取
// var tort = document.querySelector('.tort')
// nav1.setAttribute('data-idn', '0')
// nav2.setAttribute('data-idn', '1')
// nav3.setAttribute('data-idn', '2')
// var nn =
// console.log(nn)
//添加事件
for (var i = 0; i < nav.children.length; i++) {
nav.children[i].onmouseover = function() {
this.className = 'se'
}
nav.children[i].onmouseout = function() {
this.className = ''
}
//添加下拉菜單顯示屬性
}
// nav.children[0].onmouseover = function() {
// nav1.style.display = 'block'
// nav2.style.display = ''
// nav3.style.display = ''
// }
// nav.children[1].onmouseover = function() {
// nav2.style.display = 'block'
// nav1.style.display = ''
// nav3.style.display = ''
// }
// nav.children[2].onmouseover = function() {
// nav3.style.display = 'block'
// nav2.style.display = ''
// nav1.style.display = ''
// }
</script>
</body>
</html>
導(dǎo)航欄里面的li都要有鼠標(biāo)經(jīng)過的效果，所以需要循環(huán)注冊事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav li {
list-style: none;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: block;
position: absolute;
top: 41px;
left: 0px;
width: 100%;
border-left: 1px solid #fecc5b;
border-right: 1px solid #fecc5b
}
.nav ul li {
border-bottom: 1px solid #fecc5b;
}
.nav ul li a:hover {
background-color: #fff5da;
}
.m1 {
position: absolute;
top: 0px;
left: 0px;
}
.m1 {
position: absolute;
top: 0px;
left: 20px;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >微博</a>
<ul class="m1">
<li><a href="">私信</a>
</li>
<li><a href="">評(píng)論</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<li>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >微博</a>
<ul>
<li><a href="">私信</a>
</li>
<li><a href="">評(píng)論</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<li>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >微博</a>
<ul class="m1">
<li><a href="">私信</a>
</li>
<li><a href="">評(píng)論</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<li>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >微博</a>
<ul>
<li><a href="">私信</a>
</li>
<li><a href="">評(píng)論</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
</ul>
<script>
//獲取元素
var nav = document.querySelector('.nav')
var lis = nav.children
//循環(huán)注冊事件
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block'
}
lis[i].onmouseout = function() {
this.children[1].style.display = ''
}
}
</script>
</body>
</html>未完成
注意用節(jié)點(diǎn)的方式獲取元素
總歸是完成了，對于js設(shè)置的時(shí)候，不太合理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
list-style: none;
height: 20px;
line-height: 20px;
}
a {
text-decoration: none;
color: black
}
.nav0,
.nav1,
.nav2 {
position: relative;
width: 80px;
height: 82px;
padding-left: 0px;
float: left
}
.nav0>li,
.nav1>li,
.nav2>li {
background-color: rgb(221, 216, 216);
text-align: center;
}
.navv0,
.navv1,
.navv2 {
position: absolute;
top: 20px;
left: 0px;
border-top: 0px;
padding-left: 0px;
width: 80px;
margin-top: -1px;
display: none
}
.navv1 {
width: 100px
}
.navv2 {
width: 120px
}
.navv0 li,
.navv1 li,
.navv2 li {
border-bottom: 1px solid orange;
border-left: 1px solid orange;
border-right: 1px solid rgb(240, 169, 28);
padding-left: 5px
}
li:hover a {
/* 注意改變的是鏈接里面的文字顏色 */
color: orange
}
.nav0>li:hover,
.nav1>li:hover,
.nav2>li:hover {
/* 冒號(hào)hover前面不要加空格 */
background-color: rgb(138, 129, 129);
}
.navv0>li:hover,
.navv1>li:hover,
.navv2>li:hover {
/* 冒號(hào)hover前面不要加空格 */
background-color: rgb(236, 232, 203);
}
</style>
</head>
<body>
<ul class="nav0">
<li><a href="">微博</a></li>
<ul class="navv0">
<li><a href="">私信</a></li>
<li><a href="">評(píng)論</a></li>
<li><a href="">@我</a></li>
</ul>
</ul>
<ul class="nav1">
<li><a href="">博客</a></li>
<ul class="navv1">
<li><a href="">博客評(píng)論</a></li>
<li><a href="">未讀提醒</a></li>
</ul>
</ul>
<ul class="nav2">
<li><a href="">郵箱</a></li>
<ul class="navv2">
<li><a href="">免費(fèi)郵箱</a></li>
<li><a href="">VIP郵箱</a></li>
<li><a href="">企業(yè)郵箱</a></li>
<li><a href="">新浪客戶郵箱</a></li>
</ul>
</ul>
<script>
//鼠標(biāo)放在第一個(gè)大的nav中時(shí)，下拉欄就顯示,離開第一個(gè)大nav時(shí)后，下拉菜單就不顯示，這需要對第一個(gè)nav的盒子大小有要求，需要?jiǎng)偤冒褍?nèi)容
//獲取元素
var nav0 = document.querySelector('.nav0')
var navv0 = document.querySelector('.navv0')
//這三部分一起使用才行，首先鼠標(biāo)放在nav里面的第一個(gè)導(dǎo)航欄里面，下來菜單需要出現(xiàn)，鼠標(biāo)點(diǎn)在第一個(gè)下拉菜單時(shí)候，要保持出現(xiàn)，當(dāng)鼠標(biāo)離開整個(gè)nav的時(shí)候，下拉菜單隱藏
nav0.children[0].onmouseover = function() {
navv0.style.display = 'block'
// this.style.backgroundColor = 'rgb(211,211,211)' //沒必要這樣寫，直接寫hover屬性即可
// this.style.color = 'red'
}
navv0.onmouseover = function() {
navv0.style.display = 'block'
// nav0.children[0].style.backgroundColor = 'rgb(211,211,211)'
}
nav0.onmouseout = function() {
navv0.style.display = ''
// nav0.children[0].style.backgroundColor = 'rgb(221, 216, 216)'
}
// for (var i = 0; i < navv0.children; i++) {
// navv0.children[i].onmouseover = function() {
// console.log(11)
// // this.style.backgroundColor = 'orange'
// }
// }
var nav1 = document.querySelector('.nav1')
var navv1 = document.querySelector('.navv1')
nav1.children[0].onmouseover = function() {
navv1.style.display = 'block'
// this.style.backgroundColor = 'rgb(211,211,211)'
}
navv1.onmouseover = function() {
navv1.style.display = 'block'
// nav1.children[0].style.backgroundColor = 'rgb(211,211,211)'
}
nav1.onmouseout = function() {
navv1.style.display = ''
// nav1.children[0].style.backgroundColor = 'rgb(221, 216, 216)'
}
var nav2 = document.querySelector('.nav2')
var navv2 = document.querySelector('.navv2')
nav2.children[0].onmouseover = function() {
navv2.style.display = 'block'
// this.style.backgroundColor = 'rgb(211,211,211)'
}
navv2.onmouseover = function() {
navv2.style.display = 'block'
// nav1.children[0].style.backgroundColor = 'rgb(211,211,211)'
}
nav2.onmouseout = function() {
navv2.style.display = ''
// nav1.children[0].style.backgroundColor = 'rgb(221, 216, 216)'
}
</script>
</body>
</html>到此這篇關(guān)于JavaScript模擬實(shí)現(xiàn)新浪下拉菜單效果的文章就介紹到這了,更多相關(guān)JavaScript下拉菜單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
async表示異步,而await可以看作async wait,個(gè)人對async與await的簡單理解就是,我們可以用同步的方式去書寫異步代碼,這篇文章主要給大家介紹了關(guān)于JS中如何優(yōu)雅的使用async await的相關(guān)資料,需要的朋友可以參考下2021-10-10
Java遍歷集合方法分析（實(shí)現(xiàn)原理、算法性能、適用場合）
這篇文章主要介紹了Java遍歷集合方法分析（實(shí)現(xiàn)原理、算法性能、適用場合）的相關(guān)資料,需要的朋友可以參考下2016-04-04
計(jì)算文本域剩佘長度js，以前腳本之家也發(fā)過，這段代碼也算是比較簡單的一種實(shí)現(xiàn)方法。2010-10-10
通過onmouseover選項(xiàng)卡實(shí)現(xiàn)img圖片的變化
這篇文章主要介紹了通過onmouseover選項(xiàng)卡實(shí)現(xiàn)img圖片的變化,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了使用 JavaScript 制作頁面效果,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
JS實(shí)現(xiàn)六邊形3D拖拽翻轉(zhuǎn)效果的方法
這篇文章給大家分享一個(gè)利用javascript實(shí)現(xiàn)3D六邊形拖拽翻轉(zhuǎn)的效果實(shí)例，實(shí)現(xiàn)后的效果很贊，對大家的學(xué)習(xí)Javascript具有一定的參考借鑒價(jià)值，有需要的朋友們一起去來看看吧。2016-09-09
下面小編就為大家?guī)硪黄狫S去除空格和換行的正則表達(dá)式(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
JavaScript使用localStorage判斷設(shè)置值是否過期
本文主要介紹了JavaScript使用localStorage判斷設(shè)置值是否過期，通過設(shè)置過期時(shí)間，我們可以使用 setItemWithExpiration 函數(shù)將數(shù)據(jù)存儲(chǔ)到 localStorage 中，并使用 getItemWithExpiration 函數(shù)獲取數(shù)據(jù)并檢查是否過期，感興趣的可以了解一下2023-05-05
本文主要介紹了JavaScript?刪除數(shù)組元素的方法，包括操作方法改變了原數(shù)組和操作方法不改變原數(shù)組，具有一定的參考價(jià)值，感興趣的可以了解一下2024-02-02
在TypeScript中,我們可以使用Class來定義類,這使得我們能夠更加結(jié)構(gòu)化地組織代碼并使用面向?qū)ο蟮乃枷脒M(jìn)行開發(fā),本文小編將給大家詳細(xì)的總結(jié)一下TypeScript中Class類的基本語法,需要的朋友可以參考下2023-09-09