JS实现带有3D立体感的银灰色竖排折叠菜单代码


Posted in Javascript onOctober 20, 2015

本文实例讲述了JS实现带有3D立体感的银灰色竖排折叠菜单代码。分享给大家供大家参考,具体如下:

这是一款超酷的可以用到网页左侧的银灰色竖排多级折叠菜单,可以自己为菜单加一个背景,CSS中预留有代码,这是比较标准和经典的一款后台管理模式的菜单,Div+Css结构,符合标准,修改方便,挺不错。

运行效果截图如下:

JS实现带有3D立体感的银灰色竖排折叠菜单代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网页左边的竖式菜单</title>
<style>
body
{
background-color:#F3F3F3;
margin:0px;
font-size: 9pt;
background-position:center;
text-decoration: none;
scrollbar-face-color: #f6f6f6;
scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #EEEEEE; scrollbar-3dlight-color: #EEEEEE; scrollbar-arrow-color: 
#330000; scrollbar-track-color: #f6f6f6; scrollbar-darkshadow-color: #ffffff;
}
/* 网站链接总的css定义*/
a{text-decoration: underline;}
a:link {color: #595989;}
a:visited {color: #595989;} 
a:hover{color: #ff0000;} 
a:active {color: #595989;} 
.dt1, .dt2, .dt3, .dt4 ,.dt{
padding: 0px; margin: 0px; border: 0px; padding-left: 25px;
border-left: 5px solid #c0c0c0; 
border-top: 1px solid #ffffff; 
border-bottom: 1px solid #c0c0c0;
width: auto;text-align: left;
line-height: 26px;
height: 26px;
background: #E0E0E0;
cursor:pointer!important;
cursor:hand;
display:block;
}
/*这里可以加入背景图片
.dt1{
 background-image: url();
 background-repeat: no-repeat;
 background-position: right center;
}
.dt{
 background-image: url();
 background-repeat: no-repeat;
 background-position: 8px center;
}
.dt2{
 background-image: url();
 background-repeat: no-repeat;
 background-position: right center;
}
.dt4{
 background-image: url();
 background-repeat: no-repeat;
 background-position: right center;
}
.dt3{
 background-image: ur();
 background-repeat: no-repeat;
 background-position: right center;
}*/
#aboutbox { /*左侧box*/
padding: 0px; margin: 0px; border: 0px;
width: 190px; 
float: left;
background: #eee;
}
#aboutbox dl { /*dl、dt、dd*/
margin: 0px; border: 0px;
border: medium none; /*不显示边框*/
background:#eeeeee;
background-image: url();/*背景图像,这里省略了*/
background-repeat: repeat-y;
background-position: left;
clear: both;
}
#aboutbox dd {
padding: 0px; margin: 0px; border: 0px;
background: #eee;
border-top: 1px solid #fff;
border-left: 5px solid #e0e0e0;
padding-right:3px;
}
#aboutbox ul { /*ul、li定义*/
padding: 0px;
margin: 0px; 
border: 0px;
list-style-type: none; 
}
#aboutbox li {
padding: 0px; margin: 0px; border: 0px;
text-align: left;
text-indent: 10px;
list-style:none;
}
#aboutbox li a {
padding-left: 5px; margin: 0px; border: 0px;
display: block;
background: #eee;
font-weight: normal;height: 22px;line-height: 22px;
color: #000;
border: 1px solid #eee;
text-decoration: none;}
#aboutbox li a:link,#aboutbox li a:visited {height: 22px;line-height: 22px;}
#aboutbox li a:hover {
padding-left: 5px;
background-color: #e4e4e4;
border: 1px solid #999999;
color: #D90000;height: 22px;line-height: 22px;}
#aboutbox li a:active {color: #333333;height: 22px;line-height: 22px;background: #EEEEEE;}
.center_tdbgall /* 中部表格背景颜色 */
{
background:#ffffff;
}
</style>
</head>
<body>
<table class=center_tdbgall width="191" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width=191 rowspan="2" valign=top class=web_left_all>
  <div id=aboutbox>
  <dl>
 <dt class=dt1 id=dt1 onmouseover=showbg(1) onclick=showsubmenu(1) onmouseout=showoutbg(1)><B>网站动态</B>
  <dd id=submenu1>
  <ul>
  <LI><A href='#'>今日关注</A></LI>
  <LI><A href='#'>最新整理</A></LI>
  <LI><A href='#'>下载排行</A></LI>
  </ul>
  </dd>
 </dt>
 </dl>
 <dl>
 <dt class=dt2 id=dt2 onmouseover=showbg(2) onclick=showsubmenu(2) onmouseout=showoutbg(2)><B>管理新闻</B>
  <dd id=submenu2>
  <ul>
  <LI><A href='#'>新闻分类</A></LI>
  <LI><A href='#'>新闻列表</A></LI>
  <LI><A href='#'>审核新闻</A></LI>
  </ul>
  </dd>
 </dt>
 </dl>
<script>
function showsubmenu(sid){
 whichEl = eval('submenu' + sid);
 if (whichEl.style.display == 'none'){
 eval("submenu" + sid + ".style.display='';");
 eval("dt" + sid + ".className='dt2';");
 }
 else{
 eval("submenu" + sid + ".style.display='none';");
 eval("dt" + sid + ".className='dt1';");
 }
}
function showbg(sid){
 whichEl = eval('submenu' + sid);
 if (whichEl.style.display == 'none'){
 eval("dt" + sid + ".className='dt4';");
 }
 else{
 eval("dt" + sid + ".className='dt3';");
 }
}
function showoutbg(sid){
 whichEl = eval('submenu' + sid);
 if (whichEl.style.display == 'none'){
 eval("dt" + sid + ".className='dt1';");
 }
 else{
 eval("dt" + sid + ".className='dt2';");
 }
}
</script> 
 </div></TD>
</tr>
</table>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
浅析tr的隐藏和显示问题
Mar 05 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
网页中表单按回车就自动提交的问题的解决方案
Nov 03 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 #Javascript
js验证身份证号有效性并提示对应信息
Oct 19 #Javascript
详解JavaScript数组的操作大全
Oct 19 #Javascript
全系IE支持Bootstrap的解决方法
Oct 19 #Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 #Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 #Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 #Javascript
You might like
PHP insert语法详解
2008/06/07 PHP
PHP5常用函数列表(分享)
2013/06/07 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
jQuery 渐变下拉菜单
2009/12/15 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
AngularJS入门之动画
2016/07/27 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
Python类定义和类继承详解
2015/05/08 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
论文评语大全
2014/04/29 职场文书
宣传活动总结范文
2014/07/01 职场文书
教师个人读书活动总结
2014/07/08 职场文书
感恩主题班会教案
2015/08/12 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
教你如何用cmd快速登录服务器
2022/06/10 Servers