实现简易导航下拉菜单功能

模仿对象图片

由于新手上路，我们只实现具体的下拉菜单功能即可。

一、理清楚实现导航下拉菜单功能所涉及的知识点：

链接 + 无序列表 + 事件监听 + 事件委托/事件代理

二、1.先拉起框架
<!DOCTYPE html> > <html lang="en"> > <head> > <meta charset="UTF-8" /> > <meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>下拉菜单</title>

</head>

<body>
<ul id="nav">
<li><img src="imgs/logo.png" alt="" /></li>
<li><a href="">首页</a></li>
<li><a href="">视频教程</a></li>
<li><a href="">入门教程</a></li>
<li><a href="">社区问答</a></li>
<li>
<a href="">技术文章</a>
<ul>
<li><a href="">头条</a></li>
<li><a href="">博客</a></li>
<li><a href="">PHP教程</a></li>
<li><a href="">PHP框架</a></li>
</ul>
</li>
<li>
<a href="">资源下载</a>
<ul>
<li><a href="">PHP工具</a></li>
<li><a href="">在线手册</a></li>
<li><a href="">学习课件</a></li>
<li><a href="">网站源码</a></li>
</ul>
</li>
<li>
<a href="">编程词典</a>
<ul>
<li>php词典</li>
<li>原生手册</li>
<li>mysql词典</li>
<li>html词典</li>
</ul>
</li>
<li><a href="">工具下载</a></li>
<li><a href="">php培训</a></li>
<li class="pic_1"><img src="imgs/user_avatar.jpg" alt="" /></li>
</ul>
</body>
</html>

浏览器显示效果

2.编写 css 样式（装饰一波）

<style>
/* 元素样式初始化: 学到盒模型再详细介绍 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 去掉所有a链接的下划线，且设置字体颜色 */
a {
/* color: rgba(255, 255, 255, 0.7); */
color: #bbb;
text-decoration: none;
}
/* 给图片设置高度，因为图片本身的高度可能影响布局 */
img {
height: 60px;
}
/* 给导航条设置黑色背景，高度，宽度，行高*/
#nav {
background-color: black;
height: 60px;
line-height: 60px;
width: 100%;
}
/* 去掉列表标记,上下10px外边距，向左浮动*/
li {
list-style: none;
margin: 0 10px;
float: left;
}
/* 光标移动到文本上，字体高亮显示 */
#nav > li > a:hover {
color: white;
}

/* 将父级设置为子菜单的定位容器,即转为定位元素即可 */
#nav > li {
position: relative;
margin: 0 20px;

}
/* 给下拉菜单设置边框属性及定位 */
#nav > li > ul {
position: absolute;
top: 50px;
width: 185px;
border: 1px solid #aaa;
border-top: none;
}
#nav > li > ul > li a {
display: inline-block;
height: 50px;
line-height: 50px;
color: #444;
}
/* ul.sub li:hover {
background-color: #eee;
} */
/* 设置头像图片向右浮动 */
.pic_1 {
float: right;
}
/* 给头像图片设置圆角及位置 */
.pic_1 img {
border-radius: 50%;
width: 40px;
height: 40px;
margin-top: 10px;
}

/* 初始化时不要显示子菜单 */
#nav > li > ul {
display: none;
}
</style>

浏览器显示效果：

3.添加 javascript 脚本代码实现下拉菜单功能

<script>
//获取所有的主导航
const navs = document.querySelectorAll("#nav > li");
navs.forEach(function (nav) {
//鼠标移入时：显示子菜单
nav.addEventListener("mouseover", showSubMenu);
//鼠标移出时：关闭子菜单
nav.addEventListener("mouseout", colseSubMenu);
});
//显示子菜单
function showSubMenu(ev) {
// console.log(ev.target);
//当前这个导航有没有子菜单？
if (ev.target.nextElementSibling !== null) {
ev.target.nextElementSibling.style.display = "block";
}
}
//关闭子菜单
function colseSubMenu(ev) {
//当前这个导航有没有子菜单？
if (ev.target.nodeName == "A" && ev.target.nextElementSibling !== null) {
ev.target.nextElementSibling.style.display = "none";
}
}
</script>

最终实现效果

后续会根据学到的新知识完善导航条更多功能！

实现简易导航下拉菜单功能