1. Home
  2. Programming-網頁語法-CSS
    3. [CSS] 純 CSS 製作開合選單(手風琴選單)

[CSS] 純 CSS 製作開合選單(手風琴選單)

2月 15, 2020
我要留言
作者：

HTML

  1. <div class="accordion js-accordion">
  2.   <div class="accordion__item js-accordion-item">
  3.     <div class="accordion-header js-accordion-header">Panel 1</div> 
  4.   <div class="accordion-body js-accordion-body">
  5.     <div class="accordion-body__contents">
  6.       Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
  7.     </div>
  8.       <div class="accordion js-accordion">
  9.         <div class="accordion__item js-accordion-item">
  10.            <div class="accordion-header js-accordion-header">Sub Panel 1</div> 
  11.            <div class="accordion-body js-accordion-body">
  12.              <div class="accordion-body__contents">
  13.               Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
  14.              </div><!-- end of sub accordion item body contents -->
  15.            </div><!-- end of sub accordion item body -->
  16.         </div><!-- end of sub accordion item -->
  17.         <div class="accordion__item js-accordion-item">
  18.            <div class="accordion-header js-accordion-header">Sub Panel 2</div> 
  19.            <div class="accordion-body js-accordion-body">
  20.              <div class="accordion-body__contents">
  21.               Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
  22.              </div><!-- end of sub accordion item body contents -->
  23.            </div><!-- end of sub accordion item body -->
  24.         </div><!-- end of sub accordion item -->
  25.       </div><!-- end of sub accordion -->
  26.     </div
  27.     </div><!-- end of accordion body -->
  28.   </div><!-- end of accordion item -->
  29.   <div class="accordion__item js-accordion-item active">
  30.     <div class="accordion-header js-accordion-header">Panel 2</div> 
  31.   <div class="accordion-body js-accordion-body">
  32.     <div class="accordion-body__contents">
  33.       Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
  34.     </div>
  35.       <div class="accordion js-accordion">
  36.         <div class="accordion__item js-accordion-item">
  37.            <div class="accordion-header js-accordion-header">Sub Panel 1</div> 
  38.            <div class="accordion-body js-accordion-body">
  39.              <div class="accordion-body__contents">
  40.               Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
  41.              </div><!-- end of sub accordion item body contents -->
  42.            </div><!-- end of sub accordion item body -->
  43.         </div><!-- end of sub accordion item -->
  44.         <div class="accordion__item js-accordion-item">
  45.            <div class="accordion-header js-accordion-header">Sub Panel 2</div> 
  46.            <div class="accordion-body js-accordion-body">
  47.              <div class="accordion-body__contents">
  48.               Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
  49.              </div><!-- end of sub accordion item body contents -->
  50.            </div><!-- end of sub accordion item body -->
  51.         </div><!-- end of sub accordion item -->
  52.       </div><!-- end of sub accordion -->
  53.     </div><!-- end of accordion body -->
  54.   </div><!-- end of accordion item -->
  55.     <div class="accordion__item js-accordion-item">
  56.     <div class="accordion-header js-accordion-header">Panel 3</div> 
  57.   <div class="accordion-body js-accordion-body">
  58.     <div class="accordion-body__contents">
  59.       Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
  60.     </div>
  61.       <div class="accordion js-accordion">
  62.         <div class="accordion__item js-accordion-item">
  63.            <div class="accordion-header js-accordion-header">Sub Panel 1</div> 
  64.            <div class="accordion-body js-accordion-body">
  65.              <div class="accordion-body__contents">
  66.               Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
  67.              </div><!-- end of sub accordion item body contents -->
  68.            </div><!-- end of sub accordion item body -->
  69.         </div><!-- end of sub accordion item -->
  70.         <div class="accordion__item js-accordion-item">
  71.            <div class="accordion-header js-accordion-header">Sub Panel 2</div> 
  72.            <div class="accordion-body js-accordion-body">
  73.              <div class="accordion-body__contents">
  74.               Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
  75.              </div><!-- end of sub accordion item body contents -->
  76.            </div><!-- end of sub accordion item body -->
  77.         </div><!-- end of sub accordion item -->
  78.       </div><!-- end of sub accordion -->
  79.     </div><!-- end of accordion body -->
  80.   </div><!-- end of accordion item -->
  81.      <div class="accordion__item js-accordion-item">
  82.     <div class="accordion-header js-accordion-header">Panel 4</div> 
  83.   <div class="accordion-body js-accordion-body">
  84.     <div class="accordion-body__contents">
  85.       Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
  86.     </div>
  87.       <div class="accordion js-accordion">
  88.         <div class="accordion__item js-accordion-item">
  89.            <div class="accordion-header js-accordion-header">Sub Panel 1</div> 
  90.            <div class="accordion-body js-accordion-body">
  91.              <div class="accordion-body__contents">
  92.               Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
  93.              </div><!-- end of sub accordion item body contents -->
  94.            </div><!-- end of sub accordion item body -->
  95.         </div><!-- end of sub accordion item -->
  96.         <div class="accordion__item js-accordion-item">
  97.            <div class="accordion-header js-accordion-header">Sub Panel 2</div> 
  98.            <div class="accordion-body js-accordion-body">
  99.              <div class="accordion-body__contents">
  100.               Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
  101.              </div><!-- end of sub accordion item body contents -->
  102.            </div><!-- end of sub accordion item body -->
  103.         </div><!-- end of sub accordion item -->
  104.       </div><!-- end of sub accordion -->
  105.     </div><!-- end of accordion body -->
  106.   </div><!-- end of accordion item -->
  107.      <div class="accordion__item js-accordion-item">
  108.     <div class="accordion-header js-accordion-header">Panel 5</div> 
  109.   <div class="accordion-body js-accordion-body">
  110.     <div class="accordion-body__contents">
  111.       Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
  112.     </div>
  113.       <div class="accordion js-accordion">
  114.         <div class="accordion__item js-accordion-item">
  115.            <div class="accordion-header js-accordion-header">Sub Panel 1</div> 
  116.            <div class="accordion-body js-accordion-body">
  117.              <div class="accordion-body__contents">
  118.               Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
  119.              </div><!-- end of sub accordion item body contents -->
  120.            </div><!-- end of sub accordion item body -->
  121.         </div><!-- end of sub accordion item -->
  122.         <div class="accordion__item js-accordion-item">
  123.            <div class="accordion-header js-accordion-header">Sub Panel 2</div> 
  124.            <div class="accordion-body js-accordion-body">
  125.              <div class="accordion-body__contents">
  126.               Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
  127.              </div><!-- end of sub accordion item body contents -->
  128.            </div><!-- end of sub accordion item body -->
  129.         </div><!-- end of sub accordion item -->
  130.       </div><!-- end of sub accordion -->
  131.     </div><!-- end of accordion body -->
  132.   </div><!-- end of accordion item -->
  133.      <div class="accordion__item js-accordion-item">
  134.     <div class="accordion-header js-accordion-header">Panel 6</div> 
  135.   <div class="accordion-body js-accordion-body">
  136.     <div class="accordion-body__contents">
  137.       Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
  138.     </div>
  139.       <div class="accordion js-accordion">
  140.         <div class="accordion__item js-accordion-item">
  141.            <div class="accordion-header js-accordion-header">Sub Panel 1</div> 
  142.            <div class="accordion-body js-accordion-body">
  143.              <div class="accordion-body__contents">
  144.               Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
  145.              </div><!-- end of sub accordion item body contents -->
  146.            </div><!-- end of sub accordion item body -->
  147.         </div><!-- end of sub accordion item -->
  148.         <div class="accordion__item js-accordion-item">
  149.            <div class="accordion-header js-accordion-header">Sub Panel 2</div> 
  150.            <div class="accordion-body js-accordion-body">
  151.              <div class="accordion-body__contents">
  152.               Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi placeat distinctio dolor, amet magnam voluptatibus eos ex vero, sunt veritatis esse. Nostrum voluptatum et repudiandae vel sed, explicabo in?
  153.              </div><!-- end of sub accordion item body contents -->
  154.            </div><!-- end of sub accordion item body -->
  155.         </div><!-- end of sub accordion item -->
  156.       </div><!-- end of sub accordion -->
  157.     </div><!-- end of accordion body -->
  158.   </div><!-- end of accordion item -->
  159. </div><!-- end of accordion -->

CSS

  1. .accordion {
  2.   font-size: 1rem;
  3.   width: 30vw;
  4.   margin: 0 auto;
  5.   border-radius: 5px;
  6. }
  7.  
  8. .accordion-header,
  9. .accordion-body {
  10.   background: white;
  11. }
  12.  
  13. .accordion-header {
  14.   padding: 1.5em 1.5em;
  15.   background: #3F51B5;
  16.   color: white;
  17.   cursor: pointer;
  18.   font-size: .7em;
  19.   letter-spacing: .1em;
  20.   transition: all .3s;
  21.   text-transform: uppercase;
  22. }
  23.  
  24. .accordion__item {
  25.     border-bottom: 1px solid #3a4ba4;
  26. }
  27.  
  28. .accordion__item .accordion__item {
  29.   border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  30. }
  31.  
  32. .accordion-header:hover {
  33.   background: #2D3D99;
  34.   position: relative;
  35.   z-index: 5;
  36. }
  37.  
  38. .accordion-body {
  39.   background: #fcfcfc;
  40.   color: #353535;
  41.   display: none;
  42. }
  43.  
  44. .accordion-body__contents {
  45.   padding: 1.5em 1.5em;
  46.   font-size: .85em;
  47. }
  48.  
  49. .accordion__item.active:last-child .accordion-header {
  50.   border-radius: none;
  51. }
  52.  
  53. .accordion:first-child > .accordion__item > .accordion-header {
  54.   border-bottom: 1px solid transparent;
  55. }
  56.  
  57. .accordion__item > .accordion-header:after {
  58.   content: "\f3d0";
  59.   font-family: IonIcons;
  60.   font-size: 1.2em;
  61.   float: right;
  62.   position: relative;
  63.   top: -2px;
  64.   transition: .3s all;
  65.   transform: rotate(0deg);
  66. }
  67.  
  68. .accordion__item.active > .accordion-header:after {
  69.   transform: rotate(-180deg);
  70. }
  71.  
  72. .accordion__item.active .accordion-header {
  73.   background: #2D3D99;
  74. }
  75.  
  76. .accordion__item .accordion__item .accordion-header {
  77.   background: #f1f1f1;
  78.   color: #353535;
  79. }
  80.  
  81. @media screen and (max-width: 1000px) {
  82.   body {
  83.     padding: 1em;
  84.   }
  85.   
  86.   .accordion {
  87.     width: 100%;
  88.   }
  89. }

JS

  1. var accordion = (function(){
  2.   
  3.   var $accordion = $('.js-accordion');
  4.   var $accordion_header = $accordion.find('.js-accordion-header');
  5.   var $accordion_item = $('.js-accordion-item');
  6.  
  7.   // default settings 
  8.   var settings = {
  9.     // animation speed
  10.     speed: 400,
  11.     
  12.     // close all other accordion items if true
  13.     oneOpen: false
  14.   };
  15.     
  16.   return {
  17.     // pass configurable object literal
  18.     init: function($settings) {
  19.       $accordion_header.on('click', function() {
  20.         accordion.toggle($(this));
  21.       });
  22.       
  23.       $.extend(settings, $settings); 
  24.       
  25.       // ensure only one accordion is active if oneOpen is true
  26.       if(settings.oneOpen && $('.js-accordion-item.active').length > 1) {
  27.         $('.js-accordion-item.active:not(:first)').removeClass('active');
  28.       }
  29.       
  30.       // reveal the active accordion bodies
  31.       $('.js-accordion-item.active').find('> .js-accordion-body').show();
  32.     },
  33.     toggle: function($this) {
  34.             
  35.       if(settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) {
  36.         $this.closest('.js-accordion')
  37.                .find('> .js-accordion-item') 
  38.                .removeClass('active')
  39.                .find('.js-accordion-body')
  40.                .slideUp()
  41.       }
  42.       
  43.       // show/hide the clicked accordion item
  44.       $this.closest('.js-accordion-item').toggleClass('active');
  45.       $this.next().stop().slideToggle(settings.speed);
  46.     }
  47.   }
  48. })();
  49.  
  50. $(document).ready(function(){
  51.   accordion.init({ speed: 300, oneOpen: true });
  52. });
Demo

Source

☞ 27 CSS Accordion For Mobile Applications And Websites 2019
Tags :
訂閱： 張貼留言 ( Atom )

留言給我

沒有留言:

技術提供：Blogger.

網誌建立於 2015 年 8 月 24 日 The Color Moon 遇見你。月亮彩色 | Created By ThemeXpose | Distributed By Blogger Themes