超酷炫 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实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 HTML / CSS
小程序实现悬浮按钮的全过程记录
Oct 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
php基础知识:函数基础知识
2006/12/13 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
JS delegate与live浅析
2013/12/21 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
Python入门之modf()方法的使用
2015/05/15 Python
python3 读取Excel表格中的数据
2018/10/16 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
汽车驾驶求职信
2013/10/25 职场文书
社会实践活动总结范文
2014/07/03 职场文书
党建目标管理责任书
2014/07/25 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
交通事故代理词范文
2015/05/23 职场文书
感恩父母主题班会
2015/08/12 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
goland 设置project gopath的操作
2021/05/06 Golang
redis哨兵常用命令和监控示例详解
2021/05/27 Redis