您的位置:首页 > 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-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
    本文作者:码农网 – 小峰

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

    您可能感兴趣