Skip to content

Instantly share code, notes, and snippets.

@neonxp
Created May 17, 2012 13:13
Show Gist options
  • Save neonxp/2718819 to your computer and use it in GitHub Desktop.
Save neonxp/2718819 to your computer and use it in GitHub Desktop.
menu
/**
* Name: Nice Menu
* Version: 0.2
* Author: Marcell Jusztin - http://www.marcelljusztin.com
* Description: A simple, elegant, colorful, CSS3 animated menu
* Tags: css3, animation, menu, simple, elegant, colourful
* License: http://creativecommons.org/licenses/by-sa/3.0/
*
* Changelog v0.2:
* - Changed animation to support percentage, so there is no need to update values one-by-one
*
*
**/
ul.nice-menu {
list-style: none;
margin-top: 30px;
width: 200px; /* Set the size here */
overflow: hidden;
margin-left: 5%;
}
@-moz-keyframes expand {
0% {
width: 5%;
padding-left: 0px;
margin-left:95%;
}
100% {
width: 100%;
padding-left: 20px;
margin-left:0%;
}
}
@-moz-keyframes expand-bounce {
0% {
width: 5%;
padding-left: 0px;
margin-left:95%;
}
50% {
width: 100%;
margin-left:0%;
}
70% {
width: 85%;
margin-left:15%;
}
80% {
width: 100%;
margin-left:0%;
}
90% {
width: 95%;
margin-left:5%;
}
100% {
width: 100%;
margin-left:0%;
padding-left: 20px;
}
}
@-webkit-keyframes expand {
0% {
width: 5%;
padding-left: 0px;
margin-left:95%;
}
100% {
width: 100%;
padding-left: 20px;
margin-left:0%;
}
}
@-webkit-keyframes expand-bounce {
0% {
width: 5%;
padding-left: 0px;
margin-left:95%;
}
50% {
width: 100%;
margin-left:0%;
}
70% {
width: 85%;
margin-left:15%;
}
80% {
width: 100%;
margin-left:0%;
}
90% {
width: 95%;
margin-left:5%;
}
100% {
width: 100%;
padding-left: 20px;
margin-left:0%;
}
}
@-moz-keyframes shrink {
0% {
width: 100%;
padding-left: 20px;
margin-left:0%;
}
100% {
width: 5%;
padding-left: 0px;
margin-left:95%;
}
}
@-moz-keyframes shrink-bounce {
0% {
width: 100%;
padding-left: 20px;
margin-left:0%;
}
50% {
width: 5%;
margin-left:95%;
}
70% {
width: 20%;
margin-left:80%;
}
80% {
width: 5%;
margin-left:95%;
}
90% {
width: 10%;
margin-left:90%;
}
100% {
width: 5%;
margin-left:95%;
padding-left: 0px;
}
}
@-webkit-keyframes shrink {
0% {
width: 100%;
padding-left: 20px;
margin-left:0%;
}
100% {
width: 5%;
margin-left:95%;
padding-left: 0px;
}
}
@-webkit-keyframes shrink-bounce {
0% {
width: 100%;
margin-left:0%;
padding-left: 20px;
}
50% {
width: 5%;
margin-left:95%;
}
70% {
width: 20%;
margin-left:80%;
}
80% {
width: 5%;
margin-left:95%;
}
90% {
width: 10%;
margin-left:90%;
}
100% {
width: 5%;
margin-left: 95%;
padding-left: 0px;
}
}
ul.nice-menu li {
height: 30px;
line-height: 20px;
padding: 0px 0px 0px 0px;
margin-top: 3px;
background: transparent;
width: 5%;
margin-left:95%;
}
ul.nice-menu.tight li {
margin-top: 0 !important;
}
ul.nice-menu li {
-moz-animation-name: shrink;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: shrink;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes a-expand {
0% {
padding: 5px 0px;
margin-left:-100px;
}
100% {
margin-left:0px;
}
}
@-webkit-keyframes a-shrink {
0% {
margin-left:0px;
}
100% {
padding: 5px 0px;
margin-left:-100px;
}
}
ul.nice-menu a {
-moz-animation-name: a-shrink;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: a-shrink;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu a:hover {
-moz-animation-name: a-expand;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: a-expand;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu.bounce li {
-moz-animation-name: shrink-bounce;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: shrink-bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu li:hover {
width: 100%;
padding-left: 20px;
margin-left:0px;
-moz-animation-name: expand;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: expand;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu.bounce li:hover {
-moz-animation-name: expand-bounce;
-moz-animation-duration: 0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name: expand-bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-timing-function: ease-in-out;
}
ul.nice-menu a {
width: 100%;
text-decoration: none;
font-size: 14px;
color: #FFF;
text-shadow: 0px 0px 3px #333;
font-weight: bold;
position: absolute;
padding: 5px 0px;
padding-left: 20px;
margin-left: -100px;
}
ul.nice-menu a:hover {
margin-left: 0px;
}
ul.nice-menu li.green {
background: rgb(107,186,112);
}
ul.nice-menu li.blue {
background: rgb(78,92,127);
}
ul.nice-menu li.orange {
background: rgb(216,121,40);
}
ul.nice-menu li.dark {
background: rgb(42,32,30);
}
ul.nice-menu li.red {
background: rgb(178,59,30);
}
ul.nice-menu li.bright {
background: rgb(241,249,210);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment