[From] http://www.html5tricks.com/css3-ver-accordion-menu.html
We've shared a lot about accordion menus before, both horizontally and vertically. The CSS3 vertical accordion folding menu is also very good today, and this CSS3 accordion menu has a small icon for each item, and there can only be one expansion, and more interestingly, the arrows on the right side of the menu folding and unwinding will also have a good animation effect.
Online Demo Source Download
Let's take a look at the source code and implementation of this accordion folding menu, consisting mainly of HTML code, CSS code, and jquery code.
HTML code:
<ul id= "accordion" class= "accordion" ><li><div class= "link" ><i class= "fa Fa-paint-brush" > </i>dise?o web<i class= "fa fa-chevron-down" ></i></div><ul class= "submenu" ><li> <a href= "#" >photoshop</a></li><li><a href= "#" >HTML</a></li><li> <a href= "#" >css</a></li><li><a href= "#" >maquetacion web</a></li></ul ></li><li><div class= "link" ><i class= "fa fa-code" ></i>desarrollo front-end<i class= "FA fa-chevron-down" ></i></div><ul class= "submenu" ><li><a href= "#" > Javascript</a></li><li><a href= "#" >jquery</a></li><li><a href= "#" >frameworks javascript</a></li></ul></li><li><div class= "link" ><i class = "fa fa-mobile" ></i>dise?o responsive<i class= "fa Fa-chevron-down" ></i></div><UL class= "submenu" ><li><a href= "#" >tablets</a></li><li><a href= "#" > Dispositivos mobiles</a></li><li><a href= "#" >medios de escritorio</a></li>< Li><a href= "#" >otros dispositivos</a></li></ul></li><li><div class= " Link "><i class=" fa fa-globe "></i>posicionamiento web<i class=" fa Fa-chevron-down "></i> </div><ul class= "submenu" ><li><a href= "#" >google</a></li><li><a href = "#" >bing</a></li><li><a href= "#" >yahoo</a></li><li><a href= "#" >otros buscadores</a></li></ul></li></ul>
The list of UL and Li is used to achieve the hierarchical relationship of the menu.
CSS code:
. accordion {width:100%; max-width:360px; margin:30px auto 20px; background: #FFF;-webkit-border-radius:4px;-moz-bor der-radius:4px; border-radius:4px; }.accordion. Link {cursor:pointer;display:block;padding:15px 15px 15px 42px;color: #4D4D4D; font-size:14px; font-weight:700;border-bottom:1px solid #CCC;p osition:relative;-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s Ease;}. Accordion Li:last-child. link {border-bottom:0;}. Accordion Li I {position:absolute;top:16px;left:12px;font-size:18px;color: #595959;-webkit-transition:all 0.4s ease; -o-transition:all 0.4s ease;transition:all 0.4s Ease;}. Accordion Li I.fa-chevron-down {right:12px;left:auto;font-size:16px;}. Accordion Li.open. Link {color: #b63b4d;}. Accordion Li.open I {color: #b63b4d;}. Accordion Li.open I.fa-chevron-down {-webkit-transform:rotate (180deg);-ms-transform:rotate (180deg);-o-transform: Rotate (180deg); transform:rotate (180deg);} /** * submenu-----------------------------*/. submenu {display:none; background: #444359; font-size:14px;}. submenu Li {border-bottom:1px solid #4b4a5e ; }. submenu a {display:block; text-decoration:none; color: #d9d9d9; padding:12px; padding-left:42px;-webkit-transitio N:all 0.25s Ease; -o-transition:all 0.25s Ease; Transition:all 0.25s Ease; }. submenu A:hover {background: #b63b4d; color: #FFF;}
CSS code also has no features, mainly set the menu item drop-down animation and the effect of rounded corners.
jquery Code:
$ (function () {var Accordion = function (el, multiple) {This.el = el | | {};this.multiple = multiple | | false;//Variables Privadasvar links = this.el.find ('. link ');//Eventolinks.on (' click ', {el:this.el, multiple: This.multiple}, This.dropdown)}accordion.prototype.dropdown = function (e) {var $el = E.data.el; $this = $ (this), $next = $t His.next (); $next. Slidetoggle (); $this. Parent () Toggleclass (' open '), if (!e.data.multiple) {$el. Find ('. submenu '). Not ($next). Slideup (). Parent (). Removeclass (' Open ');};} var accordion = new Accordion ($ (' #accordion '), false);});
This part of the jquery code mainly implements the function of menu folding and collapsing, which is very simple.
[Turn] CSS3 vertical accordion Folding Menu