您的位置：首页 > Web前端 > > 正文

css3菜单特效（超酷炫 CSS3垂直手风琴菜单）

更多 时间：2022-01-17 01:53:39 类别：Web前端 浏览量：612

css3菜单特效

超酷炫 CSS3垂直手风琴菜单

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

css3菜单特效（超酷炫 CSS3垂直手风琴菜单）

 实现代码如下：

  • XML/HTML Code复制内容到剪贴板
    1. <ul id="accordion" class="accordion">  
    2.  <li>  
    3.   <li class="link"><i class="fa fa-paint-brush"></i>Diseño web<i class="fa fa-chevron-down"></i></li>  
    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.   <li class="link"><i class="fa fa-code"></i>Desarrollo front-end<i class="fa fa-chevron-down"></i></li>  
    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.   <li class="link"><i class="fa fa-mobile"></i>Diseño responsive<i class="fa fa-chevron-down"></i></li>  
    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><li class="link"><i class="fa fa-globe"></i>Posicionamiento web<i class="fa fa-chevron-down"></i></li>  
    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-width: 360px;   
    4.   margin: 30px 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.  cursor: pointer;   
    13.  display: block;   
    14.  padding: 15px 15px 15px 42px;   
    15.  color: #4D4D4D;   
    16.  font-size: 14px;   
    17.  font-weight: 700;   
    18.  border-bottom: 1px solid #CCC;   
    19.  position: relative;   
    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.  position: absolute;   
    31.  top: 16px;   
    32.  left: 12px;   
    33.  font-size: 18px;   
    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.  rightright: 12px;   
    42.  left: auto;   
    43.  font-size: 16px;   
    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.   display: none;   
    65.   background: #444359;   
    66.   font-size: 14px;   
    67.  }   
    68.   
    69.  .submenu li {   
    70.   border-bottom: 1px solid #4b4a5e;   
    71.  }   
    72.   
    73.  .submenu a {   
    74.   display: block;   
    75.   text-decoration: none;   
    76.   color: #d9d9d9;   
    77.   padding: 12px;   
    78.   padding-left: 42px;   
    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
    本文作者：码农网 – 小峰

    以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持开心学习网。

    标签：菜单 手风琴 CSS3
  • 上一篇：wampserver开发环境介绍（WampServer下如何配置多域名）
  • 下一篇：vue3 响应式的实现过程（Vue3.x使用mitt.js进行组件通信）
    • 您可能感兴趣
    首页 编程学习 Web前端 数据库 软件设计
    开心学习 ©2013-2021 保留所有权利