Menu #2
Give your rating
3.7
3 votes
- 79+
- 55+
- 81+
- 42+
- 9.1+
- 55+
- 95+
- 42+
- 9.3+
- 6+
- 55+
Demo
- 16.31 KB
- HTML, CSS
- Menu
- animation, horizontal
- MIT License
HTML
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
<li>Careers</li>
</ul>
</nav>
CSS
@import url("https://fonts.googleapis.com/css?family=Varela+Round");
body {
font-family: monospace;
text-transform: uppercase;
}
ul {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
flex-direction: row;
font-size: 22px;
}
li {
position: relative;
list-style-type: none;
margin-right: 50px;
cursor: pointer;
color: white;
}
li:last-child {
margin-right: 0px;
}
li:after {
content: "";
position: absolute;
z-index: -1;
left: 50%;
-webkit-transform: translateX(-50%) rotate(0deg);
-moz-transform: translateX(-50%) rotate(0deg);
-o-transform: translateX(-50%) rotate(0deg);
transform: translateX(-50%) rotate(0deg);
}
li:nth-child(1):after {
background: #ed4337;
}
li:nth-child(2):after {
background: #a1d3a2;
}
li:nth-child(3):after {
background: #50b8e7;
}
li:nth-child(4):after {
background: #efe200;
}
li:nth-child(1):after {
-webkit-clip-path: polygon(6% 10%, 100% 0, 64% 65%, 28% 65%);
clip-path: polygon(6% 10%, 100% 0, 64% 65%, 28% 65%);
height: 85px;
width: 75px;
bottom: -47px;
-webkit-animation: stretch 2s ease infinite;
-moz-animation: stretch 2s ease infinite;
-o-animation: stretch 2s ease infinite;
animation: stretch 2s ease infinite;
}
@-webkit-keyframes stretch {
25% {
-webkit-transform: translateX(-50%) rotate(2deg) scaleY(0.93);
transform: translateX(-50%) rotate(2deg) scaleY(0.93);
}
50% {
-webkit-transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
-webkit-clip-path: polygon(6% 20%, 100% 0, 64% 65%, 28% 65%);
clip-path: polygon(6% 20%, 100% 0, 64% 65%, 28% 65%);
}
75% {
-webkit-transform: translateX(-50%) rotate(3deg) scale(1.05);
transform: translateX(-50%) rotate(3deg) scale(1.05);
}
}
@-moz-keyframes stretch {
25% {
-moz-transform: translateX(-50%) rotate(2deg) scaleY(0.93);
transform: translateX(-50%) rotate(2deg) scaleY(0.93);
}
50% {
-moz-transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
clip-path: polygon(6% 20%, 100% 0, 64% 65%, 28% 65%);
}
75% {
-moz-transform: translateX(-50%) rotate(3deg) scale(1.05);
transform: translateX(-50%) rotate(3deg) scale(1.05);
}
}
@-o-keyframes stretch {
25% {
-o-transform: translateX(-50%) rotate(2deg) scaleY(0.93);
transform: translateX(-50%) rotate(2deg) scaleY(0.93);
}
50% {
-o-transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
clip-path: polygon(6% 20%, 100% 0, 64% 65%, 28% 65%);
}
75% {
-o-transform: translateX(-50%) rotate(3deg) scale(1.05);
transform: translateX(-50%) rotate(3deg) scale(1.05);
}
}
@keyframes stretch {
25% {
-webkit-transform: translateX(-50%) rotate(2deg) scaleY(0.93);
-moz-transform: translateX(-50%) rotate(2deg) scaleY(0.93);
-o-transform: translateX(-50%) rotate(2deg) scaleY(0.93);
transform: translateX(-50%) rotate(2deg) scaleY(0.93);
}
50% {
-webkit-transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
-moz-transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
-o-transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
-webkit-clip-path: polygon(6% 20%, 100% 0, 64% 65%, 28% 65%);
clip-path: polygon(6% 20%, 100% 0, 64% 65%, 28% 65%);
}
75% {
-webkit-transform: translateX(-50%) rotate(3deg) scale(1.05);
-moz-transform: translateX(-50%) rotate(3deg) scale(1.05);
-o-transform: translateX(-50%) rotate(3deg) scale(1.05);
transform: translateX(-50%) rotate(3deg) scale(1.05);
}
}
li:nth-child(2):after {
-webkit-clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 0% 100%);
clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 0% 100%);
height: 55px;
width: 75px;
bottom: -18px;
-webkit-animation: stretch2 1.5s ease infinite;
-moz-animation: stretch2 1.5s ease infinite;
-o-animation: stretch2 1.5s ease infinite;
animation: stretch2 1.5s ease infinite;
}
@-webkit-keyframes stretch2 {
25% {
-webkit-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
}
50% {
-webkit-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
-webkit-clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 12% 100%);
clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 12% 100%);
}
75% {
-webkit-transform: translateX(-50%) rotate(3deg) scale(1.05);
transform: translateX(-50%) rotate(3deg) scale(1.05);
-webkit-clip-path: polygon(61% 0%, 80% 19%, 71% 100%, 12% 100%);
clip-path: polygon(61% 0%, 80% 19%, 71% 100%, 12% 100%);
}
}
@-moz-keyframes stretch2 {
25% {
-moz-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
}
50% {
-moz-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 12% 100%);
}
75% {
-moz-transform: translateX(-50%) rotate(3deg) scale(1.05);
transform: translateX(-50%) rotate(3deg) scale(1.05);
clip-path: polygon(61% 0%, 80% 19%, 71% 100%, 12% 100%);
}
}
@-o-keyframes stretch2 {
25% {
-o-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
}
50% {
-o-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 12% 100%);
}
75% {
-o-transform: translateX(-50%) rotate(3deg) scale(1.05);
transform: translateX(-50%) rotate(3deg) scale(1.05);
clip-path: polygon(61% 0%, 80% 19%, 71% 100%, 12% 100%);
}
}
@keyframes stretch2 {
25% {
-webkit-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
-moz-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
-o-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
}
50% {
-webkit-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
-moz-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
-o-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
-webkit-clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 12% 100%);
clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 12% 100%);
}
75% {
-webkit-transform: translateX(-50%) rotate(3deg) scale(1.05);
-moz-transform: translateX(-50%) rotate(3deg) scale(1.05);
-o-transform: translateX(-50%) rotate(3deg) scale(1.05);
transform: translateX(-50%) rotate(3deg) scale(1.05);
-webkit-clip-path: polygon(61% 0%, 80% 19%, 71% 100%, 12% 100%);
clip-path: polygon(61% 0%, 80% 19%, 71% 100%, 12% 100%);
}
}
li:nth-child(3):after {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 0% 57%);
clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 0% 57%);
height: 55px;
width: 45px;
bottom: -18px;
-webkit-animation: stretch3 2s ease infinite;
-moz-animation: stretch3 2s ease infinite;
-o-animation: stretch3 2s ease infinite;
animation: stretch3 2s ease infinite;
}
@-webkit-keyframes stretch3 {
25% {
-webkit-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
}
50% {
-webkit-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
-webkit-clip-path: polygon(10% 5%, 100% 0%, 100% 99%, 0% 57%);
clip-path: polygon(10% 5%, 100% 0%, 100% 99%, 0% 57%);
}
75% {
-webkit-transform: translateX(-50%) rotate(3deg) scale(1.05);
transform: translateX(-50%) rotate(3deg) scale(1.05);
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 10% 37%);
clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 10% 37%);
}
}
@-moz-keyframes stretch3 {
25% {
-moz-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
}
50% {
-moz-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
clip-path: polygon(10% 5%, 100% 0%, 100% 99%, 0% 57%);
}
75% {
-moz-transform: translateX(-50%) rotate(3deg) scale(1.05);
transform: translateX(-50%) rotate(3deg) scale(1.05);
clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 10% 37%);
}
}
@-o-keyframes stretch3 {
25% {
-o-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
}
50% {
-o-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
clip-path: polygon(10% 5%, 100% 0%, 100% 99%, 0% 57%);
}
75% {
-o-transform: translateX(-50%) rotate(3deg) scale(1.05);
transform: translateX(-50%) rotate(3deg) scale(1.05);
clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 10% 37%);
}
}
@keyframes stretch3 {
25% {
-webkit-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
-moz-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
-o-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
}
50% {
-webkit-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
-moz-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
-o-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
-webkit-clip-path: polygon(10% 5%, 100% 0%, 100% 99%, 0% 57%);
clip-path: polygon(10% 5%, 100% 0%, 100% 99%, 0% 57%);
}
75% {
-webkit-transform: translateX(-50%) rotate(3deg) scale(1.05);
-moz-transform: translateX(-50%) rotate(3deg) scale(1.05);
-o-transform: translateX(-50%) rotate(3deg) scale(1.05);
transform: translateX(-50%) rotate(3deg) scale(1.05);
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 10% 37%);
clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 10% 37%);
}
}
li:nth-child(4):after {
-webkit-clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
height: 55px;
width: 45px;
bottom: -18px;
-webkit-animation: stretch4 2s ease infinite;
-moz-animation: stretch4 2s ease infinite;
-o-animation: stretch4 2s ease infinite;
animation: stretch4 2s ease infinite;
}
@-webkit-keyframes stretch4 {
25% {
-webkit-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
}
50% {
-webkit-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
-webkit-clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
}
75% {
-webkit-transform: translateX(-50%) rotate(3deg) scaleY(1.05);
transform: translateX(-50%) rotate(3deg) scaleY(1.05);
-webkit-clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
}
}
@-moz-keyframes stretch4 {
25% {
-moz-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
}
50% {
-moz-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
}
75% {
-moz-transform: translateX(-50%) rotate(3deg) scaleY(1.05);
transform: translateX(-50%) rotate(3deg) scaleY(1.05);
clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
}
}
@-o-keyframes stretch4 {
25% {
-o-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
}
50% {
-o-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
}
75% {
-o-transform: translateX(-50%) rotate(3deg) scaleY(1.05);
transform: translateX(-50%) rotate(3deg) scaleY(1.05);
clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
}
}
@keyframes stretch4 {
25% {
-webkit-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
-moz-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
-o-transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
}
50% {
-webkit-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
-moz-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
-o-transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
-webkit-clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
}
75% {
-webkit-transform: translateX(-50%) rotate(3deg) scaleY(1.05);
-moz-transform: translateX(-50%) rotate(3deg) scaleY(1.05);
-o-transform: translateX(-50%) rotate(3deg) scaleY(1.05);
transform: translateX(-50%) rotate(3deg) scaleY(1.05);
-webkit-clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
}
}
li:hover:after {
-webkit-animation: boink 1s ease forwards 1;
-moz-animation: boink 1s ease forwards 1;
-o-animation: boink 1s ease forwards 1;
animation: boink 1s ease forwards 1;
}
@-webkit-keyframes boink {
80% {
-webkit-transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
}
}
@-moz-keyframes boink {
80% {
-moz-transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
}
}
@-o-keyframes boink {
80% {
-o-transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
}
}
@keyframes boink {
80% {
-webkit-transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
-moz-transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
-o-transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
}
}
@media (max-width: 600px) {
li {
font-size: 15px;
}
}
The code snippet dives into the elegant world of creating a menu for a website using HTML and CSS, focusing on a horizontal layout and animation. This piece of art begins with HTML, using <nav> and <ul> elements to lay down a sturdy foundation for a horizontal menu. The menu items are laid out side by side, offering an intuitive navigation bar for website visitors.
CSS then steps in to add style and motion. The use of properties like display: flex; ensures the menu items are aligned horizontally, achieving the desired layout. But it’s the animation that truly brings the menu to life. Through CSS animations, each menu item can transform upon interaction, such as changing color or size when hovered over, creating a dynamic user experience that is not only visually appealing but also interactive.
This harmonious blend of HTML and CSS for creating an horizontal, animated menu showcases how simple elements can be combined and styled to create sophisticated web components. The absence of JavaScript in this instance highlights the power and simplicity of pure CSS animations in enhancing user interface design without the need for additional scripting.
