web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
导航菜单
jQuery和css3垂直手风琴折叠菜单插件
分类:
导航菜单
日期:
2024-05-14
点击(1)
评论(0)
演 示
免费下载
简介
##### HTML结构 html结构使用无序列表,每一个列表项作为一个菜单项使用。 ```html
Diseño web
Photoshop
HTML
CSS
Maquetacion web
Desarrollo front-end
Javascript
jQuery
Frameworks javascript
Diseño responsive
Tablets
Dispositivos mobiles
Medios de escritorio
Otros dispositivos
Posicionamiento web
Google
Bing
Yahoo
Otros buscadores
``` ##### CSS样式 下面来给手风琴折叠菜单添加一些样式。 ```html * { 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 ===========================*/ .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); } ``` 下面是子菜单的CSS样式: ```html /** * 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; } ``` ##### JAVASCRIPT 首先定义Accordion对象: ```html 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添加下拉菜单事件: ```html 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'); }; } ``` 然后可以通过下面语句调用手风琴下拉菜单: ```html var accordion = new Accordion($('#accordion'), false); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告