Codeconvey
  • Home
  • Tutorials
    • CSS Slideshow
    • CSS Navigation
    • Modal & Popup
    • Hover Effects
    • HTML Forms
    • Layout
  • CSS Animation
  • How To
  • Resources
No Result
View All Result
Codeconvey
No Result
View All Result

Beautiful Pure CSS Animated Accordion Menu

Ashfaq Ahmed by Ashfaq Ahmed
December 31, 2019
in CSS Accordion
1
Beautiful Pure CSS Animated Accordion Menu
0
SHARES
0
VIEWS
Share on FacebookShare on Twitter

In this article, we’re going to creating a beautiful and stylish pure CSS accordion menu that has animated elements which user click.

It is the colorful HTML/CSS accordion menu and each one has a unique color. When the user clicks on any menu items, the elements (such as icons, text, button, etc) comes with a nice animation.

Furthermore, the design looks really awesome and if you are going to show some important information such as store or shop timing then this would be the best design you want to implement.

In addition, it allows the user to toggle hidden panels by clicking the title bar. The accordion design is excellent and uses a flat color scheme. It will make your website design more appeal.

A different color background has been used for each title to make it unique and look great. It is responsive and works on all media devices.

You don’t need to write all of the code to build a CSS accordion to from start. Just pick the HTML and CSS code and implement it on your website to make it ready.

This accordion menu is lightweight because it is written in CSS only and you don’t need to use the javascript.

How to Create CSS Animated Accordion Menu

Let’s have a look at how to build this accordion and first see the HTML. The HTML is designed to understand quickly.

You can see we use the radio button and label elements. These will help us to develop the toggle function through CSS.

As for content, we created two divs left and right to arrange the icon and content. As for icons, we are using the ionicons so make sure to include in the head.

<div class='right'>
  <div class='app'>
    <div class='app_inner'>
      <input checked='' id='tab-1' name='buttons' type='radio'>
      <label for='tab-1'>
        <div class='app_inner__tab'>
          <h2>
            <i class='icon ion-android-alarm-clock'></i>
            8am - 10am
          </h2>
          <div class='tab_left'>
            <i class='big icon ion-android-color-palette'></i>
            <div class='tab_left__image'>
              <i class='icon ion-android-color-palette'></i>
            </div>
          </div>
          <div class='tab_right'>
            <h3>Jamie talks design</h3>
            <h4>Monday - Thursday</h4>
            <p>I talk a bunch of rubbish</p>
            <button>More information</button>
          </div>
        </div>
      </label>
      <input false='' id='tab-2' name='buttons' type='radio'>
      <label for='tab-2'>
        <div class='app_inner__tab'>
          <h2>
            <i class='icon ion-android-alarm-clock'></i>
            10am - 12am
          </h2>
          <div class='tab_left'>
            <i class='big icon ion-music-note'></i>
            <div class='tab_left__image'>
              <i class='icon ion-music-note'></i>
            </div>
          </div>
          <div class='tab_right'>
            <h3>Arctic Monkeys Live</h3>
            <h4>Monday - Wednesday</h4>
            <p>Music for your lug holes</p>
            <button>More information</button>
          </div>
        </div>
      </label>
      <input false='' id='tab-3' name='buttons' type='radio'>
      <label for='tab-3'>
        <div class='app_inner__tab'>
          <h2>
            <i class='icon ion-android-alarm-clock'></i>
            12am - 4pm
          </h2>
          <div class='tab_left'>
            <i class='big icon ion-android-microphone'></i>
            <div class='tab_left__image'>
              <i class='icon ion-android-microphone'></i>
            </div>
          </div>
          <div class='tab_right'>
            <h3>Steven Fry podcast</h3>
            <h4>Staurday - Sunday</h4>
            <p>Steven Fry says words</p>
            <button>More information</button>
          </div>
        </div>
      </label>
      <input false='' id='tab-4' name='buttons' type='radio'>
      <label for='tab-4'>
        <div class='app_inner__tab'>
          <h2>
            <i class='icon ion-android-alarm-clock'></i>
            4pm - 8pm
          </h2>
          <div class='tab_left'>
            <i class='big icon ion-android-bar'></i>
            <div class='tab_left__image'>
              <i class='icon ion-android-bar'></i>
            </div>
          </div>
          <div class='tab_right'>
            <h3>Massive event</h3>
            <h4>Monday - Friday</h4>
            <p>Some kind of music festival</p>
            <button>More information</button>
          </div>
        </div>
      </label>
    </div>
  </div>
</div>

The Style

The CSS is a little long to handle the accordion design and its functionality.

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300);
* {
  box-sizing: border-box;
}

body {
  background: #45b98f;
  overflow: hidden;
  font-family: 'Roboto Condensed', sans-serif;
	line-height: normal;
}
body .left {
  float: left;
  width: 50%;
  height: 100vh;
  position: Relative;
}
body .left_inner {
  width: 340px;
  margin: 0 auto;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 414px;
  position: absolute;
  right: 20px;
  top: 40%;
}
body .left_inner h1 {
  color: white;
  font-size: 28px;
  margin: 120px 0px 0px 0px;
}
body .left_inner h2 {
  color: #abe8d2;
  font-size: 22px;
  font-weight: 200;
  margin: 0px 0px 0px 0px;
}
body .right {
  float: right;
  position: relative;
  width: 50%;
  height: 100vh;
}

.app {
  border-radius: 10px;
  width: 340px;
  margin: 0 auto;
  height: 414px;
  position: absolute;
  left: 0;
  top: 40%;
  box-shadow: 4px 5px 0px rgba(0, 0, 0, 0.11);
  -webkit-animation: intro 0.34s 0.4s cubic-bezier(1, 1.4, 0.41, 1.01) forwards;
          animation: intro 0.34s 0.4s cubic-bezier(1, 1.4, 0.41, 1.01) forwards;
  -webkit-transform: translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(10deg);
          transform: translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(10deg);
  margin: auto;
  overflow: hidden;
  font-family: 'Roboto Condensed', sans-serif;
}
.app_inner {
  position: relative;
}
.app_inner input[type="radio"] {
  display: none;
}
.app_inner input[type="radio"]:checked + label .app_inner__tab {
  height: 175px;
}
.app_inner input[type="radio"]:checked + label .app_inner__tab .tab_right {
  top: 39px;
  transition: all 0.3s 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.app_inner input[type="radio"]:not(checked) + label .app_inner__tab {
  height: 80px;
  border-left: 12px solid rgba(0, 0, 0, 0.12);
}
.app_inner input[type="radio"]:not(checked) + label .app_inner__tab .tab_right {
  top: 200px;
  transition: all 0.3s 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.app_inner input[type="radio"]:checked + label .app_inner__tab .tab_left .tab_left__image {
  -webkit-animation: move_in 0.55s 0.05s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
          animation: move_in 0.55s 0.05s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
  transition: all 0.3s 0.36s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.app_inner input[type="radio"]:not(checked) + label .app_inner__tab .tab_left .tab_left__image {
  -webkit-animation: move_out 0.75s 0s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
          animation: move_out 0.75s 0s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
  transition: all 0.3s 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.app_inner input[type="radio"]:checked + label .app_inner__tab .tab_left .big {
  left: 260px;
}
.app_inner input[type="radio"]:not(checked) + label .app_inner__tab .tab_left .big {
  left: 400px;
}
.app_inner input[type="radio"]:checked + label .app_inner__tab h2 i {
  opacity: 0;
}
.app_inner input[type="radio"]:not(checked) + label .app_inner__tab h2 i {
  opacity: .3;
}
.app_inner label {
  display: block;
  width: 100%;
}
.app_inner label:nth-of-type(1) .app_inner__tab {
  background: #99b998;
  height: 200px;
}
.app_inner label:nth-of-type(1) .app_inner__tab:hover {
  transition: all .2s;
  background: #8db18c;
}
.app_inner label:nth-of-type(1) .app_inner__tab .tab_left__image {
  background: #EA495F;
}
.app_inner label:nth-of-type(2) .app_inner__tab {
  background: #E4B794;
}
.app_inner label:nth-of-type(2) .app_inner__tab:hover {
  transition: all .2s;
  background: #e0ac84;
}
.app_inner label:nth-of-type(2) .app_inner__tab .tab_left__image {
  background: #99B998;
}
.app_inner label:nth-of-type(3) .app_inner__tab {
  background: #f4837d;
}
.app_inner label:nth-of-type(3) .app_inner__tab:hover {
  transition: all .2s;
  background: #f2716a;
}
.app_inner label:nth-of-type(3) .app_inner__tab .tab_left__image {
  background: #E4B794;
}
.app_inner label:nth-of-type(4) .app_inner__tab {
  background: #ea495f;
}
.app_inner label:nth-of-type(4) .app_inner__tab:hover {
  transition: all .2s;
  background: #e8374f;
}
.app_inner label:nth-of-type(4) .app_inner__tab .tab_left__image {
  background: #F4837D;
}
.app_inner__tab {
  width: 100%;
  height: 80px;
  background: red;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: all 0.65s cubic-bezier(1, 0, 0.41, 1.01);
}
.app_inner__tab h2 {
  position: absolute;
  right: 20px;
  top: 16px;
  color: #1a1c1d;
  font-size: 18px;
}
.app_inner__tab h2 i {
  position: absolute;
  right: 271px;
  opacity: 0.3;
  transition: all .3s;
}
.app_inner__tab .tab_right {
  width: 60%;
  float: right;
  position: relative;
  top: 200px;
  text-align: right;
  padding: 20px;
	line-height: normal;
	
}
.app_inner__tab .tab_right h3, .app_inner__tab .tab_right h4, .app_inner__tab .tab_right p {
  margin: 0;
}
.app_inner__tab .tab_right h3 {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}
.app_inner__tab .tab_right h4 {
  font-size: 12px;
  margin: 4px 0px;
  color: rgba(0, 0, 0, 0.33);
}
.app_inner__tab .tab_right p {
  font-size: 11px;
  color: white;
}
.app_inner__tab .tab_right button {
  margin-top: 10px;
  border: 2px solid white;
  background: none;
  border-radius: 5px;
  padding: 6px 20px;
  cursor: pointer;
  font-family: 'Roboto Condensed', sans-serif;
  outline: none;
  font-size: 11px;
  color: white;
  transition: all .3s;
}
.app_inner__tab .tab_right button:hover {
  background: white;
  color: black;
}
.app_inner__tab .tab_left {
  width: 30%;
  float: left;
  position: relative;
}
.app_inner__tab .tab_left .big {
  position: absolute;
  top: -17px;
  transition: all .3s .3s;
  left: 390px;
  font-size: 180px;
  opacity: 0.08;
}
.app_inner__tab .tab_left__image {
  position: relative;
  top: -100px;
  text-align: center;
  background: white;
  left: 47px;
  border-radius: 20px;
  width: 80px;
  height: 80px;
}
.app_inner__tab .tab_left__image i {
  color: white;
  font-size: 40px;
  top: 18px;
  position: relative;
}

@-webkit-keyframes move_out {
  0% {
    top: 47px;
  }
  100% {
    top: 200px;
  }
}

@keyframes move_out {
  0% {
    top: 47px;
  }
  100% {
    top: 200px;
  }
}
@-webkit-keyframes move_in {
  0% {
    top: -200px;
  }
  100% {
    top: 47px;
  }
}
@keyframes move_in {
  0% {
    top: -200px;
  }
  100% {
    top: 47px;
  }
}
@-webkit-keyframes bump {
  0% {
    top: 16px;
  }
  25% {
    top: 13px;
  }
  50% {
    top: 16px;
  }
  75% {
    top: 13px;
  }
  100% {
    top: 16px;
  }
}
@keyframes bump {
  0% {
    top: 16px;
  }
  25% {
    top: 13px;
  }
  50% {
    top: 16px;
  }
  75% {
    top: 13px;
  }
  100% {
    top: 16px;
  }
}
@-webkit-keyframes intro {
  0% {
    -webkit-transform: translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(40deg);
            transform: translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(40deg);
  }
  100% {
    -webkit-transform: translateY(-50%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            transform: translateY(-50%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
}
@keyframes intro {
  0% {
    -webkit-transform: translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(40deg);
            transform: translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(40deg);
  }
  100% {
    -webkit-transform: translateY(-50%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            transform: translateY(-50%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
}

Demo Download
Previous Post

Pure CSS Responsive Vertical Tabs

Next Post

Fancy CSS Horizontal Accordion with Transition

Next Post
Fancy CSS Horizontal Accordion with Transition

Fancy CSS Horizontal Accordion with Transition

Comments 1

  1. mo says:
    3 years ago

    Hello there,
    this tutorial was very helpfull….keep goin 🙂

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe More Tutorials

Subscribe to our mailing list to receives monthly updates direct to your inbox!

You might also like

CSS Flip Animation on Hover – Flipping Card

CSS Flip Animation on Hover – Flipping Card

January 7, 2020
CSS Percentage Circle

Pure CSS Percentage Circle With Animation

January 21, 2023
Easy to Apply CSS Image Hover Transition Effects

CSS Image Hover Transition Effects

December 5, 2019
Video Parallax Background

Fullscreen Video Parallax Background Using CSS3

December 22, 2019
Codeconvey

© 2023 Codeconvey.com - All rights reserved.

Navigate Site

  • Home
  • About Us
  • Contact us
  • License
  • Disclaimer
  • DMCA
  • Terms & Conditions

Follow Us

No Result
View All Result
  • Home
  • CSS Animation
  • CSS Navigation
  • HTML Forms
  • Hover Effects
  • CSS Slideshow
  • Layout
  • Modal & Popup
  • How To
  • Resources

© 2023 Codeconvey.com - All rights reserved.