js实现精美的银灰色竖排折叠菜单


Posted in Javascript onMay 16, 2015

本文实例讲述了js实现精美的银灰色竖排折叠菜单。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
javascript数组的使用
Mar 28 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
使用javascript插入样式
Mar 14 Javascript
Jquery中map函数的用法
Jun 03 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 Javascript
vue 给数组添加新对象并赋值
Apr 20 Vue.js
JavaScript实现鼠标滑过处生成气泡的方法
May 16 #Javascript
JavaScript中继承用法实例分析
May 16 #Javascript
jQuery实现不断闪烁文字的方法
May 15 #Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 #Javascript
JavaScript实现简单的数字倒计时
May 15 #Javascript
JavaScript生成福利彩票双色球号码
May 15 #Javascript
JavaScript实现列表分页功能特效
May 15 #Javascript
You might like
一个取得文件扩展名的函数
2006/10/09 PHP
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
php error_log 函数的使用
2009/04/13 PHP
告诉大家什么是JSON
2008/06/10 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
JavaScript访问样式表代码
2010/10/15 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
Python中的yield浅析
2014/06/16 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
学生党员思想汇报
2013/12/28 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
公司宣传语大全
2015/07/13 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
解除合同协议书范本
2016/03/21 职场文书