滑动门菜单技术

人生是读出来的

地球在运动我却没有动

大 | 中 | 小

[

2007/05/18 12:45 | by intohard ]

一个JS+CSS+DIV的滑动菜单技术。
CSS、JS、Html分别列出。

CSS部分：

body {font-size:12px;font-family:宋体}   
ul.TabBarLevel1{   
list-style:none;   
margin:0;   
padding:0;   
height:29px;   
background-image:url(/articleimg/2006/04/3363/tabbar_level1_bk.gif);   
}   
ul.TabBarLevel1 li{   
float:left;   
padding:0;   
height:29px;   
margin-right:1px;   
background:url(/articleimg/2006/04/3363/tabbar_level1_slice_left_bk.gif) left top no-repeat;   
}   
ul.TabBarLevel1 li a{   
display:block;   
line-height:29px;   
padding:0 20px;   
color:#333;   
background:url(/articleimg/2006/04/3363/tabbar_level1_slice_right_bk.gif) rightright top no-repeat;   
whitewhite-space: nowrap;   
}   
ul.TabBarLevel1 li.Selected{   
background:url(/articleimg/2006/04/3363/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat;   
}   
ul.TabBarLevel1 li.Selected a{   
background:url(/articleimg/2006/04/3363/tabbar_level1_slice_selected_right_bk.gif) rightright top no-repeat;   
}   
 
ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{   
color:#333;   
}   
ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{   
color:#F30;   
text-decoration:none;   
}   
ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{   
color:#000;   
}   
ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{   
color:#F30;   
text-decoration:none;   
}   
div.HackBox {   
padding : 2px 2px ;   
border-left: 2px solid #6697CD;   
border-right: 2px solid #6697CD;   
border-bottom: 2px solid #6697CD;   
display:none;   
}