垂直手风琴折叠菜单 

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5 
 6   <meta charset="UTF-8">
 7 
 8   <title>CSS3垂直手风琴折叠菜单DEMO演示</title>
 9 
10   <meta name="viewport" content="width=device-width, initial-scale=1">
11     <!-- Iconos -->
12     <link href="css/font-awesome.min.css" rel="stylesheet">
13 
14     <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
15 
16 </head>
17 
18 <body>
19 
20     <!-- Contenedor -->
21     <ul id="accordion" class="accordion">
22         <li>
23             <div class="link"><i class="fa fa-paint-brush"></i>Diseño web<i class="fa fa-chevron-down"></i></div>
24             <ul class="submenu">
25                 <li><a href="#">Photoshop</a></li>
26                 <li><a href="#">HTML</a></li>
27                 <li><a href="#">CSS</a></li>
28                 <li><a href="#">Maquetacion web</a></li>
29             </ul>
30         </li>
31         <li>
32             <div class="link"><i class="fa fa-code"></i>Desarrollo front-end<i class="fa fa-chevron-down"></i></div>
33             <ul class="submenu">
34                 <li><a href="#">Javascript</a></li>
35                 <li><a href="#">jQuery</a></li>
36                 <li><a href="#">Frameworks javascript</a></li>
37             </ul>
38         </li>
39         <li>
40             <div class="link"><i class="fa fa-mobile"></i>Diseño responsive<i class="fa fa-chevron-down"></i></div>
41             <ul class="submenu">
42                 <li><a href="#">Tablets</a></li>
43                 <li><a href="#">Dispositivos mobiles</a></li>
44                 <li><a href="#">Medios de escritorio</a></li>
45                 <li><a href="#">Otros dispositivos</a></li>
46             </ul>
47         </li>
48         <li><div class="link"><i class="fa fa-globe"></i>Posicionamiento web<i class="fa fa-chevron-down"></i></div>
49             <ul class="submenu">
50                 <li><a href="#">Google</a></li>
51                 <li><a href="#">Bing</a></li>
52                 <li><a href="#">Yahoo</a></li>
53                 <li><a href="#">Otros buscadores</a></li>
54             </ul>
55         </li>
56     </ul>
57 
58   <script src='js/jquery.js'></script>
59 
60   <script src="js/index.js"></script>
61 </body>
62 
63 </html>
$(function() {
    var Accordion = function(el, multiple) {
        this.el = el || {};
        this.multiple = multiple || false;

        // Variables privadas
        var links = this.el.find('.link');
        // Evento
        links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
    }
//js方法中点击事件触发后，调用dropdown方法，该方法将其相邻的节点的状态置换
    Accordion.prototype.dropdown = function(e) {
        var $el = e.data.el;
            $this = $(this),
            $next = $this.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);
});
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    background: #2d2c41;
    font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
}

ul {
    list-style-type: none;
}

a {
    color: #b63b4d;
    text-decoration: none;
}

/** =======================
 * Contenedor Principal
 ===========================*/
h1 {
     color: #FFF;
     font-size: 24px;
     font-weight: 400;
     text-align: center;
     margin-top: 80px;
 }

h1 a {
     color: #c12c42;
     font-size: 16px;
 }

 .accordion {
     width: 100%;
     max-width: 360px;
     margin: 30px auto 20px;
     background: #FFF;
     -webkit-border-radius: 4px;
     -moz-border-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;
    position: 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-transition: all 0.25s ease;
     -o-transition: all 0.25s ease;
     transition: all 0.25s ease;
 }

 .submenu a:hover {
     background: #b63b4d;
     color: #FFF;
 }

 

posted on 2015-09-07 14:20  betty Hu  阅读(246)  评论(0)    收藏  举报

导航