超酷炫 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旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 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
PHP5中MVC结构学习
2006/10/09 PHP
php学习 字符串课件
2008/06/15 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
js实现日期级联效果
2014/01/23 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
python读取指定字节长度的文本方法
2019/08/27 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
Python __slots__的使用方法
2020/11/15 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
人力资源部经理助理岗位职责
2014/03/04 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技