JS 新浪下拉菜单
作者：互联网
思考：首先在CSS布局上就出错了，导致后面设置JS时就有很大的问题
<!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>评论</li>
<li>@我</li>
</ul>
</div>
<div class="nav2">
<ul>
<li>博客评论</li>
<li>未读提醒</li>
</ul>
</div>
<div class="nav3">
<ul>
<li>免费邮箱</li>
<li>VIP邮箱</li>
<li>企业邮箱</li>
<li>新浪客户邮箱</li>
</ul>
</div>
</div>
<script>
//获得导航栏元素
var nav = document.querySelector('.nav')
//注册下拉事件点击的时候，对应的下拉菜单就是显示的（一一对应）因此需要索引号
//给na.children即下面的所有li设置自定义属性
//用不着，因为下面下拉菜单都进行了分别命名，但这样就不能用循环了
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')
//获取下拉菜单子元素
//应该用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>
下拉菜单的基本布局
导航栏里面的li都要有鼠标经过的效果，所以需要循环注册事件
<!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="#">微博</a>
<ul class="m1">
<li><a href="">私信</a>
</li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li><a href="">私信</a>
</li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul class="m1">
<li><a href="">私信</a>
</li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li><a href="">私信</a>
</li>
<li><a href="">评论</a></li>
<li><a href="">@我</a></li>
</ul>
</li>
</ul>
<script>
//获取元素
var nav = document.querySelector('.nav')
var lis = nav.children
//循环注册事件
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>未完成
注意用节点的方式获取元素
标签：style,0px,下拉菜单,display,nav,新浪,li,JS,children 来源： https://blog.csdn.net/qq_45387575/article/details/123098537