[科技]基于jquery網站左側下拉菜單
網站左側下拉菜單jQuery代碼。這是一款藍色風格的適合做后臺下拉菜單代碼。效果圖如下:
實現的代碼:
<div class="container"> <div class="leftsidebar_box"> <div class="line"></div> <dl class="system_log"> <dt onClick="changeImage()">系統記錄<img src="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="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="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="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="images/left/select_xl01.png"></dt> <dd class="first_dd"><a href="#">平臺運營商管理</a></dd> </dl> <dl class="syetem_management"> <dt>系統管理<img src="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="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="images/left/select_xl01.png"></dt> <dd class="first_dd"><a href="#">客戶統計</a></dd> </dl> </div> </div>
css代碼:
body{margin:0;padding:0;overflow-x:hidden;} html, body{height:100%;} img{border:none;} *{font-family:'微軟雅黑';font-size:12px;color:#626262;} dl,dt,dd{display:block;margin:0;} 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;}