本文实例讲述了JS&＃43;CSS实现经典的左侧竖向滑动菜单效果。分享给大家供大家参考。具体如下&＃xff1a;
这是一款经过改造的左侧竖向滑动菜单&＃xff0c;基于Javascript&＃43;CSS&＃xff0c;没有过多的修饰&＃xff0c;主要想实现菜单的动画效果&＃xff0c;想用的朋友&＃xff0c;自己美化吧。
运行效果截图如下&＃xff1a;
在线演示地址如下&＃xff1a;
具体代码如下&＃xff1a;
经过改造的左侧竖向滑动菜单
body{
margin:10px;
padding:10px;
}
a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red}
a:visited { text-decoration: none;color: green}
body,td,div,span,li{
font-size:12px;
}
.title01,.title02{
color:#00b;
font-weight:bold;
}
#DoorP{
width:200px;
height:300px;
padding:0px;
background:#FFFCF2;
}
.title01{
width:100%;
height:25px;
background:#FFFCF2;
cursor:pointer;
}
.title02{
width:100%;
height:25px;
background:#FFFCF2;
cursor:pointer;
}
.content{
background:#FFFCF2;
border-bottom:2px solid #fff;
overflow:hidden;
color:#666;
padding-left:4px;
padding-right:4px;
line-height:18px;
}
.curved {
width:202px;
}
.curved .b1, .curved .b2, .curved .b3, .curved .b4 {
font-size:1px;
display:block;
background:#FFFCF2;
overflow: hidden;
}
.curved .b1, .curved .b2, .curved .b3 {
height:1px;
}
.curved .b2, .curved .b3, .curved .b4 {
background:#FFFCF2;
border-left:1px solid #C7BC98;
border-right:1px solid #C7BC98;
}
.curved .b1 {
margin:0 4px;
background:#C7BC98;
}
.curved .b2 {
margin:0 2px;
border-width:0 2px;
}
.curved .b3 {
margin:0 1px;
}
.curved .b4 {
height:2px;
margin:0;
}
.curved .c1 {
margin:0 5px;
background:#C7BC98;
}
.curved .c2 {
margin:0 3px;
border-width:0 2px;
}
.curved .c3 {
margin:0 2px;
}
.curved .c4 {
height:2px;
margin: 0 1px;
}
.curved .boxcontent {
display:block;
background:transparent;
border-left:1px solid #C7BC98;
border-right:1px solid #C7BC98;
font-size:0.9em;
text-align:justify;
}
var open &＃61; 2;
var openState &＃61; new Array();
var closeState &＃61; new Array();
var dH &＃61; 220;
function $(id){
if(document.getElementById(id))
{
return document.getElementById(id);
}
else
{
alert("没有找到!");
}
}
function $tag(id,tagName){
return $(id).getElementsByTagName(tagName)
}
function closeMe(Cid,Oid){
var h &＃61; parseInt(Ds[Cid].style.height);
//alert(h);
if(h > 2)
{
h &＃61; h - Math.ceil(h/3);
Ds[Cid].style.height &＃61; h&＃43;"px";
}
else
{
openMe(Oid);
clearTimeout(closeState[Cid]);
return false;
}
closeState[Cid] &＃61; setTimeout("closeMe("&＃43;Cid&＃43;","&＃43;Oid&＃43;")");
}
function openMe(Oid){
var h &＃61; parseInt(Ds[Oid].style.height);
//alert(h);
if(h {
h &＃61; h &＃43; Math.ceil((dH-h)/3);
Ds[Oid].style.height &＃61; h&＃43;"px";
}
else
{
clearTimeout(openState[Oid]);
return false;
}
openState[Oid] &＃61; setTimeout("openMe("&＃43;Oid&＃43;")");
}
var Ds &＃61; $tag("DoorP","div");
var Ts &＃61; $tag("DoorP","table");
if(Ds.length !&＃61; Ts.length)
{
alert("标题和内容数目不相同!");
}
for(var i &＃61; 0 ; i {
if(i&＃61;&＃61;open)
{
Ds[i].style.height &＃61; dH&＃43;"px";
Ts[i].className&＃61;"title01";
}
else
{
Ds[i].style.height &＃61; "0px";
Ts[i].className&＃61;"title02";
}
Ts[i].value &＃61; i;
Ts[i].onclick &＃61; function(){
if(open&＃61;&＃61;this.value)
{
return false;
}
Ts[open].className&＃61;"title02";
Ts[this.value].className&＃61;"title01";
for(var i &＃61; 0 ; i {
clearTimeout(openState[i]);
clearTimeout(closeState[i]);
}
closeMe(open,this.value);
//openMe(this.value);
open &＃61; this.value;
}
}
function showDiv(id){
Ds[id].style.height&＃61;dH&＃43;"px";
Ds[open].style.height&＃61;"0px";
open &＃61; id;
}
希望本文所述对大家的Javascript程序设计有所帮助。
京公网安备 11010802041100号