How to make a Pure CSS drop down box by using CSS3 animations and a checkbox hack



In this tutorial I will show you how to make a drop down box by using CSS3 animations and a checkbox hack. Usually these are made with the help of jQuery but thanks to CSS3 we can do this with the transition property.

Let’s have a look at the demo!

See the Pen HJCDf by Creative Punch (@CreativePunch) on CodePen.

Awesome huh? Let’s look at how this CSS3 drop down box was made.

The HTML5 for the drop down box

Let’s look at the HTML5 markup for this demo in closer detail.

<!-- The drop down slider box -->
<section class="slider">

  <!-- The checkbox, we will do a litle hacking on this -->
  <input type="checkbox" id="toggle">
 <!-- We will make this label into our toggle button. -->
  <label for="toggle">
    <!-- This is an icon for which I use entypo. You can change this to anything -->
    <i class="toggle-icon"></i>
  </label>

  <!-- This will be the content of our drop down slider box -->
  <section class="main-content">
    <h1>CSS3 Drop down box</h1>
  </section>

</section>

I commented the HTML above to make it easy. One important note that needs to be added here is that it’s important to have the content come after the checkbox. We need this to make use of the ~ selector. This selector is used to select an element that comes after another element. In this case we need to select the content that comes after the checkbox.

So let’s style this thing!

The checkbox hack for the drop down toggle button

So let’s see how we turn a checkbox and a label into a nice toggle button. First of all, I used icons from the entypo webfont. I used a down arrow for the unchecked state, and an up arrow for the checked state.



input#toggle + label i.toggle-icon:before {
  font-family: 'entypo', sans-serif;
  content: "\e764";
}

input#toggle:checked + label i.toggle-icon:before {
  content: "\e767";
}

Now of course we need to hide the checkbox itself and add some extra styling to the label. It is important to initialize top to 0 on the label for the animation to work. Alternatively you could use the transform property for animation.

.slider input#toggle {
  display: none;
}

.slider input#toggle + label {
  font-size: 25px;
  width: 25px;
  height: 25px;
  display: inline-block;
  padding: 10px;
  color: white;
  background: #8f2c2c;
  position: relative;
  top: 0;
  transition: top 0.5s ease-in-out;
}

In the transition property we define the property to animate, the speed, and a transition function.

And here is some general styling for the slider and the content. Though you are pretty much free to do with this what you want.

.slider {
  width: 600px;
  text-align: center;
  margin: 0 auto;
}

.slider .main-content {
  background: #eee;
  height: 150px;
  position: relative;
  top: -195px;
  transition: top 0.5s ease-in-out;
}

.slider .main-content h1 {
  line-height: 150px;
  color: #30303f;
  width: 100%;
  text-stroke: 1px;
  font-size: 30px;
  text-shadow: 0 1px 1px #000;
  font-family: "Roboto"
}

Animating the drop down box with CSS3

Now let’s see how easy it can be to animate our CSS3 drop down box:

input#toggle:checked + label {
  top: 150px;
}

input#toggle:checked ~ .main-content {
  top: -45px;
}

What we do here is adjust the position of our checkbox label and the content of the drop down box. This change in property will be animated as specified by the transition property we defined earlier. Note how we used the ~ selector to target the .main-content class that comes after the checkbox.

Now we can toggle this drop down box by clicking the label!

Share the knowledge!
Share on Facebook0Tweet about this on Twitter0Share on Google+0Share on StumbleUpon8Share on Reddit0Share on LinkedIn0Share on TumblrBuffer this pageDigg this

Comments

You may also like...

Stay updated
Subscribe!