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


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. .accordion {
  86. width: 100%;
  87. }
  88. }

JS

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

Source

27 CSS Accordion For Mobile Applications And Websites 2019

沒有留言:

技術提供:Blogger.