复制代码 代码如下:
body
{
font-size:12px;
}
.menubox
{
width:50%;
height:auto;
margin:0 auto;
}
.menubox ul
{
margin:0px;
padding:0px;
}
.menubox ul li
{
float:left;
display:block;
width:18%;
height:30px;
line-height:25px;
list-style:none;
margin-right:1px;
}
.menubox ul li a
{
display:block;
width:100%;
height:100%;
background-color:black;
color:white;
text-decoration:none;
text-align:center;
}
.menubox ul li a:hover
{
display:block;
width:100%;
height:100%;
background-color:silver;
color:red;
text-decoration:none;
}
.menuselected
{
display:block;
width:100%;
height:100%;
background-color:silver;
color:red;
text-decoration:none;
}
.chidemenuforshow
{
width:200px;
position:absolute;
height:auto;
border:1px solid #ccc;
float:right;
background-color:silver;
}
html代码
复制代码 代码如下:
menu1
menu1
menu1
menu1
menu1
menu1
menu1
menu1
menu1
menu1
menu1
menu2
menu2
menu2
menu2
menu2
menu2
menu2
menu3
menu3
menu3
menu3
menu3
menu3
menu4
menu4
menu4
menu4
menu4
menu4
menu4
menu5
menu5
menu5
menu5
menu5
menu5
menu5
javascript代码
复制代码 代码如下:
/*
menu for javascript
author:mr·zhong
date:2010-01-25
*/
/*判断当前子菜单显示或隐藏*/
var menushoworhide = false;
$(function(){
setmenuid();
bindmenuhovereval();
bindchidemenuhovereval();
});
/*
设置主、子菜单按钮id
*/
function setmenuid(){
var id = 1;
$('#ul_menu a').each(function(){
$(this).attr(id,a_ + id);
var chideobj = $(this).next();
chideobj.attr(id,chidemenu_a_ + id);
chideobj.hide();
id++;
});
}
/*
设置菜单颜色样式
*/
function setmenucolor(menuid,isselected){
if(isselected) $(# + menuid).addclass(menuselected);
else $(# + menuid).removeclass(menuselected);
}
/*
设置子菜单显示或隐藏
*/
function showorhidechidemenu(menuid,isshow){
var obj = $(# + menuid);
if(isshow)
{
obj.slidedown(slow);
}
else obj.hide(slow);
}
/*
绑定主菜单鼠标事件
*/
function bindmenuhovereval(){
$(#ul_menu a).each(function(){
$(this).hover(function(){
showorhidechidemenu(chidemenu_ + $(this).attr(id),true);
menushoworhide = true;
},function(){
settimeout('hide(chidemenu_' + $(this).attr(id) +')',500);
});
});
}
/*
绑定子菜单鼠标事件
*/
function bindchidemenuhovereval(){
$(#ul_menu .chidemenuforshow).each(function(){
$(this).hover(function(){
menushoworhide = true;
},function(){
menushoworhide = false;
hide($(this).attr(id));
});
});
}
/*
隐藏子菜单
*/
function hide(id){
if(!menushoworhide) showorhidechidemenu(id,false);
}
下载地址:http://www.jb51.net/jiaoben/24160.html