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 submit()无法提交问题
Apr 21 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
js实现拖拽与碰撞检测
Sep 18 Javascript
js实现随机点名功能
Dec 23 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
mysql 搜索之简单应用
2007/04/27 PHP
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
python如何实现数据的线性拟合
2019/07/19 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
django自定义模板标签过程解析
2019/12/14 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
热能动力工程毕业生自荐信
2013/11/07 职场文书
学院书画协会部门岗位职责
2013/12/01 职场文书
临床医师专业个人自我评价
2014/01/08 职场文书
签约仪式主持词
2014/03/19 职场文书
仓库文员岗位职责
2014/04/06 职场文书
趣味运动会广播稿
2014/09/13 职场文书
停发工资证明范本
2015/06/12 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL