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 相关文章推荐
一个JS翻页效果
Jul 23 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
javascript常用方法汇总
Dec 02 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
Angular的$http与$location
Dec 26 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 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开发者的10个技巧
2011/02/25 PHP
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
juqery 学习之四 筛选查找
2010/11/30 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
JQuery ZTree使用方法详解
2017/01/07 Javascript
jquery 手势密码插件
2017/03/17 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
javascript中的隐式调用
2018/02/10 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
Python中is和==的区别详解
2018/11/15 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
汉语言文学毕业生求职信
2013/10/01 职场文书
大学生专业个人学习的自我评价
2013/10/26 职场文书
工业设计专业推荐信
2013/10/29 职场文书
北体毕业生求职信
2014/02/28 职场文书
学生安全责任书模板
2014/07/25 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
荆州古城导游词
2015/02/06 职场文书
小学教师节活动总结
2015/03/20 职场文书
2015年助残日活动总结
2015/03/27 职场文书