注册有礼

用CSS怎样写垂直手风琴菜单，代码是什么

Admin 2022-11-19 群英技术资讯 470 次浏览

上一篇：HTML实现网页自动满屏的代码和方法是什么 下一篇：网页input按钮的样式怎样修改呢，方法是什么
在实际应用中，我们有时候会遇到“用CSS怎样写垂直手风琴菜单，代码是什么”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“用CSS怎样写垂直手风琴菜单，代码是什么”文章能帮助大家解决问题。


 
 
   
 
 
 
实现代码如下：





XML/HTML Code 




    

  1. ul id="accordion" class="accordion">  
    2. 

  2.   li>   
    3. 

  3.    div class="link">i class="fa fa-paint-brush">i>Diseño webi class="fa fa-chevron-down">i>div>   
    4. 

  4.    ul class="submenu">   
    5. 

  5.     li>a href="#">Photoshopa>li>   
    6. 

  6.     li>a href="#">HTMLa>li>   
    7. 

  7.     li>a href="#">CSSa>li>   
    8. 

  8.     li>a href="#">Maquetacion weba>li>   
    9. 

  9.    ul>   
    10. 

  10.   li>   
    11. 

  11.   li>   
    12. 

  12.    div class="link">i class="fa fa-code">i>Desarrollo front-endi class="fa fa-chevron-down">i>div>   
    13. 

  13.    ul class="submenu">   
    14. 

  14.     li>a href="#">Javascripta>li>   
    15. 

  15.     li>a href="#">jQuerya>li>   
    16. 

  16.     li>a href="#">Frameworks javascripta>li>   
    17. 

  17.    ul>   
    18. 

  18.   li>   
    19. 

  19.   li>   
    20. 

  20.    div class="link">i class="fa fa-mobile">i>Diseño responsivei class="fa fa-chevron-down">i>div>   
    21. 

  21.    ul class="submenu">   
    22. 

  22.     li>a href="#">Tabletsa>li>   
    23. 

  23.     li>a href="#">Dispositivos mobilesa>li>   
    24. 

  24.     li>a href="#">Medios de escritorioa>li>   
    25. 

  25.     li>a href="#">Otros dispositivosa>li>   
    26. 

  26.    ul>   
    27. 

  27.   li>   
    28. 

  28.   li>div class="link">i class="fa fa-globe">i>Posicionamiento webi class="fa fa-chevron-down">i>div>   
    29. 

  29.    ul class="submenu">   
    30. 

  30.     li>a href="#">Googlea>li>   
    31. 

  31.     li>a href="#">Binga>li>   
    32. 

  32.     li>a href="#">Yahooa>li>   
    33. 

  33.     li>a href="#">Otros buscadoresa>li>   
    34. 

  34.    ul>   
    35. 

  35.   li>   
    36. 

  36.  ul>   
    37. 







CSS代码：





CSS Code 




    

  1.  .accordion {   
    2. 

  2.    width: 100%;    
    3. 

  3.    max-width: 360px;    
    4. 

  4.    margin: 30px auto 20px;    
    5. 

  5.    background: #FFF;    
    6. 

  6.    -webkit-border-radius: 4px;    
    7. 

  7.    -moz-border-radius: 4px;    
    8. 

  8.    border-radius: 4px;    
    9. 

  9.  }   
    10. 

  10.   
    11. 

  11. .accordion .link {   
    12. 

  12.   cursor: pointer;    
    13. 

  13.   display: block;    
    14. 

  14.   padding: 15px 15px 15px 42px;    
    15. 

  15.   color: #4D4D4D;    
    16. 

  16.   font-size: 14px;    
    17. 

  17.   font-weight: 700;    
    18. 

  18.   border-bottom: 1px solid #CCC;    
    19. 

  19.   position: relative;    
    20. 

  20.   -webkit-transition: all 0.4s ease;    
    21. 

  21.   -o-transition: all 0.4s ease;    
    22. 

  22.   transition: all 0.4s ease;    
    23. 

  23. }   
    24. 

  24.   
    25. 

  25. .accordion li:last-child .link {   
    26. 

  26.   border-bottom: 0;    
    27. 

  27. }   
    28. 

  28.   
    29. 

  29. .accordion li i {   
    30. 

  30.   position: absolute;    
    31. 

  31.   top: 16px;    
    32. 

  32.   left: 12px;    
    33. 

  33.   font-size: 18px;    
    34. 

  34.   color: #595959;    
    35. 

  35.   -webkit-transition: all 0.4s ease;    
    36. 

  36.   -o-transition: all 0.4s ease;    
    37. 

  37.   transition: all 0.4s ease;    
    38. 

  38. }   
    39. 

  39.   
    40. 

  40. .accordion li i.fa-chevron-down {   
    41. 

  41.   rightright: 12px;    
    42. 

  42.   left: auto;    
    43. 

  43.   font-size: 16px;    
    44. 

  44. }   
    45. 

  45.   
    46. 

  46. .accordion li.open .link {   
    47. 

  47.   color: #b63b4d;    
    48. 

  48. }   
    49. 

  49.   
    50. 

  50. .accordion li.open i {   
    51. 

  51.   color: #b63b4d;    
    52. 

  52. }   
    53. 

  53. .accordion li.open i.fa-chevron-down {   
    54. 

  54.  -webkit-transform: rotate(180deg);   
    55. 

  55.  -ms-transform: rotate(180deg);   
    56. 

  56.  -o-transform: rotate(180deg);   
    57. 

  57.  transform: rotate(180deg);   
    58. 

  58. }   
    59. 

  59.   
    60. 

  60.  /**  
    61. 

  61.  * Submenu  
    62. 

  62.  -----------------------------*/  
    63. 

  63.  .submenu {   
    64. 

  64.    display: none;    
    65. 

  65.    background: #444359;    
    66. 

  66.    font-size: 14px;    
    67. 

  67.  }   
    68. 

  68.   
    69. 

  69.  .submenu li {   
    70. 

  70.    border-bottom: 1px solid #4b4a5e;    
    71. 

  71.  }   
    72. 

  72.   
    73. 

  73.  .submenu a {   
    74. 

  74.    display: block;    
    75. 

  75.    text-decoration: none;    
    76. 

  76.    color: #d9d9d9;    
    77. 

  77.    padding: 12px;    
    78. 

  78.    padding-left: 42px;    
    79. 

  79.    -webkit-transition: all 0.25s ease;    
    80. 

  80.    -o-transition: all 0.25s ease;    
    81. 

  81.    transition: all 0.25s ease;    
    82. 

  82.  }   
    83. 

  83.   
    84. 

  84.  .submenu a:hover {   
    85. 

  85.    background: #b63b4d;    
    86. 

  86.    color: #FFF;    
    87. 

  87.  }    
    88. 







jQuery代码：





JavaScript Code 




    

  1.  $(function() {   
    2. 

  2.   var Accordion = function(el, multiple) {    
    3. 

  3.    this.el = el || {};    
    4. 

  4.    this.multiple = multiple || false;    
    5. 

  5.   
    6. 

  6.    // Variables privadas    
    7. 

  7.    var links = this.el.find('.link');    
    8. 

  8.    // Evento    
    9. 

  9.    links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)    
    10. 

  10.  }   
    11. 

  11.   
    12. 

  12.   Accordion.prototype.dropdown = function(e) {    
    13. 

  13.    var $el = e.data.el;    
    14. 

  14.     $this = $(this),    
    15. 

  15.     $next = $this.next();    
    16. 

  16.   
    17. 

  17.   $next.slideToggle();   
    18. 

  18.    $this.parent().toggleClass('open');    
    19. 

  19.   
    20. 

  20.    if (!e.data.multiple) {    
    21. 

  21.     $el.find('.submenu').not($next).slideUp().parent().removeClass('open');    
    22. 

  22.   };   
    23. 

  23.  }    
    24. 

  24.   
    25. 

  25.   var accordion = new Accordion($('#accordion'), false);    
    26. 

  26. });    
    27. 

  27.   

感谢各位的阅读，以上就是“用CSS怎样写垂直手风琴菜单，代码是什么”的内容了，经过本文的学习后，相信大家对用CSS怎样写垂直手风琴菜单，代码是什么都有更深刻的体会了吧。这里是群英网络，小编将为大家推送更多相关知识点的文章，欢迎关注！

群英智防CDN，智能加速解决方案



标签：
垂直手风琴菜单



免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。



上一篇：HTML实现网页自动满屏的代码和方法是什么
下一篇：网页input按钮的样式怎样修改呢，方法是什么 



猜你喜欢







云活动


云活动




推荐内容







相关标签

















成为群英会员,开启智能安全云计算之旅

立即注册












 专业资深工程师驻守




 7X24小时快速响应




 一站式无忧技术支持




 免费备案服务


















产品与服务

云服务器


智防系统


服务器租用


服务器托管




虚拟主机





帮助中心 注册与购买


备案问题


鹰云服务器问题


服务器托管问题


域名问题


高防服务器问题


服务器租用问题





关于群英

群英简介


公司动态


资质荣誉


发展历程


群英环境


汇款信息


备案中心


联系我们





其他

数据中心


生态合作






友情链接 

友链合作


群英网络

智帝云


主机评测

idc公司


商城系统

跨境电商


主机吧

酷库博客


OA系统

腾讯企业邮箱


锐成信息

sdwan






关注或联系群英网络



7x24小时售前：400-678-4567




7x24小时售后：0668-2555666






24小时QQ客服







群英微信公众号















Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有




增值电信经营许可证 : B1.B2-20140078   
粤ICP备09006778号
域名注册商资质 粤 D3.1-20240008




 










 免费拨打  400-678-4567


免费拨打  400-678-4567 免费拨打 400-678-4567 或
0668-2555555




在线客服







 在线客服

  微信公众号

  返回顶部


返回顶部 返回顶部






在线客服




在线客服