手风琴菜单
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原生javascript手风琴导航</title></head>
<link rel="stylesheet" type="text/css" href="css.css">
<body>
<div id="box">
<ul>
<li>
<div class="nav_title"><span class="span1">One</span></div>
<ul class="nav_content">
<li><a href="#">内容1</a> </li>
<li><a href="#">内容1</a> </li>
<li><a href="#">内容1</a> </li>
</ul>
</li>
<li>
<div class="nav_title"><span class="span1">Two</span></div>
<ul class="nav_content">
<li><a href="#">内容2</a> </li>
<li><a href="#">内容2</a> </li>
<li><a href="#">内容2</a> </li>
</ul>
</li>
<li>
<div class="nav_title"><span class="span1">Three</span></div>
<ul class="nav_content">
<li><a href="#">内容3</a> </li>
<li><a href="#">内容3</a> </li>
<li><a href="#">内容3</a> </li>
</ul>
</li>
</ul>
</div>
<script src="squeezebox.js"></script>
</body>
</html>
css
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
display: block;
color: black;
text-align: center;
}
body{
background-color: rgb(45,44,65);
}
#box{
margin: 50px auto;
height: auto;
width: 200px;
border-radius: 5px;
background-color: white;
}
span{
line-height: 40px;
}
.nav_title{
height: 40px;
text-align: center;
border-bottom: 1px solid grey;
cursor: pointer;
}
a:hover{
background-color: pink;
}
.nav_content li{
line-height: 40px;
border-bottom: 1px solid grey;
cursor: pointer;
}
/**/
.nav_content{
overflow: hidden;
background-color: rgba(0,0,0,0.7);
}
javascript
addLoadEvent(spanHover)
function addLoadEvent(func) {
var oldonload=window.onload;
if(typeof window.onload!="function")
{
window.onload=func;
}
else{
window.onload=function () {
oldonload();
func();
}
}
}
function spanHover() {
var nav_tit=document.getElementsByClassName("nav_title");
var ul_content=document.getElementsByClassName("nav_content")
var span1=document.getElementsByClassName("span1");
for(var i=0;i<ul_content.length;i++)
{
ul_content[i].style.height=0+"px";
}
nav_tit[0].onclick=function(){
back(0);
}
nav_tit[1].onclick=function(){
back(1);
}
nav_tit[2].onclick=function(){
back(2);
}
nav_tit[0].onmouseover=function () {
span1[0].style.color="red";
span1[1].style.color="black";
span1[2].style.color="black";
move(0);
}
nav_tit[1].onmouseover=function () {
span1[1].style.color="red";
span1[0].style.color="black";
span1[2].style.color="black";
move(1);
}
nav_tit[2].onmouseover=function () {
span1[2].style.color="red";
span1[1].style.color="black";
span1[0].style.color="black";
move(2);
}
}
function back(i) {
var ul_content=document.getElementsByClassName("nav_content");
var h=parseInt(ul_content[i].style.height);
var nav_tit=document.getElementsByClassName("nav_title");
var span1=document.getElementsByClassName("span1");
if(ul_content[i].style.index)
{
clearInterval(ul_content[i].style.index);
}
if(ul_content[i].style.index1)
{
clearInterval(ul_content[i].style.index1);
}
var speed=Math.ceil(h/10);
var ss=parseInt(ul_content[i].style.height);
ss=ss-speed;
ul_content[i].style.height=ss+"px";
if(parseInt(ul_content[i].style.height)==0)
{
span1[i].style.color="black";
return;
}
ul_content[i].style.index1=setInterval(function () {
back(i);
},30)
}
function move(i) {
var ul_content=document.getElementsByClassName("nav_content");
var nav_tit=document.getElementsByClassName("nav_title");
var h=parseInt(ul_content[i].style.height);
if(ul_content[i].style.index)
{
clearInterval(ul_content[i].style.index);
}
var speed=Math.ceil((123-h)/10);
h=h+speed;
for(var k=0;k<ul_content.length;k++)
{
if(k==i)
{
ul_content[i].style.height=h+"px";
}
else
{
if(ul_content[k].style.index)
{
clearInterval(ul_content[k].style.index);
}
var ss=parseInt(ul_content[k].style.height);
if(ss!=0)
{
ss=ss-speed;
ul_content[k].style.height=ss+"px";
}
}
}
if(parseInt(ul_content[i].style.height)>=123)
{
return;
}
ul_content[i].style.index=setInterval(function () {
move(i);
},30)
}
