Home > Developer > Web Develop
I did a jquery-based vertical drop-down level two menu function, looking directly at the graph:
The code for HTML is as follows:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title>Vertical drop-down menu</title> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1"> <Linkrel= "stylesheet"href= "Css/style.css"Media= "Screen"type= "Text/css" /></Head><Body>Accordion<Divstyle= "Text-align:center;clear:both"></Div> <!--Contenedor - <DivID= "Page-sidebar-menu"class= "Page-sidebar-menu"> <Pclass= "Tab-link"><aclass= "Left-a"href= "javascript:void (0)"title= "System Log">System Log 1</a></P> <ulclass= "submenu"> <Li><ahref="#">Photoshop1</a></Li> <Li><ahref="#">HTML1</a></Li> <Li><ahref="#">CSS1</a></Li> <Li><ahref="#">Maquetacion Web1</a></Li> </ul> <Pclass= "Tab-link"><aclass= "Left-a"href= "javascript:void (0)"title= "System Log">System Log 2</a></P> <Pclass= "Tab-link"><aclass= "Left-a"href= "javascript:void (0)"title= "Real disk monitoring">Real-Disk monitoring 3</a></P> <ulclass= "submenu"> <Li><ahref="#">Photoshop3</a></Li> <Li><ahref="#">HTML3</a></Li> <Li><ahref="#">Css</a></Li> <Li><ahref="#">Maquetacion WEB3</a></Li> </ul> <Pclass= "Tab-link"><aclass= "Left-a"href= "javascript:void (0)"title= "Real disk monitoring">Real-Disk Monitoring 4</a></P> <ulclass= "submenu"> <Li><ahref="#">Photoshop4</a></Li> <Li><ahref="#">HTML4</a></Li> <Li><ahref="#">CSS4</a></Li> <Li><ahref="#">Maquetacion WEB4</a></Li> </ul> <Pclass= "Tab-link"><aclass= "Left-a"href= "javascript:void (0)"title= "Real disk monitoring">Real-Disk monitoring 5</a></P> <ulclass= "submenu"> <Li><ahref="#">Photoshop5</a></Li> <Li><ahref="#">HTML5</a></Li> <Li><ahref="#">CSS5</a></Li> <Li><ahref="#">Maquetacion WEB5</a></Li> </ul> </Div> <Scriptsrc= ' Js/jquery-1.10.2.js '></Script> <Scriptsrc= "Js/index.js"></Script></Body></HTML>
$ (function () {var Accordion = function (el, multiple) {This.el = el | | {}; This.multiple = Multiple | | False var links = this.el.find ('. Tab-link '); Links.on (' click ', {el:this.el, multiple:this.multiple}, This.dropdown)} Accordion.prototype.dropdown = function (E ) {var $el = E.data.el; $this = $ (this), $next = $this. Next (); if ($next. Find (' li '). Length ==0) {return false; } $next. Slidetoggle (); $next. Find (' Li '). Click (function () {$ (this). addclass (' Activeli '). Siblings (). Removeclass (' Activeli '); }); $this. Toggleclass (' open '); if (!e.data.multiple) {var oth = $el. Find ('. submenu '). not ($next); Oth.slideup (). Parent (). Removeclass (' open '); Oth.find (' Li '). Removeclass (' Activeli '); }; } var accordion = new Accordion ($ (' #page-sidebar-menu '), FALSE);});
CSS code:
div,p,ul,li{margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; Box-sizing:border-box;} UL li{List-style-type:none; }. Page-sidebar-menu. left-a {display:block; font-size:12px; Color: #03478b; Text-decoration:none; -webkit-transition:all 0.4s Ease; -o-transition:all 0.4s Ease; Transition:all 0.4s Ease; }. Page-sidebar-menu li.active {background: #bbbbbb; }. tab-link{padding:5px; MARGIN:2PX 0; Background-color: #E4EFFB; } p.active {background: #5A86A8; }. Page-sidebar-menu p.active A {color: #fff; }. submenu {display:none; Background: #444359; font-size:14px; }. submenu Li {border-bottom:1px solid #4b4a5e; }. submenu a {display:block; Text-decoration:none; Color: #d9d9d9; font-size:12px; padding:5px; -webkiT-transition:all 0.25s Ease; -o-transition:all 0.25s Ease; Transition:all 0.25s Ease; }. submenu A:hover {background: #E4EFFB; Color: #000; }
Because of the time in a hurry, then directly affixed to the code, live to see
jquery vertical drop-down level two menu
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
