怀旧编程之原生js实现简易导航栏
原生js写的简易导航栏，怀旧一下，二级标题的内边距设为0是为了与一级标题对齐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#navigation ul li {
list-style-type: none;
float: left;
padding: 5px;
font-size: 20px;
width: 100px;
color: rgb(21, 78, 66);
}
.sec_ul {
display: none;
padding: 0px;
}
</style>
<body>
<div id = "all">
<nav id = "navigation">
<ul>
<li class="top_a" name = "1_1">
一级标题
<ul id = "1_1" class = "sec_ul">
<li>二级标题</li>
<li>二级标题</li>
<li>二级标题</li>
</ul>
</li>
<li class="top_a" name = "1_2">
一级标题
<ul id = "1_2" class = "sec_ul">
<li>二级标题</li>
<li>二级标题</li>
<li>二级标题</li>
</ul>
</li>
<li class="top_a" name = "1_3">
一级标题
<ul id = "1_3" class = "sec_ul">
<li>二级标题</li>
<li>二级标题</li>
<li>二级标题</li>
</ul>
</li>
<li class="top_a" name = "1_4">
一级标题
<ul id = "1_4" class = "sec_ul">
<li>二级标题</li>
<li>二级标题</li>
<li>二级标题</li>
</ul>
</li>
<li class="top_a" name = "1_5">
一级标题
<ul id = "1_5" class = "sec_ul">
<li>二级标题</li>
<li>二级标题</li>
<li>二级标题</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
<script type="text/javascript">
var sw = screen.availWidth
var sh = screen.availHeight
document.getElementById("all").style.marginLeft = 20 + "px"
document.getElementById("all").style.width = sw - 55 + "px"
document.getElementById("all").style.height = sh - 125 + "px"
var navi = document.getElementsByClassName("top_a")
for (var i = 0; i < navi.length; i++) {
navi[i].onmouseover = function() {
var e = document.getElementById(this.getAttribute("name"))
e.style.display = "inline-block"
}
navi[i].onmouseleave = function() {
var e = document.getElementById(this.getAttribute("name"))
e.style.display = "none"
}
}
</script>
</html>
