Fancy, little animation for a dropdown menu or list. Using CSS3 animations and jQuery.
Forked from Karsten Buckstegge's Pen Dropdown Menu Animation.
Created
May 14, 2014 16:08
-
-
Save almcarvalho/4cdf942b6e6bc1dde957 to your computer and use it in GitHub Desktop.
A Pen by LUCAS.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Drop Menu</title> | |
| <link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'> | |
| </head> | |
| <body> | |
| <div class="commander"><p>Click the Button!</p></div> | |
| <div class="wrapper"> | |
| <div class="menu"> | |
| <div class="table"> | |
| <ul class="menu__list hidden"> | |
| <li class="menu__list__item item1"><a href="#">Home</a></li> | |
| <li class="menu__list__item item2"><a href="#">Portfolio</a></li> | |
| <li class="menu__list__item item3"><a href="#">About</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="button"> | |
| <div class="line line__first"></div> | |
| <div class="line"></div> | |
| <div class="line"></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // function to trigger animation | |
| $('.button').click(function() { | |
| // check if the menu-items are hidden behind the button | |
| if ($('.menu__list').hasClass('hidden')) { | |
| // add class to make the menu-items drop down | |
| $('.item1').addClass('list--animation'); | |
| // the following items trigger the animation after a certain delay | |
| $('.item2').addClass('list--animation--delay1'); | |
| $('.item3').addClass('list--animation--delay2'); | |
| // remove the hidden class from the ul container to show that the items are not hidden anymore | |
| $('.menu__list').removeClass('hidden'); | |
| } | |
| else { | |
| // remove class to make the menu-items disappear | |
| $('.item1').removeClass('list--animation'); | |
| $('.item2').removeClass('list--animation--delay1'); | |
| $('.item3').removeClass('list--animation--delay2'); | |
| // add the hidden class to the ul container to show that the items are now hidden again | |
| $('.menu__list').addClass('hidden'); | |
| } | |
| }); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "compass/css3"; | |
| html { | |
| width: 100% ; | |
| height: 100% ; | |
| background: radial-gradient(center, #FFF 0%, #CCC 70%, #CCC 100%) no-repeat; | |
| background: -moz-radial-gradient(center, #FFF 0%, #CCC 70%, #CCC 100%) no-repeat; | |
| background: -webkit-radial-gradient(center, #FFF 0%, #CCC 70%, #CCC 100%) no-repeat; | |
| } | |
| .commander { | |
| position: relative; | |
| margin-left: -100px; | |
| left: 50%; | |
| } | |
| .commander p { | |
| width: 200px; | |
| color: #2E3F47; | |
| font-size: 1.5em; | |
| font-family: 'Open Sans', sans-serif; | |
| text-align: center; | |
| } | |
| .wrapper { | |
| width: 150px; | |
| margin: 10px auto; | |
| } | |
| .button { | |
| position: relative; | |
| width: 150px; | |
| height: 150px; | |
| border: 1px solid; | |
| border-radius: 50%; | |
| background: #2E3F47; | |
| z-index: 10; | |
| } | |
| .line { | |
| background: #ccc; | |
| width: 90px; | |
| height: 15px; | |
| margin: 15px auto; | |
| } | |
| .line__first { | |
| margin-top: 37px; | |
| } | |
| .menu { | |
| z-index: 1; | |
| float: left; | |
| width: 100%; | |
| } | |
| /* for the list to be horizontaly centered */ | |
| .table { | |
| display: table; | |
| margin: 0 auto; | |
| } | |
| .menu__list { | |
| text-align: center; | |
| width: 100%; | |
| padding-left: 0; | |
| } | |
| /* Animation keyframes for the drop down */ | |
| @keyframes drop { | |
| from { | |
| top: 0px; | |
| } | |
| 70% { | |
| top: 165px; | |
| animation-timing-function: ease-in; | |
| } | |
| to { | |
| top: 150px; | |
| animation-timing-function: ease-out; | |
| } | |
| } | |
| @-webkit-keyframes drop { | |
| from { | |
| top: 0px; | |
| } | |
| 70% { | |
| top: 165px; | |
| -webkit-animation-timing-function: ease-in; | |
| } | |
| to { | |
| top: 150px; | |
| -webkit-animation-timing-function: ease-out; | |
| } | |
| } | |
| li { | |
| position: relative; | |
| list-style: none; | |
| padding-bottom: 15px; | |
| top: 0px; | |
| } | |
| li a { | |
| text-decoration: none; | |
| color: grey; | |
| text-align: center; | |
| font-size: 1.5em; | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| .menu__list__item { | |
| opacity: 0; | |
| } | |
| /*Animation classes to add to list-items that should be animated*/ | |
| .list--animation, .list--animation--delay1, .list--animation--delay2 { | |
| animation: drop 0.9s; | |
| -webkit-animation: drop 0.9s; | |
| animation-fill-mode: forwards; | |
| opacity: 1; | |
| -webkit-animation-fill-mode: forwards; | |
| opacity: 1; | |
| } | |
| .list--animation--delay1 { | |
| animation-delay: 0.5s; | |
| -webkit-animation-delay: 0.5s; | |
| } | |
| .list--animation--delay2 { | |
| animation-delay: 1s; | |
| -webkit-animation-delay: 1s; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment