网页导航栏
网页展示：
编辑器制作效果展示：
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {padding: 0;margin: 0}
#d {width: 100%;height: 50px;background-color: #2B2B2B;min-width: 1000px}
#u {margin-left: 200px}
#d li {cursor: pointer;width: 120px;height: 50px;background-color: deepskyblue;margin-left: 20px;background-color: #2B2B2B;color: white;display: inline-block;text-align: center;line-height: 50px}
#d li:hover {color: white;background-color: #02B2B5}
#d li:last-child:hover::before {display: block}
#d li:last-child:hover a {display: block}
#d li:last-child {position: relative}
/*选项卡下拉实现*/
#d li:last-child::before {display: none;content: "";width: 0;height: 0;border: 10px solid transparent;border-bottom: 10px solid #02B2B5;position: absolute;top: 40px;left: 50px}
#d li:last-child a {text-decoration: none;color: white;display: none;width: 120px;height: 40px;background-color: #02B2B5;text-align: center;line-height: 40px;position: absolute;top: 60px;left: 0px}
.a {background-color: #02B2B5 !important}
</style>
</head>
<body>
<div id="d">
<ul id="u">
<li class="a">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5<a href="http://www.baidu.com">百度</a></li>
</ul>
</div>
<script>
// 选项卡点击功能实现
var oli = document.querySelectorAll("#u li");
for (let i = 0; i < oli.length; i++) {
oli[i].addEventListener("click", function () {
for (var j = 0; j < oli.length; j++) {
oli[j].className = ""
}
this.className = "a";
})
}
</script>
</body>
</html>
全部代码作于2019年-9月-21日
3616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
