Stylish CSS3 Menu

Yet we were not able to create the animated and stylish menu with CSS. But with the development of CSS3 now it is quite easy to create the amazing and stunning menu.

Before the development of CSS3 the animation was a little bit tough task, especially to use the Flash and JavaScript. Even you have to animate a letter, you may have to write a long script to do such event.

The development of CSS3 has made an amazing effect to enhance the possibilities of reducing the external plugins. Here I am going to describe, how CSS3 can be used to create the most amazing and stylish menu.

These are the some basic knowledge, you must have familiar with before you start

Believe it, after going through these steps you must be able to create the amazing, stylish and animated menu, which will make something better than you have used yet.

Here are the basic procedure

1) Create a HTML file something like this:

<!Doctype HTML>
<html>
<body>
 <ul>
  <li>
   <a href="#">
    <div class="cv-square icon-home"></div>
    <div class="cv-content">
     <div class="cv-main">Menu1</div>
     <div class="cv-sub">Menu1 description</div>
    </div>
  </a>
 </li>

 <li>
  <a href="#">
   <div class="cv-square icon-tint"></div>
   <div class="cv-content">
    <div class="cv-main">Menu2</div>
    <div class="cv-sub">Menu2 description</div>
   </div>
  </a>
 </li>
 
 <li>
  <a href="#">
   <div class="cv-square icon-camera"></div>
   <div class="cv-content">
    <div class="cv-main">Menu3</div>
    <div class="cv-sub">Menu3 description</div>
   </div>
  </a>
 </li>
 
 <li>
  <a href="#">
   <div class="cv-square icon-envelope"></div>
   <div class="cv-content">
    <div class="cv-main">Menu4</div>
    <div class="cv-sub">Menu4 description</div>
   </div>
  </a>
 </li>
</ul>
</body>
</html>

Download


2) Create the CSS file something like this.

ul {
	max-width:960px; /* Adjust Width To Your Needs - Default: 960 pixels */
	list-style:none;
    position: relative; /* For The Drop Down */
    display: inline-table; /* For The Drop Down */
}

ul li {
	float:left;
}

ul li a {
	display:block;
	width:100%;
	height:100%;
	text-decoration:none;
}

ul li a:hover {
	display:block;
	width:100%;
	height:100%;
	opacity:0.5;
}

ul li .cv-square {
	width:59px;
	height:44px;
	padding:15px 0px 0px 0px;
	float:left;
	font-size:26px;
	text-align:center;
	background:#1abc9c; /* Squares Background Color */
	color:#FFF;         /* Squares Icon Color */
	
	-webkit-animation-name: bounceInRight; 
	-moz-animation-name: bounceInRight;
	-o-animation-name: bounceInRight;
	animation-name: bounceInRight;
	
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
	
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both; 
}

ul li .cv-content {
	height:52px;
	float:left;
	margin:0px 10px 0px 0px;
	padding:7px 25px 0px 10px;
	background:#FFF;
	
    -webkit-animation-name: bounceInLeft;
	-moz-animation-name: bounceInLeft;
	-o-animation-name: bounceInLeft;
	animation-name: bounceInLeft;
	
	-webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
	
    -webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
    -o-animation-duration: 1s;
	animation-duration: 1s;
	
	-webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
	animation-fill-mode: both;
}

ul li .cv-content .cv-main {
	font-family:"BebasNeueRegular";
	font-size:23px;                  /* Main Menu Text Size */
	color:#34495e;                   /* Main Menu Text Color */
	
	-webkit-animation-name: bounceInTop;
	-moz-animation-name: bounceInTop;
	-o-animation-name: bounceInTop;
	animation-name: bounceInTop;
	
	-webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
	
    -webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
    -o-animation-duration: 1s;
	animation-duration: 1s;
	
	-webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
	animation-fill-mode: both;
}

ul li .cv-content .cv-sub {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;                            /* Main Menu Sub Text Size */
	color:#2980b9;                             /* Main Menu Sub Text Color */
	
	-webkit-animation-name: bounceInLeft;
	-moz-animation-name: bounceInLeft;
	-o-animation-name: bounceInLeft;
	animation-name: bounceInLeft;
	
	-webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
	
    -webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
    animation-duration: 1s;
	
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
}

Download


Now, there will need some additional CSS and Images, which will make the example more useful and stylish. You can download all the script in zip format, which will work properly

If you need any assistance, you can comment below for better understanding



Show Buttons
Hide Buttons