Learn How to Create a Vertical Slide-Out Menu with CSS Transitions

In this tutorial, we’re going to create a vertical slide-out menu using CSS3 transitions. The menus will be place on the left-side of the screen with the main links hiding off-screen at first, and they will then transition into view upon hover. No JavaScript will be used in this tutorial.

What You Will Need:

What We Will Be Creating::

vertical slide out menu using CSS3 transitions

Download Source Files View Demo

Creating the Markup

For our markup, we will wrap everything in a container. We will then use an unordered list with the class icon-menu for our menu items:

<div class="container">
  <ul class="icon-menu">
    <li></li>
  </ul>
</div>

Next, on our list of items, we’re going to add the class icon-box with its title class (e.g. home, design etc.). Then we’ll add the Font Awesome icon (4x) and place an <h2> tag within an anchor tag:

You can visit this page here ) if you want to choose some other icons.

<div class="container">
  <ul class="icon-menu">
    <li class="icon-box home">
      <i class="fa fa-home fa-4x"></i> <a href="#">
      <h2>Home</h2></a>
    </li>
    <li class="icon-box design">
      <i class="fa fa-paint-brush fa-4x"></i> <a href="#">
      <h2>Design</h2></a>
    </li>
    <li class="icon-box coding">
      <i class="fa fa-code fa-4x"></i> <a href="#">
      <h2>Coding</h2></a>
    </li>
    <li class="icon-box shop">
      <i class="fa fa-shopping-cart fa-4x"></i> <a href="#">
      <h2>Shop</h2></a>
    </li>
    <li class="icon-box contact">
      <i class="fa fa-envelope fa-4x"></i> <a href="#">
      <h2>Contact</h2></a>
    </li>
  </ul>
</div>

Adding the Style

Before we move forward on to the main CSS, let’s add some general styles for both our minor elements and menu lists elements:

@import  "https://fonts.googleapis.com/css?family=Lato:400,100,300,700,900";

body {
  font-family: 'Lato',sans-serif;
  background: #ecf0f1;
  overflow: hidden;
}

a {
  text-decoration: none;
}

h2 {
  color: #fff;
  font-size: 22px;
  margin: 0 24px;
  font-weight: 300;
}

/*= ICON BOXES
--------------------------------------------------------*/
ul.icon-menu {
  margin-top: 16px;
}

li.icon-box {
  width: 120px;
  height: 120px;
  list-style: none;
  left: -47px;
  position: relative;
  margin-bottom: 3px;
}

li.icon-box.home {
  background: #2b99ce;
}

li.icon-box.design {
  background: #24cccd;
}

li.icon-box.coding {
  background: #9a639a;
}

li.icon-box.shop {
  background: #c44745;
}

li.icon-box.contact {
  background: #2d9a63;
}

.icon-box h2 {
  font-size: 20px;
  text-shadow: 1px 1px 2px rgba(150,150,150,1);
}

.icon-box a {
  display: block;
  padding: 0;
  width: 120px;
  height: 120px;
}

i.fa {
  position: absolute;
  pointer-events: none;
  color: #fff;
  margin: 16px 0 0 14px;
}

.icon-box a:focus,.icon-box a:active {
  outline: none;
}

On the styles above, we basically added width and backgrounds to each of the boxes where the icons have been placed, and then positioned them on the left-side.

Next, let’s animate the Font awesome Icons. For the hover effects we’ll use a combination of CSS3 transitions and transformations. When the user hovers over the Font Awesome icons, the position of the rgba background element in the 3D space will move using the 3-dimension vector whose coordinates describe how much it moves in each direction. The CSS3 transition property was also applied to the transform property for a smoother effect.

.icon-box a {
  padding: 120px;
}

.icon-menu i {
  border-radius: 50%;
  box-shadow: 0 0 0 50px transparent;
  padding: .2em .25em;
  background: rgba(255,255,255,0.1);
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-transition: box-shadow .6s ease-in-out;
  -moz-transition: box-shadow .6s ease-in-out;
  -o-transition: box-shadow .6s ease-in-out;
  -ms-transition: box-shadow .6s ease-in-out;
  transition: box-shadow .6s ease-in-out;
}

.icon-menu li:hover i,.icon-menu li:active i,.icon-menu li:focus i {
  box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
  -webkit-transition: box-shadow .4s ease-in-out;
  -moz-transition: box-shadow .4s ease-in-out;
  -o-transition: box-shadow .4s ease-in-out;
  -ms-transition: box-shadow .4s ease-in-out;
  transition: box-shadow .4s ease-in-out;
}

For our main menu links, using the icon-box and title class within the <h2> tag, we will manipulate the position and appearance of each list item (on hover mode) with CSS3 transitions. This will add a smoother effect:

.icon-box.home h2 {
  z-index: -999;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background: #2b99ce;
  line-height: 120px;
  width: 120px;
  -webkit-transition: all .3s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  border-left: 3px solid #247eaa;
}

.icon-box.home a:hover h2 {
  opacity: 1;
  left: 120px;
  margin: 0;
  text-align: center;
}

.icon-box.design h2 {
  z-index: -999;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background: #24cccd;
  line-height: 120px;
  width: 120px;
  -webkit-transition: all .3s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  border-left: 3px solid #1da7a8;
}

.icon-box.design a:hover h2 {
  opacity: 1;
  left: 120px;
  margin: 0;
  text-align: center;
}

.icon-box.coding h2 {
  z-index: -999;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background: #9a639a;
  line-height: 120px;
  width: 120px;
  -webkit-transition: all .3s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  border-left: 3px solid #6d466d;
}

.icon-box.coding a:hover h2 {
  opacity: 1;
  left: 120px;
  margin: 0;
  text-align: center;
}

.icon-box.shop h2 {
  z-index: -999;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background: #c44745;
  line-height: 120px;
  width: 120px;
  -webkit-transition: all .3s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  border-left: 3px solid #9b3735;
}

.icon-box.shop a:hover h2 {
  opacity: 1;
  left: 120px;
  margin: 0;
  text-align: center;
}

.icon-box.contact h2 {
  z-index: -999;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background: #2d9a63;
  line-height: 120px;
  width: 120px;
  -webkit-transition: all .3s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  border-left: 3px solid #1e6b44;
}

.icon-box.contact a:hover h2 {
  opacity: 1;
  left: 120px;
  margin: 0;
  text-align: center;
}

Finished!

There it is! A nice vertical slide-out menus, ready to drop into your nest hosted project. With some basic knowledge of HTML and CSS3 animation, you can easily change the look of the menu and features for tiles.

Don’t forget to download the source files.

Comments

  • Fredslund

    The demo should need a little fixing; While the effect works good, the handler seems to start almost at the middle of the page for the first buttons, while the next button’s handler depends on the text in the middle of the page. Adjust the browser width to see the handler change size.

    For best implementation, the handler should be the exact size of the actual button and expand when you mouse over a button to also cover the slide out content.

  • Petr

    Hi there Sam!

    Great tutorial!

    Thanks! for this excellent menu: exactly what I was looking for and I believe your work is awesome ;)

    I’m only using the slide in right and left as of right now since the theme already offers the users two more menu options since before.

    I forked your source and added a method to check whether the slider is open.

    keep going Sam! Learning a lot from you!

  • Petr

    ” the handler should be the exact size of the actual button and expand when you mouse over a button” I don’t see any issues here. The demo is just good on any browsers.

  • Fredslund

    In Chrome (the newest version) resize the window to something like 900px width and 750px height. This is so I can explain where to move your mouse.

    Place your cursor between “S” and “3” in the word “CSS3” and move it slowly up. After about 100 pixels, the “Design” menu will suddenly pop out. Move back to the CSS3 text (and the menu will close) and now move left. About 50px after you pass the “C” the Design menu will open again.

    The reason for this is that there is a 120px padding on “.icon-box a” having a width of 120px. As the A is a block element, it becomes 240px.

    Please see the attached screenshot from Chrome. The colored area is the active a-link as Chrome sees it.

    And I have just testet in Egde and Internet Explorer 11. Exact same problem.