基于jquery网站左侧下拉菜单
网站左侧下拉菜单jQuery代码。这是一款蓝色风格的适合做后台下拉菜单代码。效果图如下:
实现的代码:
<div class="container"> <div class="leftsidebar_box">
<div class="line"></div>
<dl class="system_log">
<dt onClick="changeImage()">系统记录<img src="data:images/left/select_xl01.png"></dt>
<dd class="first_dd"><a href="#">充值记录</a></dd>
<dd><a href="#">短信充值记录</a></dd>
<dd><a href="#">消费记录</a></dd>
<dd><a href="#">操作记录</a></dd>
</dl> <dl class="custom">
<dt onClick="changeImage()">客户管理<img src="data:images/left/select_xl01.png"></dt>
<dd class="first_dd"><a href="#">客户管理</a></dd>
<dd><a href="#">试用/成交客户管理</a></dd>
<dd><a href="#">未成交客户管理</a></dd>
<dd><a href="#">即将到期客户管理</a></dd>
</dl> <dl class="channel">
<dt>渠道管理<img src="data:images/left/select_xl01.png"></dt>
<dd class="first_dd"><a href="#">渠道主页</a></dd>
<dd><a href="#">渠道标准管理</a></dd>
<dd><a href="#">系统通知</a></dd>
<dd><a href="#">渠道商管理</a></dd>
<dd><a href="#">渠道商链接</a></dd>
</dl> <dl class="app">
<dt onClick="changeImage()">APP管理<img src="data:images/left/select_xl01.png"></dt>
<dd class="first_dd"><a href="#">App运营商管理</a></dd>
<dd><a href="#">开放接口管理</a></dd>
<dd><a href="#">接口类型管理</a></dd>
</dl> <dl class="cloud">
<dt>大数据云平台<img src="data:images/left/select_xl01.png"></dt>
<dd class="first_dd"><a href="#">平台运营商管理</a></dd>
</dl> <dl class="syetem_management">
<dt>系统管理<img src="data:images/left/select_xl01.png"></dt>
<dd class="first_dd"><a href="#">后台用户管理</a></dd>
<dd><a href="#">角色管理</a></dd>
<dd><a href="#">客户类型管理</a></dd>
<dd><a href="#">栏目管理</a></dd>
<dd><a href="#">微官网模板组管理</a></dd>
<dd><a href="#">商城模板管理</a></dd>
<dd><a href="#">微功能管理</a></dd>
<dd><a href="#">修改用户密码</a></dd>
</dl> <dl class="source">
<dt>素材库管理<img src="data:images/left/select_xl01.png"></dt>
<dd class="first_dd"><a href="#">图片库</a></dd>
<dd><a href="#">链接库</a></dd>
<dd><a href="#">推广管理</a></dd>
</dl> <dl class="statistics">
<dt>统计分析<img src="data:images/left/select_xl01.png"></dt>
<dd class="first_dd"><a href="#">客户统计</a></dd>
</dl> </div> </div>
css代码:
body{margin:;padding:;overflow-x:hidden;}
html, body{height:100%;}
img{border:none;}
*{font-family:'微软雅黑';font-size:12px;color:#626262;}
dl,dt,dd{display:block;margin:;}
a{text-decoration:none;} #bg{background-image:url(images/content/dotted.png);}
.container{width:100%;height:100%;margin:auto;} /*left*/
.leftsidebar_box{width:160px;height:auto !important;overflow:visible !important;position:fixed;height:100% !important;background-color:#3992d0;}
.line{height:2px;width:100%;background-image:url(images/left/line_bg.png);background-repeat:repeat-x;}
.leftsidebar_box dt{padding-left:40px;padding-right:10px;background-repeat:no-repeat;background-position:10px center;color:#f5f5f5;font-size:14px;position:relative;line-height:48px;cursor:pointer;}
.leftsidebar_box dd{background-color:#317eb4;padding-left:40px;}
.leftsidebar_box dd a{color:#f5f5f5;line-height:20px;}
.leftsidebar_box dt img{position:absolute;right:10px;top:20px;}
.system_log dt{background-image:url(images/left/system.png)}
.custom dt{background-image:url(images/left/custom.png)}
.channel dt{background-image:url(images/left/channel.png)}
.app dt{background-image:url(images/left/app.png)}
.cloud dt{background-image:url(images/left/cloud.png)}
.syetem_management dt{background-image:url(images/left/syetem_management.png)}
.source dt{background-image:url(images/left/source.png)}
.statistics dt{background-image:url(images/left/statistics.png)}
.leftsidebar_box dl dd:last-child{padding-bottom:10px;}
via:http://www.w2bc.com/Article/33084
基于jquery网站左侧下拉菜单的更多相关文章
- 基于jQuery动画二级下拉导航菜单
春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=" ...
- jquery实现多级下拉菜单
支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...
- 基于jQuery美化联动下拉选择框
今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
- 基于CSS3金属风格下拉菜单
基于CSS3金属风格下拉菜单,css,金属风格,下拉菜单,CSS3导航. css3按钮:http://www.huiyi8.com/css3/anniu/
- jQuery+Superfish制作下拉菜单
superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官 ...
- js和jQuery写简单下拉菜单
1.jQuery写法 <head> <meta http-equiv="Content-Type" content="text/html; charse ...
- JQuery设置获取下拉菜单选项的值 多实例
分享下JQuery如何设置获取下拉菜单某个选项的值,多种方法,值得收藏. JQuery获取和设置Select选项 获取Select :获取select 选中的 text :$(“#ddlRegType ...
- jQuery cxSelect 联动下拉菜单
插件简介 cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市.商品分类等联动菜单. 列表数据通过 AJAX 获取,也可以自定义,数据内容使用 JSON 格式. 同时兼容 Zepto ...
- jquery 只有二级下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 批处理文件:将目录下所有的jar文件都加到CLASSPATH
简便写法如下: 代码 : @echo off SetLocal EnableDelayedExpansion FOR %%i IN ("XXX\lib\*.jar") DO SET ...
- NFS详解
00.什么是 NFS (Network FileSystem) NFS 就是 Network FileSystem 的缩写,最早之前是由 sun这家公司所发展出来的. 他最大的功能就是可以透过网络,让 ...
- MassiGra045 简体中文化|打开图片很快
MassiGra045 简体中文化,是一款对图片的打开预览很高效的工具,据传是日本开发的. 本人之前一直使用,唯一有点缺点就是不能旋转图片. 图片预览 峰回路转: http://pan.baidu.c ...
- Spring(十二)使用Spring的xml文件配置方式实现AOP
配置文件与注解方式的有非常大不同,多了非常多配置项. beans2.xml <?xml version="1.0" encoding="UTF-8"? & ...
- 笔记本连接老式显示器(VGA线+HDMI接口)
参考:http://www.cnblogs.com/me115/p/3970945.html
- .net连接MySQL的方法
摘自:http://www.cnblogs.com/huayangmeng/archive/2011/04/06/2006866.html 最近要用C#做一个东西,连接之前项目的数据库(用MySQL建 ...
- 漫谈Github与开源,Git介绍以及Git的思想和基本工作原理 Git工作流程
漫谈Github与开源 文字亮点: 为什么这些优秀的工程师会开源自己的项目? 因为开源是一种精神. 无数的软件开发者苦心积虑保护自己的代码不被破解,而还是被聪明绝顶的脚本小子破解了,但破解无数软件的脚 ...
- php数据库操作类(转)
<?php Class DB { private $link_id; private $handle; private $is_log; private $t ...
- python学习笔记——多进程中的锁Lock
1 进程锁 python编程中,引入了对象互斥锁的概念,来保证共享数据操作的完整性. 每个对象都对应于一个可称为“互斥锁”的标记,这个标记用来保证在任一时刻,只能有一线程访问对象. 在python中我 ...
- JMeter ----请求数据参数设置-自动增长变量
使用Jmeter性能测试的时候, 需要录入一些测试数据, 当这些数据要插入数据库的时候, 数据库通常会要求数据不能重复, 所以无法使用同一个数据反复进行测试, 这时候就需要在每次请求的时候使用不同的请 ...