注册有礼

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

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

上一篇：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客服
	
					

					

						
						
群英微信公众号
	
					

					

						CNNIC域名投诉举报处理平台
					

					

						服务电话：010-58813000
					

					

						服务邮箱：service@cnnic.cn
					

					

						投诉与建议：0668-2555555
					

				

			

		
		

	

		

		
		

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

		

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

		
		

			 
		


	

		


    

    

		 免费拨打  400-678-4567
				

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

		

			在线客服
				

					
				

		
		

		 在线客服
				
  微信公众号
				
  返回顶部
				

					返回顶部 返回顶部
				
				

	

	

		在线客服
	
	

	

		在线客服