一个简单的仿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包含文件)
menu.htm(菜单主文件)
此部分已经被顶部菜单条覆盖 |
信息提示区域
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包含文件)
一个简单的仿XP的JS下拉菜单
右键菜单的JS类
下拉菜单被FLASH遮住的解决办法
powerpoint2003的下拉菜单图解教程
30多个CSS和JS下拉菜单资源
仿蓝色理想网站的导航菜单
清除 IE地址栏 下拉菜单里 的东西
打造简洁的CSS菜单-菜单导航-网页特效-网站特效-特效代码-JS特效-javascrip...
在WEB项目中多维下拉菜单的实现技巧和方法
纯CSS的下拉菜单 支持IE6 IE7 Firefox _CSS教程_www.knowsk...
Excel设置数据有效性实现单元格下拉菜单的3种方法
10下拉菜单
下拉三级菜单
下拉三级菜单e
横向下拉菜单要
js仿键盘
下拉菜单被表单、图片、FLASH挡住的解决办法 - 游陆之家 Gis 之家 ArcGIS ...
五步让你的帝国拥有三级联动下拉菜单[超详细教程] 帝国cms - 安全、强大、稳定、灵活
XP和VISTA启动的高级选项菜单-硬件网络
DIV下拉式菜单1
DIV下拉式菜单111
[css]仿苹果系统os x的停放菜单:CSS Dock Menu
图片下拉选择器的制作:
JS+CSS实现的一个li:hover效果