js菜单

  <script type="text/javascript" src="./a.js"></script>
 <script type="text/javascript"> 
$(document).ready(function(){ 

$(".panel").click(function(){ 
$(".p2").slideToggle(500);//显示内容 
$(".t").hide();隐藏内容 
$(this).hide();隐藏按钮 
}); 
}); 
</script>

<style type="text/css"> 
a{ text-decoration: none;}
.flip 
{//按钮css 

float:left; 
width:300px;
height:35px;  
line-height:35px;
text-align:center;
color:#ffffff; 
background-color:red;
border-bottom:solid 1px #000000; 


} 
.top{
float:left;
padding-left:2%;	

padding-top:10%;
	
	
	
}
div.p
{//隐藏页面css 
height:120px; 


}
div.p3
{//隐藏页面css 

float:left; 
width:300px;
height:35px;  
line-height:35px;
text-align:center;
color:#ffffff; 
background-color:ffffff;
border-bottom:solid 1px #000000; 

}
div.p2
{//隐藏页面css 
height:120px; 
display:none; 

}
div.panel 
{//隐藏页面css 

float:left; 
width:300px;
height:35px;  
line-height:35px;
text-align:center;
color:#ffffff; 
background-color:0000FF;
border-bottom:solid 1px #000000; 

} 
div.panel2 
{//隐藏页面css 

float:left; 
width:300px;
height:35px;  
line-height:35px;
text-align:center;
color:#ffffff; 
background-color:#c3c3c3;
border-bottom:solid 1px #000000; 

} 
div.pane2
{//隐藏页面css 

float:left; 
width:300px;

height:35px;  
line-height:35px;
text-align:center;
color:#ffffff; 
background-color:0000FF;
border-bottom:solid 1px #000000; 
} 
div.pane3 
{//隐藏页面css 

float:left; 
width:300px;
height:35px;  
line-height:35px;
text-align:center;
color:#ffffff; 
background-color:0000FF;
border-bottom:solid 1px #000000; 

} 

</style> 
<div class="top">
<div class="flip">菜单</div> 
<div class="p3"> </div> 
<div class=p>
<a href="#"><div class="panel">个人信息</div></a>
<div class="p2">

<a href=""><div class="panel2">修改信息</div></a>

</div>
<a href=""><div class="pane2">修改密码</div></a>
<a href=""><div class="pane3">文章发布</div></a>
</div>
</div> 

评论

刷新

友情链接