当前位置：首页 > 图灵资讯 > 技术篇> Java导航栏如何实现 javascript做导航栏代码
Java导航栏如何实现 javascript做导航栏代码
发布时间：2023-05-16 09:15:51
原生js写的简易导航栏，怀旧，二级标题的内边距设为0，与一级标题对齐。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<style>
#navigationulli{
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>
<pid="all">
<navid="navigation">
<ul>
<liclass="top_a"name="1_1">
一级标题
<ulid="1_1"class="sec_ul">
<li>二级标题</li>
<li>二级标题</li>
<li>二级标题</li>
</ul>
</li>
<liclass="top_a"name="1_2">
一级标题
<ulid="1_2"class="sec_ul">
<li>二级标题</li>
<li>二级标题</li>
<li>二级标题</li>
</ul>
</li>
<liclass="top_a"name="1_3">
一级标题
<ulid="1_3"class="sec_ul">
<li>二级标题</li>
<li>二级标题</li>
<li>二级标题</li>
</ul>
</li>
<liclass="top_a"name="1_4">
一级标题
<ulid="1_4"class="sec_ul">
<li>二级标题</li>
<li>二级标题</li>
<li>二级标题</li>
</ul>
</li>
<liclass="top_a"name="1_5">
一级标题
<ulid="1_5"class="sec_ul">
<li>二级标题</li>
<li>二级标题</li>
<li>二级标题</li>
</ul>
</li>
</ul>
</nav>
</p>
</body>
<scripttype="text/javascript">
varsw=screen.availWidth
varsh=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"
varnavi=document.getElementsByClassName("top_a")
for(vari=0;i<navi.length;i++){
navi[i].onmouseover=function(){
vare=document.getElementById(this.getAttribute("name"))
e.style.display="inline-block"
}
navi[i].onmouseleave=function(){
vare=document.getElementById(this.getAttribute("name"))
e.style.display="none"
}
}
</script>
</html>
