Home » Web Design » Download Nice Responsive CSS3 HTML5 Menu

Download Nice Responsive CSS3 HTML5 Menu

Very Nice CrossBrowser CSS3/HTML5 Horizontal Animation Menu…
 

 
THE HTML5

<nav class="menu">
<ul>
<ul><!-- LINK STARTS --></ul>
</ul>
<ul>
<ul>
	<li><a href="#">
<h3 class="menu-item">home</h3>
<h4 class="description">first page</h4>
</a></li>
</ul>
</ul>
<ul>
<ul><!-- LINK ENDS --></ul>
</ul>
<ul>
<ul><!-- LINK STARTS --></ul>
</ul>
<ul>
<ul>
	<li><a href="#">
<h3 class="menu-item">portofolio</h3>
<h4 class="description">our projects</h4>
</a></li>
</ul>
</ul>
<ul>
<ul><!-- LINK ENDS --></ul>
</ul>
<ul>
<ul><!-- LINK STARTS --></ul>
</ul>
<ul>
<ul>
	<li><a href="#">
<h3 class="menu-item">blog</h3>
<h4 class="description">our thoughts</h4>
</a></li>
</ul>
</ul>
<ul>
<ul><!-- LINK ENDS --></ul>
</ul>
<ul>
<ul><!-- LINK STARTS --></ul>
</ul>
<ul>
<ul>
	<li><a href="#">
<h3 class="menu-item">about us</h3>
<h4 class="description">get to know us</h4>
</a></li>
</ul>
</ul>
<ul>
<ul><!-- LINK ENDS --></ul>
</ul>
<ul>
<ul><!-- LINK STARTS --></ul>
</ul>
<ul>
<ul>
	<li><a href="#">
<h3 class="menu-item">contact</h3>
<h4 class="description">feel free to contact</h4>
</a></li>
</ul>
</ul>
<ul><!-- LINK SENDS --></ul>
</nav>
<pre>

 

 
THE CSS3

@font-face {
font-family: 'BebasNeueRegular';
src: url('../fonts/BebasNeue-webfont.eot');
src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/BebasNeue-webfont.woff') format('woff'),
url('../fonts/BebasNeue-webfont.ttf') format('truetype'),
url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}

.menu{
max-width:730px;
margin:0 auto; /* Centers The Menu */
}

.menu ul{
margin:0; /* removes the space added by default */
padding:0; /* removes the space added by default */
list-style:none;
}

/* ******** LINKS/MENU ********* */
.menu ul li{
width:135px;
height:55px;
margin:5px 10px 0px 0px;
position:relative;
text-align:center;
overflow:hidden;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
-webkit-box-shadow:0 1px 2px #999;
-moz-box-shadow:0 1px 2px #999;
box-shadow:0 1px 2px #999;
/* background color */
background:#FFF;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#EEE));
background:-webkit-linear-gradient(top, #FFF, #EEE);
background:-moz-linear-gradient(top, #FFF, #EEE);
background:-ms-linear-gradient(top, #FFF, #EEE);
background:-o-linear-gradient(top, #FFF, #EEE);
}

.menu ul li:nth-child(even){
float:left;
/* background color */
background:#FFF;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#EEE));
background:-webkit-linear-gradient(top, #FFF, #EEE);
background:-moz-linear-gradient(top, #FFF, #EEE);
background:-ms-linear-gradient(top, #FFF, #EEE);
background:-o-linear-gradient(top, #FFF, #EEE);
}

.menu ul li:nth-child(odd){
float:left;
/* background color */
background:#FFF;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#EEE));
background:-webkit-linear-gradient(top, #FFF, #EEE);
background:-moz-linear-gradient(top, #FFF, #EEE);
background:-ms-linear-gradient(top, #FFF, #EEE);
background:-o-linear-gradient(top, #FFF, #EEE);
}

.menu ul li a{
display:block;
width:100%; /* full width */
height:100%; /* full height */
text-decoration:none;
}

/* ********* MAIN TEXT/DESCRIPTION TEXT ********* */
.menu .menu-item, .menu .description{
margin:0;
padding:0;
font-weight:normal;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}

/* ********* MAIN TEXT ********* */
.menu .menu-item{
padding:5px;
font-family: 'BebasNeueRegular';
font-size:18px;
color:#333;
text-transform:uppercase;
}

.menu ul li:nth-child(even) .menu-item{
color:#000;
}

/* ********* DESCRIPTION TEXT ********* */
.menu .description{
font-family: 'Arial';
font-size:12px;
color:#0099CC;
}

.menu ul li:nth-child(even) .description{
color:#0099CC;
}

/* ********* MAIN TEXT ON MOUSEOVER ********* */
.menu ul li:hover .menu-item{
font-size:30px;
color:#0099CC;
text-shadow:none;
}

/* ********* MAIN TEXT ON MOUSE CLICK ********* */
.menu ul li:active .menu-item{
color:#FFF;
}

/* ********* DESCRIPTION TEXT ON MOUSEOVER ********* */
.menu ul li:hover .description{
filter:alpha(opacity=0);
opacity:0;
}

@-webkit-keyframes fromLeft{
from{
opacity:0;
-webkit-transform:translateX(-70%);
}

to{
opacity:1;
-webkit-transform:translateX(0%);
}
}

@-moz-keyframes fromLeft{
from{
opacity:0;
-moz-transform:translateX(-70%);
}

to{
opacity:1;
-moz-transform:translateX(0%);
}
}

@-o-keyframes fromLeft{
from{
opacity:0;
-o-transform:translateX(-70%);
}

to{
opacity:1;
-o-transform:translateX(0%);
}
}

@keyframes fromLeft{
from{
opacity:0;
transform:translateX(-70%);
}

to{
opacity:1;
transform:translateX(0%);
}
}

DEMO DOWNLOAD MENU

Download Bebas Font: http://www.fontsquirrel.com/fonts/Bebas

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.

cankaya escort
Scroll To Top