jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解

在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法。

jQuery实现垂直手风琴折叠菜单示例代码

首先给出手风琴折叠菜单的HTML代码,如下所示:

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>CSS3垂直手风琴折叠菜单DEMO演示</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Iconos -->
    <link href="css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>

    <!-- Contenedor -->
    <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>

  <script src=‘js/jquery.js‘></script>

  <script src="js/index.js"></script>
</body>

</html>

如上面的代码,首先需要引入font-awesome.min.css,这是awesome的字体库。然后需要引入自定义的css,style.css代码如下面所示:

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

使用jQuery&HTML&CSS3实现垂直手风琴折叠菜单就必须使用jQuery,所以一定要引入jQuery库。然后配合自定义的js,index.js代码如下所示:

$(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)
    }

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

这样我们可以看到下面的图片效果:

时间: 2024-10-30 15:33:06

jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解的相关文章

jquery两行代码实现侧边栏三级折叠菜单

jquery两行代码实现侧边栏三级折叠菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-2.1.1.min.js"></script> </head> <bod

jquery和css3实现的很酷的菜单导航

今天为大家带来的是jquery和css3实现的不错的导航菜单.点击列表图表后,内容页面向内移动显示菜单项.当单击关闭菜单按钮时,菜单项隐藏,内容页恢复原位.看下图 在线预览   源码下载 我们看下实现代码: html代码: <div style="position: relative; height: 400px; width: 825px; margin: auto;"> <div class="contener"> <div id=

基于jQuery制作的手风琴折叠菜单

初始化为全部隐藏 点第一个,显示第一个所隐藏的内容 当点第二个的时候,第一个的内容隐藏,第二个栏目的内容显示,以此类推 下面是代码部分 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } body {

javascript实现的手风琴折叠菜单效果

演示地址:http://codepen.io/anon/pen/pJERMq 实现效果: HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴效果</title> </head> <body> <div class="main">

jQuery和CSS3炫酷全屏滑动菜单特效

这是一款效果非常炫酷的jQuery和CSS3全屏推拉式滑动菜单特效插件.这个插件的效果是当点击了主菜单按钮时,全屏菜单从屏幕左侧滑出,主菜单按钮动态旋转更换图标. 下图演示了这个效果的过程: 在线演示:http://www.htmleaf.com/Demo/201502131375.html 下载地址:http://www.htmleaf.com/jQuery/Menu-Navigation/201502131374.html

jQuery和CSS3超酷3D页面切换导航菜单插件

这是一款效果非常酷的jQuery和CSS3 3D页面切换导航菜单特效插件.该导航菜单插件是汉堡包隐藏菜单,每个菜单项的图标使用SVG来制作,鼠标滑过图标时有动画效果,点击某一个菜单项后,页面会在3D空间进行切换,效果非常炫酷. 效果演示:http://www.htmleaf.com/Demo/201504111660.html 下载地址:http://www.htmleaf.com/jQuery/Menu-Navigation/201504111659.html

第一百八十九节,jQueryUI,折叠菜单 UI

jQueryUI,折叠菜单 UI 学习要点: 1.使用 accordion 2.修改 accordion 样式 3.accordion()方法的属性 4.accordion()方法的事件 5.accordion 中使用 on 折叠菜单(accordion),和选项卡一样也是一种在同一个页面上切换不同内容的功能 UI.它和选项卡的使用几乎没有什么太大区别,只是显示的效果有所差异罢了. 一.使用 accordion 使用 accordion 比较简单,但需要按照指定的规范即可. HTML 部分 <d

jQuery实现手机竖直手风琴效果

效果:http://hovertree.com/texiao/jquery/65/ 效果图: 代码: <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta

jquery垂直展开折叠手风琴二级菜单

最近新开发一个简单项目,用到左侧两级的菜单.习惯性的去网上扒jquery手风琴效果,结果悲剧了好久…… 是该认认真真去学jquery,练习自己写动画效果了.从理解别人代码开始吧! 注:jquery-1.8.3.min.js需要下载文件放到同级名为js的文件夹里. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery垂直展开折叠手风琴效果</title> <s