超酷炫 CSS3垂直手风琴菜单


Posted in HTML / CSS onJune 28, 2016

CSS3目前非常流行,在很多开发者看来,CSS3是制作网页动画和网页特效的神器,很多意想不到的效果都可以用CSS3实现。但是今天我们要分享一款用CSS3实现的非常普通的菜单,它是一个垂直的手风琴折叠菜单,先来看看效果图:

超酷炫 CSS3垂直手风琴菜单

 实现代码如下:

XML/HTML Code复制内容到剪贴板
  1. <ul id="accordion" class="accordion">  
  2.  <li>  
  3.   <div class="link"><i class="fa fa-paint-brush"></i>Diseño web<i class="fa fa-chevron-down"></i></div>  
  4.   <ul class="submenu">  
  5.    <li><a href="#">Photoshop</a></li>  
  6.    <li><a href="#">HTML</a></li>  
  7.    <li><a href="#">CSS</a></li>  
  8.    <li><a href="#">Maquetacion web</a></li>  
  9.   </ul>  
  10.  </li>  
  11.  <li>  
  12.   <div class="link"><i class="fa fa-code"></i>Desarrollo front-end<i class="fa fa-chevron-down"></i></div>  
  13.   <ul class="submenu">  
  14.    <li><a href="#">Javascript</a></li>  
  15.    <li><a href="#">jQuery</a></li>  
  16.    <li><a href="#">Frameworks javascript</a></li>  
  17.   </ul>  
  18.  </li>  
  19.  <li>  
  20.   <div class="link"><i class="fa fa-mobile"></i>Diseño responsive<i class="fa fa-chevron-down"></i></div>  
  21.   <ul class="submenu">  
  22.    <li><a href="#">Tablets</a></li>  
  23.    <li><a href="#">Dispositivos mobiles</a></li>  
  24.    <li><a href="#">Medios de escritorio</a></li>  
  25.    <li><a href="#">Otros dispositivos</a></li>  
  26.   </ul>  
  27.  </li>  
  28.  <li><div class="link"><i class="fa fa-globe"></i>Posicionamiento web<i class="fa fa-chevron-down"></i></div>  
  29.   <ul class="submenu">  
  30.    <li><a href="#">Google</a></li>  
  31.    <li><a href="#">Bing</a></li>  
  32.    <li><a href="#">Yahoo</a></li>  
  33.    <li><a href="#">Otros buscadores</a></li>  
  34.   </ul>  
  35.  </li>  
  36. </ul>  

CSS代码:

CSS Code复制内容到剪贴板
  1.  .accordion {   
  2.   width: 100%;   
  3.   max-width360px;   
  4.   margin30px auto 20px;   
  5.   background#FFF;   
  6.   -webkit-border-radius: 4px;   
  7.   -moz-border-radius: 4px;   
  8.   border-radius: 4px;   
  9.  }   
  10.   
  11. .accordion .link {   
  12.  cursorpointer;   
  13.  displayblock;   
  14.  padding15px 15px 15px 42px;   
  15.  color#4D4D4D;   
  16.  font-size14px;   
  17.  font-weight: 700;   
  18.  border-bottom1px solid #CCC;   
  19.  positionrelative;   
  20.  -webkit-transition: all 0.4s ease;   
  21.  -o-transition: all 0.4s ease;   
  22.  transition: all 0.4s ease;   
  23. }   
  24.   
  25. .accordion li:last-child .link {   
  26.  border-bottom: 0;   
  27. }   
  28.   
  29. .accordion li i {   
  30.  positionabsolute;   
  31.  top16px;   
  32.  left12px;   
  33.  font-size18px;   
  34.  color#595959;   
  35.  -webkit-transition: all 0.4s ease;   
  36.  -o-transition: all 0.4s ease;   
  37.  transition: all 0.4s ease;   
  38. }   
  39.   
  40. .accordion li i.fa-chevron-down {   
  41.  rightright12px;   
  42.  leftauto;   
  43.  font-size16px;   
  44. }   
  45.   
  46. .accordion li.open .link {   
  47.  color#b63b4d;   
  48. }   
  49.   
  50. .accordion li.open i {   
  51.  color#b63b4d;   
  52. }   
  53. .accordion li.open i.fa-chevron-down {   
  54.  -webkit-transform: rotate(180deg);   
  55.  -ms-transform: rotate(180deg);   
  56.  -o-transform: rotate(180deg);   
  57.  transform: rotate(180deg);   
  58. }   
  59.   
  60. /**  
  61.  * Submenu  
  62.  -----------------------------*/  
  63.  .submenu {   
  64.   displaynone;   
  65.   background#444359;   
  66.   font-size14px;   
  67.  }   
  68.   
  69.  .submenu li {   
  70.   border-bottom1px solid #4b4a5e;   
  71.  }   
  72.   
  73.  .submenu a {   
  74.   displayblock;   
  75.   text-decorationnone;   
  76.   color#d9d9d9;   
  77.   padding12px;   
  78.   padding-left42px;   
  79.   -webkit-transition: all 0.25s ease;   
  80.   -o-transition: all 0.25s ease;   
  81.   transition: all 0.25s ease;   
  82.  }   
  83.   
  84.  .submenu a:hover {   
  85.   background#b63b4d;   
  86.   color#FFF;   
  87.  }    

jQuery代码:

JavaScript Code复制内容到剪贴板
  1.  $(function() {   
  2.  var Accordion = function(el, multiple) {   
  3.   this.el = el || {};   
  4.   this.multiple = multiple || false;   
  5.   
  6.   // Variables privadas   
  7.   var links = this.el.find('.link');   
  8.   // Evento   
  9.   links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)   
  10.  }   
  11.   
  12.  Accordion.prototype.dropdown = function(e) {   
  13.   var $el = e.data.el;   
  14.    $this = $(this),   
  15.    $next = $this.next();   
  16.   
  17.   $next.slideToggle();   
  18.   $this.parent().toggleClass('open');   
  19.   
  20.   if (!e.data.multiple) {   
  21.    $el.find('.submenu').not($next).slideUp().parent().removeClass('open');   
  22.   };   
  23.  }    
  24.   
  25.  var accordion = new Accordion($('#accordion'), false);   
  26. });    
  27.   

本文链接:http://www.codeceo.com/article/css3-vertical-accordion-menu.html
本文作者:码农网 – 小峰

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
css3绘制百度的小度熊
Oct 29 HTML / CSS
纯CSS3实现圆角效果(含IE兼容解决方法)
May 07 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 HTML / CSS
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 #HTML / CSS
CSS3中Transform动画属性用法详解
Jul 04 #HTML / CSS
CSS3 渐变(Gradients)之CSS3 线性渐变
Jul 08 #HTML / CSS
CSS3 渐变(Gradients)之CSS3 径向渐变
Jul 08 #HTML / CSS
CSS3弹性伸缩布局之box布局
Jul 12 #HTML / CSS
使用CSS3代码绘制可爱的Hello Kitty猫
Aug 03 #HTML / CSS
使用css3绘制出各种几何图形
Aug 17 #HTML / CSS
You might like
几种显示数据的方法的比较
2006/10/09 PHP
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
splice slice区别
2006/10/09 Javascript
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
Javascript模块模式分析
2008/05/16 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
javascript语言结构小记(一)
2011/09/10 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
原生js实现购物车功能
2020/09/23 Javascript
python单线程下实现多个socket并发过程详解
2019/07/27 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
工程项目建议书范文
2014/03/12 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
2014年药房工作总结
2014/11/22 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
指导教师推荐意见
2015/06/05 职场文书
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技