CSS Animation: Navigation Menu With Source Code And Video Demo

css animation

CSS animation: Navigation menu with source code and video demo

Below is just a small clip of the CSS animation. There is no sound. It’s just a visual.

I’ve included the source code for the menu below. It is created with pure HTML5 and CSS3. Just copy and paste it into your text editor. You need an index.html document and a styles.css external style sheet unless you change the link name. For web developers and designers. Feel free to play around with the colors, placement of the buttons, and timing of rotation and color transition.

index.html HTML Source Code


<!DOCTYPE html>
<html>
<head>
<title>Animated Navigation Bar</title>

<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
<div class="navigation">
<div class="button">
<a href="index.html">Home</a>
</div>
<div class="button">
<a href="#">Tutorials</a>
</div>
<div class="button">
<a href="#">Programming</a>
</div>
<div class="button">
<a href="#">Source Code</a>
</div>
<div class="button">
<a href="#">Contact us</a>
</div>
</div>
</body>
</html>

styles.css CSS3 External Style Sheet Source Code


* {
margin: 0;
padding: 0;
}
body {
width: 100%;
text-align: center;
font-family: tahoma, georgia, arial;
background: black;
}
.navigation{
margin-left: 40%;
margin-top: 5%;
}
.button {
border-radius: 7px;
background-color: blue;
width: 12%;
height: auto; /*automatically fits height to size of the text.*/
margin: 1% .5%; /*1% top and bottom, .5% right and left. */
float: left; /*float left so that they will display side by side.*/
-webkit-transition:-webkit-transform 1s, background 1.5s;
-ms-transition:-webkit-transform 1s, background 1.5s;
-moz-transition:-webkit-transform 1s, background 1.5s;
-o-transition:-webkit-transform 1s, background 1.5s;
}
.button:hover {
-webkit-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
background: red;
}
a {
text-decoration: none;
color: white;
}
a:active {
color: black;
}
a:hover{
color: black;
}

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: