CSS Transition – How to Create Slide Down Effect in CSS3

How to Create Slide Effect in CSS3

This tutorial about how to create Slide Down Menu effects using a CSS Transition and Transform.with the help of this technique you can easily create slide effect in css without any jquery or javascript.

HTML

<ul class="menu">
  <li><a href="#">Angular</a>
  <ul class="dropdown">
  <li><a href="#">List</a></li>
  <li><a href="#">List</a></li>
<li><a href="#">List</a></li>
<li><a href="#">List</a></li>
<li><a href="#">List</a></li>
<li><a href="#">List</a></li>
  </ul>
  </li>
  <li><a href="#">React</a></li>
  <li><a href="#">HTML5</a></li>
</ul>

Basic CSS

.menu{margin:30px; list-style:none; max-width:200px;}
.menu>li{position:relative; border-bottom:1px solid #eee; line-height:30px;}
.menu>li:hover{background-color:#eeeee2;}
.menu>li>a{padding:5px 20px; display:block;}
.menu>li>a:hover, .menu>li>a:focus{text-decoration:none;}
 .dropdown {position:absolute;width:100%;z-index:10;  background-color: #eee;height:0;list-style:none; margin:0; padding:0; overflow:hidden;
}
.dropdown li{line-height:30px;}
.dropdown a{display:block; padding:7px 20px;}
.dropdown a:hover, .dropdown a:focus{background-color:rgba(255,255,255,0.5); text-decoration:none;}

Final CSS

.menu{margin:30px; list-style:none; max-width:200px;}
.menu>li{position:relative; border-bottom:1px solid #eee; line-height:30px;}
.menu>li:hover{background-color:#eeeee2;}
.menu>li>a{padding:5px 20px; display:block;}
.menu>li>a:hover, .menu>li>a:focus{text-decoration:none;}
 .dropdown {position:absolute;width:100%;z-index:10;  background-color: #eee;height:0;list-style:none; margin:0; padding:0; overflow:hidden;
    -webkit-transform: scaleY(0);-ms-transform: scaleY(0);transform: scaleY(0);    
    -webkit-transform-origin: top;-ms-transform-origin: top;transform-origin: top;
    -webkit-transition: -webkit-transform 0.26s ease;transition: -webkit-transform 0.26s ease;-o-transition: transform 0.26s ease;transition: transform 0.26s ease;transition: transform 0.26s ease, -webkit-transform 0.26s ease;
}
.dropdown li{line-height:30px;}
.dropdown a{display:block; padding:7px 20px;}
.dropdown a:hover, .dropdown a:focus{background-color:rgba(255,255,255,0.5); text-decoration:none;}
.menu li:hover .dropdown {-webkit-transform: scaleY(1);-ms-transform: scaleY(1);transform: scaleY(1);
height:auto;}

Related Articles

Leave a Reply

Be the First to Comment!

Notify of
avatar