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 相关文章推荐
javascript 常用功能总结
Mar 18 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 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+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
简单谈谈Python中函数的可变参数
2016/09/02 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
python实现支付宝转账接口
2019/05/07 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
python实现飞船大战
2020/04/24 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
python打包生成so文件的实现
2020/10/30 Python
如何用Django处理gzip数据流
2021/01/29 Python
汉森批发:Hansen Wholesale
2018/05/24 全球购物
财务助理岗位职责
2013/11/10 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
农业生产宣传标语
2014/10/08 职场文书
汇报材料怎么写
2014/12/30 职场文书
2015年项目工作总结
2015/04/29 职场文书
运动会开幕式致辞
2015/07/29 职场文书
PHP策略模式写法
2021/04/01 PHP
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技
redis lua限流算法实现示例
2022/07/15 Redis