Home » Featured » CSS3 Simple Stylish Animated Responsive Menu

CSS3 Simple Stylish Animated Responsive Menu

We decided to create a simple unique CSS3 menu for free download. The menu has drop down support also but, it is disabled ( Commented Out ). You can remove comments in order the drop down menu to work. This is the code bellow :D…

The Code Only, Will Work With The Files Included In The Download .Zip File. This code bellow is for you to get familiar with the drop down support code which is commented out.

 

freeMenu

HTML

From line 11 to 20 and from 43 to 52, you see the code is commented, that is for the drop down support.

<ul>
<li>
<a href="#">
<div class="cv-square icon-home"></div>
<div class="cv-content">
<div class="cv-main">HOME</div>
<div class="cv-sub">Go Back Home</div>
</div><!-- Content-->
</a>

<!--<ul>
         <li><a href="#">Photoshop</a></li>
         <li><a href="#">Illustrator</a></li>
         <li><a href="#">Web Design</a>
           <ul>
             <li><a href="#">Test 1</a></li>
             <li><a href="#">Test 2</a></li>
           </ul>
         </li>
       </ul>-->

</li>

<li>
<a href="#">
<div class="cv-square icon-tint"></div>
<div class="cv-content">
<div class="cv-main">BLOG</div>
<div class="cv-sub">See Whats New</div>
</div><!-- Content-->
</a>
</li>

<li>
<a href="#">
<div class="cv-square icon-camera"></div>
<div class="cv-content">
<div class="cv-main">PORTFOLIO</div>
<div class="cv-sub">What We've Done So Far</div>
</div><!-- Content-->
</a>

<!--<ul>
         <li><a href="#">Photoshop</a></li>
         <li><a href="#">Illustrator</a></li>
         <li><a href="#">Web Design</a>
           <ul>
             <li><a href="#">Test 1</a></li>
             <li><a href="#">Test 2</a></li>
           </ul>
         </li>
       </ul>-->

</li>

<li>
<a href="#">
<div class="cv-square icon-envelope"></div>
<div class="cv-content">
<div class="cv-main">CONTACT</div>
<div class="cv-sub">Get In Touch</div>
</div><!-- Content-->
</a>
</li>
</ul>

CSS3

You see bellow that, from line 137 the CSS is commented, thats for the drop down support mentioned above.

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;
}

/************************************************************************* Drop Down First Level Style - Remove comments to this style bellow for drop down to work, you also need to remove 
                                                                           html comments in the index.html file, contact me at novakin@yahoo.com if you dont know how.  */
/*ul:after {
    content: "";
    clear: both;
    display: block;
}

ul ul {
    display: none;
	margin:0px 0px 0px -5px;
	padding:0;
	position: absolute;
    top: 100%;}

ul li:hover > ul {
    display: block;
}

ul ul a {
    font-size: 14px;
    color: #FFF;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    padding: 23px 50px 23px 25px;
    background: #1abc9c;
}

ul ul a:hover {
    color:#FFF;               
    background: #34495e;          
	opacity:1.0;                  
}

ul:after {
    content: "";
    clear: both;
    display: block;
}

ul ul li {
	float:none;
	position:relative;
}

ul ul li a {
    color: #fff;
    /*min-width: 100px;
}

ul ul li a:hover {
    background: #4b545f;
    padding: 23px 50px 23px 25px;
}

/********************************************************************************* Drop Down Third Level Style */
/*ul ul ul {
    position: absolute;
    left: 149.5%;
    top: 0;
    min-width: 100px;
}*/

DEMO DOWNLOAD MENU

Tags :
Uzabila

About Uzabila

Web Design, WordPress developer & enthusiast. Co-Founder of CreativeVerse.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*

If you are not a robot - solve an example: * Time limit is exhausted. Please reload the CAPTCHA.

Scroll To Top