搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

超酷炫 CSS3垂直手风琴菜单

发布时间：2023-06-02 12:38:06 来源：网络
.
秋天来啦！秋天来啦！田野里就是美丽的图画。花生躲在地下，包着红色的毛毯，住在土黄色的房间里睡大觉。玉米姐姐穿着绿色的裙子，在叶子上跳舞，南瓜爷爷鼓着金黄色的大肚子，坐着高级的南瓜车，一边看风景一边享受。西红柿露出火红火红的脸蛋，正对着我们微笑。谁使秋天这样美？看，田野里的菊花做出了回答，菊花顶着一个爆炸头，在微风中轻轻摇动，好像在说：是勤劳的人们画出了秋天的图画。

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

实现代码如下：

XML/HTML Code复制内容到剪贴板
  1. <ulid="accordion"class="accordion">
  2. <li>
  3. <divclass="link"><iclass="fafa-paint-brush"></i>Diseñoweb<iclass="fafa-chevron-down"></i></div>
  4. <ulclass="submenu">
  5. <li><arel="nofollow noopener noreferrer" href="#">Photoshop</a></li>
  6. <li><arel="nofollow noopener noreferrer" href="#">HTML</a></li>
  7. <li><arel="nofollow noopener noreferrer" href="#">CSS</a></li>
  8. <li><arel="nofollow noopener noreferrer" href="#">Maquetacionweb</a></li>
  9. </ul>
  10. </li>
  11. <li>
  12. <divclass="link"><iclass="fafa-code"></i>Desarrollofront-end<iclass="fafa-chevron-down"></i></div>
  13. <ulclass="submenu">
  14. <li><arel="nofollow noopener noreferrer" href="#">Javascript</a></li>
  15. <li><arel="nofollow noopener noreferrer" href="#">jQuery</a></li>
  16. <li><arel="nofollow noopener noreferrer" href="#">Frameworksjavascript</a></li>
  17. </ul>
  18. </li>
  19. <li>
  20. <divclass="link"><iclass="fafa-mobile"></i>Diseñoresponsive<iclass="fafa-chevron-down"></i></div>
  21. <ulclass="submenu">
  22. <li><arel="nofollow noopener noreferrer" href="#">Tablets</a></li>
  23. <li><arel="nofollow noopener noreferrer" href="#">Dispositivosmobiles</a></li>
  24. <li><arel="nofollow noopener noreferrer" href="#">Mediosdeescritorio</a></li>
  25. <li><arel="nofollow noopener noreferrer" href="#">Otrosdispositivos</a></li>
  26. </ul>
  27. </li>
  28. <li><divclass="link"><iclass="fafa-globe"></i>Posicionamientoweb<iclass="fafa-chevron-down"></i></div>
  29. <ulclass="submenu">
  30. <li><arel="nofollow noopener noreferrer" href="#">Google</a></li>
  31. <li><arel="nofollow noopener noreferrer" href="#">Bing</a></li>
  32. <li><arel="nofollow noopener noreferrer" href="#">Yahoo</a></li>
  33. <li><arel="nofollow noopener noreferrer" href="#">Otrosbuscadores</a></li>
  34. </ul>
  35. </li>
  36. </ul>

CSS代码：

CSS Code复制内容到剪贴板
  1. .accordion{
  2. width:100%;
  3. max-width:360px;
  4. margin:30pxauto20px;
  5. background:#FFF;
  6. -webkit-border-radius:4px;
  7. -moz-border-radius:4px;
  8. border-radius:4px;
  9. }
  11. .accordion.link{
  12. cursor:pointer;
  13. display:block;
  14. padding:15px15px15px42px;
  15. color:#4D4D4D;
  16. font-size:14px;
  17. font-weight:700;
  18. border-bottom:1pxsolid#CCC;
  19. position:relative;
  20. -webkit-transition:all0.4sease;
  21. -o-transition:all0.4sease;
  22. transition:all0.4sease;
  23. }
  25. .accordionli:last-child.link{
  26. border-bottom:0;
  27. }
  29. .accordionlii{
  30. position:absolute;
  31. top:16px;
  32. left:12px;
  33. font-size:18px;
  34. color:#595959;
  35. -webkit-transition:all0.4sease;
  36. -o-transition:all0.4sease;
  37. transition:all0.4sease;
  38. }
  40. .accordionlii.fa-chevron-down{
  41. rightright:12px;
  42. left:auto;
  43. font-size:16px;
  44. }
  46. .accordionli.open.link{
  47. color:#b63b4d;
  48. }
  50. .accordionli.openi{
  51. color:#b63b4d;
  52. }
  53. .accordionli.openi.fa-chevron-down{
  54. -webkit-transform:rotate(180deg);
  55. -ms-transform:rotate(180deg);
  56. -o-transform:rotate(180deg);
  57. transform:rotate(180deg);
  58. }
  60. /**
  61. *Submenu
  62. -----------------------------*/
  63. .submenu{
  64. display:none;
  65. background:#444359;
  66. font-size:14px;
  67. }
  69. .submenuli{
  70. border-bottom:1pxsolid#4b4a5e;
  71. }
  73. .submenua{
  74. display:block;
  75. text-decoration:none;
  76. color:#d9d9d9;
  77. padding:12px;
  78. padding-left:42px;
  79. -webkit-transition:all0.25sease;
  80. -o-transition:all0.25sease;
  81. transition:all0.25sease;
  82. }
  84. .submenua:hover{
  85. background:#b63b4d;
  86. color:#FFF;
  87. }

jQuery代码：

JavaScript Code复制内容到剪贴板
  1. $(function(){
  2. varAccordion=function(el,multiple){
  3. this.el=el||{};
  4. this.multiple=multiple||false;
  6. //Variablesprivadas
  7. varlinks=this.el.find('.link');
  8. //Evento
  9. links.on('click',{el:this.el,multiple:this.multiple},this.dropdown)
  10. }
  12. Accordion.prototype.dropdown=function(e){
  13. var$el=e.data.el;
  14. $this=$(this),
  15. $next=$this.next();
  17. $next.slideToggle();
  18. $this.parent().toggleClass('open');
  20. if(!e.data.multiple){
  21. $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
  22. };
  23. }
  25. varaccordion=newAccordion($('#accordion'),false);
  26. });

本文链接：http://www.codeceo.com/article/css3-vertical-accordion-menu.html
本文作者：码农网 – 小峰

以上就是超酷炫 CSS3垂直手风琴菜单。考研不简单，实现自己的梦想也不容易，但是！不代表不可能，坚持，忍耐，拼搏，进入清华没有问题！更多关于超酷炫 CSS3垂直手风琴菜单请关注haodaima.com其它相关文章！

以下您可能有感兴趣的文章:
标签： 酷炫
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图