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 相关文章推荐
setTimeout和setInterval的深入理解
Nov 08 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
vue中实现图片压缩 file文件的方法
May 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中的多态性[译]
2011/08/02 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
python批量同步web服务器代码核心程序
2014/09/01 Python
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
Python计算三角函数之asin()方法的使用
2015/05/15 Python
python查看FTP是否能连接成功的方法
2015/07/30 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
python用match()函数爬数据方法详解
2019/07/23 Python
详解Django CAS 解决方案
2019/10/30 Python
运动会演讲稿
2014/05/07 职场文书
职业规划实施方案
2014/06/10 职场文书
海洋科学专业求职信
2014/08/10 职场文书
社区志愿者活动方案
2014/08/18 职场文书
授权委托书
2014/09/17 职场文书
社区务虚会发言材料
2014/10/20 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
MySQL Server 层四个日志
2022/03/31 MySQL