Based on the drop-down menu on the left of the jquery website, the drop-down menu of the jquery website

Based on the drop-down menu on the left of the jquery website, the drop-down menu of the jquery website

JQuery code from the drop-down menu on the left side of the website. This is a blue style applicable to the background drop-down menu code. As follows:

Download Online Preview source code

Implementation Code:

<Div class = "container"> <div class = "leftsidebar_box"> <div class = "line"> </div> <dl class = "system_log"> <dt onClick = "changeImage () "> system record  </dt> <dd class =" first_dd "> <a href =" # "> recharge record </ a> </dd> <a href = "#"> SMS recharge record </a> </dd> <a href = "#"> consumption record </a> </dd> <a href = "#"> operation record </a> </dd> </dl> <dl class = "custom "> <dt onClick =" changeImage () "> customer management  </dt> <dd class =" first_dd "> <a href =" # "> customer management </ a> </dd> <a href = "#"> trial/deal customer management </a> </dd> <a href = "#"> unsold customer management </a> </dd> <a href = "#"> about to expire customer management </a> </dd> </dl> <dl class = "channel"> <dt> channel management  </dt> <dd class = "first_dd"> <a href = "#"> channel homepage </a> </dd> <a href = "#"> Channel standard management </a> </dd> <dd> <a href = "#"> system notification </a> </dd> <a href = "#"> channel vendor management </a> </dd> <dd> <a href = "#"> channel Vendor link </a> </dd> </dl> <dl class = "app"> <dt onClick = "changeImage () "> APP management  </dt> <dd class =" first_dd "> <a href =" # "> App carrier management </a> </dd> <a href = "#"> open interface management </a> </dd> <a href = "#"> interface Type management </a> </dd> </dl> <dl class = "cloud"> <dt> big data cloud platform  </dt> <dd class =" first_dd "> <a href =" # "> platform operator management </a> </dd> </dl> <dl class = "syetem_management"> <dt> system management  </dt> <dd class = "first_dd"> <a href = "# "> background user management </a> </dd> <a href =" # "> role management </a> </dd> <a href = "#"> customer type management </a> </dd> <a href = "#"> topic management </a> </dd> <dd> <a href = "#"> template group management on the official website </a> </dd> <a href = "#"> mall template management </a> </dd> <a href = "#"> microfunction management </a> </dd> <a href = "#"> change the User Password </a> </dd> </dl> <dl class = "source"> <dt> material library management  </dt> <dd class = "first_dd"> <a href = "#"> Image Library </a> </dd> <a href = "#"> Link Library </ a> </dd> <a href = "#"> promotion management </a> </dd> </dl> <dl class = "statistics"> <dt> statistical analysis  </dt> <dd class = "first_dd"> <a href = "#"> customer Statistics </ a> </dd> </dl> </div>

Css code:

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 ;}

Via: http://www.w2bc.com/Article/33084