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 相关文章推荐
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
JS实现星星海特效
Dec 24 Javascript
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
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
Angular实现form自动布局
2016/01/28 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
easy_install python包安装管理工具介绍
2013/02/10 Python
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
python中import学习备忘笔记
2017/01/24 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
电子专业毕业生自我鉴定
2014/01/22 职场文书
房产协议书范本2014
2014/09/30 职场文书
教师师德表现自我评价
2015/03/05 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
Python基础之pandas数据合并
2021/04/27 Python
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers