一个简单的仿XP的JS下拉菜单

来源:百度文库 编辑:神马文学网 时间:2024/04/30 19:11:48
一个简单的仿xp的js下拉菜单,本来想用在我的网站的后台管理,但后来发现不实用,还是采用了左右框架的树型菜单,但这个程序既然写出来了,贴出来,希望对其它人有用,有兴趣的朋友可以对快捷键功能进行扩展,目前留有接口,但未实现。
menu.htm(菜单主文件)


Noteless Valley(lijun.org)程序示例










此部分已经被顶部菜单条覆盖

信息提示区域




xp_menu.css(样式表)
body {
FONT-SIZE: 13px;
MARGIN: 0px;
SCROLLBAR-SHADOW-COLOR: silver;
SCROLLBAR-3DLIGHT-COLOR: silver;
LINE-HEIGHT: 20px;
FONT-FAMILY: Verdana, 宋体;
SCROLLBAR-DARKSHADOW-COLOR: silver;
BACKGROUND-COLOR: #ff99cc;
border: none;
}
DIV.MainMenuBG
{
border-right: teal 1px solid;
font-size: 14px;
border-left: #ffffff 1px solid;
cursor: default;
color: #000000;
border-bottom: teal 1px solid;
font-family: Verdana, 宋体;
position: absolute;
background-color: #d6d3ce;
}
DIV.MainMenu
{
border-right: #d6d3ce 1px solid;
padding-right: 8px;
border-top: #d6d3ce 1px solid;
padding-left: 8px;
padding-bottom: 1px;
border-left: #d6d3ce 1px solid;
cursor: default;
padding-top: 1px;
border-bottom: #d6d3ce 1px solid;
position: absolute;
background-color: #d6d3ce;
}
DIV.MainMenuOver
{
border-right: #08246b 1px solid;
padding-right: 8px;
border-top: #08246b 1px solid;
padding-left: 8px;
padding-bottom: 1px;
border-left: #08246b 1px solid;
cursor: default;
padding-top: 1px;
border-bottom: #08246b 1px solid;
position: absolute;
background-color: #b5bed6;
}
DIV.MainMenuClick
{
border-right: #636563 1px solid;
padding-right: 8px;
border-top: #636563 1px solid;
padding-left: 8px;
padding-bottom: 1px;
border-left: #636563 1px solid;
cursor: default;
padding-top: 1px;
border-bottom: #636563 1px solid;
position: absolute;
background-color: #dedbd6;
}
DIV.SubMenuBG
{
border-right: #636563 1px solid;
border-top: #636563 1px solid;
font-size: 14px;
visibility: hidden;
border-left: #636563 1px solid;
color: #000000;
border-bottom: #636563 1px solid;
font-family: Verdana, 宋体;
position: absolute;
background-color: #fffbf7;
}
DIV.SubMenu
{
cursor: default;
position: absolute;
}
DIV.SubMenuOver
{
cursor: default;
position: absolute;
}
TD.ico
{
border-top: #dedbd6 1px solid;
border-left: #dedbd6 1px solid;
border-bottom: #dedbd6 1px solid;
background-color: #dedbd6;
}
TD.icoOver
{
border-top: #08246b 1px solid;
border-left: #08246b 1px solid;
border-bottom: #08246b 1px solid;
background-color: #b5bed6;
border-right-width: 1px;
border-right-color: #08246b;
}
TD.text
{
padding-right: 2px;
border-top: #fffbf7 1px solid;
padding-left: 5px;
border-bottom: #fffbf7 1px solid;
background-color: #fffbf7;
}
TD.textOver
{
padding-right: 2px;
border-top: #08246b 1px solid;
padding-left: 5px;
border-bottom: #08246b 1px solid;
background-color: #b5bed6;
}
TD.skey
{
padding-right: 2px;
border-top: #fffbf7 1px solid;
padding-left: 2px;
border-bottom: #fffbf7 1px solid;
background-color: #fffbf7;
}
TD.skeyOver
{
padding-right: 2px;
border-top: #08246b 1px solid;
padding-left: 2px;
border-bottom: #08246b 1px solid;
background-color: #b5bed6;
}
TD.sub
{
border-right: #fffbf7 1px solid;
border-top: #fffbf7 1px solid;
border-bottom: #fffbf7 1px solid;
background-color: #fffbf7;
}
TD.subOver
{
border-right: #08246b 1px solid;
border-top: #08246b 1px solid;
border-bottom: #08246b 1px solid;
background-color: #b5bed6;
}
DIV.SubMenu TD
{
font-size: 14px;
padding-top: 2px;
}
xp_menu.js(.js包含文件)