Create a CSS3 clean menu

cleanmenu

Hello friends, this time I will share a very simple tutorial for you all to make a menu, this time I will make a menu with style as simple as I can, and in the menu that I made this I also use the color swatches on the Flat UI, because I judge the colors in the swatches very nice to use a web design elements like that I made this time. And for that I use the color “Alizarin” yes that’s the name that is in the color palette. Well I will start giving the code listings.

The first is the HTML markup.


<!DOCTYPE html>
<html>
<head>
<title>Navigation title</title>
<link rel = "stylesheet" type= "text/css" href = "css/menu.css"/>
</head>
<body>
<div class = "navigation">
 <div class = "logo">Navigation</div>
 <div class = "nav">
 <ul>
 <li><a href = "#">Home</a></li>
 <li><a href = "#">Activity</a>
 <ul>
 <li><a href = "#">Activity 1 </a></li>
 <li><a href = "#">Activity 2 </a></li>
 <li><a href = "#">Activity 3</a></li>
 <li><a href = "#">Activity 4</a></li>
 <li><a href = "#">Activity 5</a></li>
 </ul>
 </li>
 <li><a href = "#">Portfolio</a>
 <ul>
 <li><a href = "#">Portfolio 1 </a></li>
 <li><a href = "#">Portfolio 2 </a></li>
 <li><a href = "#">Portfolio 3</a></li>
 <li><a href = "#">Portfolio 4</a></li>
 <li><a href = "#">Portfolio 5</a></li>
 <li><a href = "#">Portfolio 6</a></li>
 </ul>
 </li>
 <li><a href = "#">Contact</a></li>
 <li><a href = "#">About</a></li>
 </ul>
 </div>
</div>
</body>
</html>

Then the second one I will give the style on the menu with this CSS.

</pre>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

body{
 margin : 0px auto;
 background:url(../img/light_toast.png);
}
div.navigation{
 position : relative;
 margin : auto;
 width : 100%;
 font : normal 100% Open sans, arial;
 background-color : #FFF;
 border-top : solid 3px #E74C3C;
}
div.logo{
 font-size : 2.5em;
 display : inline-block;
 margin-left : 20px;
 line-height : 80px;
 height : 90px;
 font-weight : 300;
 color:#E74C3C;
}

div.nav{

float : right;
 height : 100%;
}
div.nav>ul{
 height : 100%;
 margin : 0px;
 padding : 0;
}
div.nav>ul>li{
 position : relative;
 list-style : none;
 display : inline-block;
 height : 90px;
 color : #494949;
 font-size : 0.96em;
 background-color : transparent;

 transition: background-color 0.5s ;
 -webkit-transition: background-color 0.4s; /* Safari */
}
div.nav>ul>li>a{
 position : relative;
 display : block;
 font-weight : 400;
 color : inherit;
 text-decoration : none;
 line-height : 90px;
 height : 100%;
 padding : 0px 25px 0px 25px;
 border-bottom : solid 2px transparent;

}
div.nav>ul>li:hover{
 background-color : #DDDDDD;
 border-bottom : solid 2px #E74C3C;
 color : #E74C3C;
}
div.nav>ul>li>ul{
 position : absolute;
 margin : 0px;
 padding : 0;
 display : none;
}
div.nav>ul>li>ul>li{
 list-style : none;
 font-weight : 400;
 font-size : 13px;
 height : 40px;
 width : 150px;
 background-color : #F9F9F9;
 border-bottom : solid 1px #DADADA;
}
div.nav>ul>li>ul>li>a{
 position : relative;
 display : block;
 height : 100%;
 width : 100%;
 line-height : 40px;
 margin-left : 20px;
 text-decoration : none;
 color : #454545;

 transition: color 0.2s ;
 -webkit-transition: color 0.2s; /* Safari */
}

div.nav>ul>li>ul>li>a:hover{
 color : #E74C3C;

 animation : margin_left 0.8s;
 -moz-animation : margin_left 0.8s;
 -o-animation : margin_left 0.8s;
 -webkit-animation : margin_left 0.8s;

}
<pre>

And this is styling for a responsive view.

</pre>
/** -------------- For Desktop PC-------------------- **/

@media only screen and (min-width: 960px){
div.nav ul li:hover ul{
display : block;

}
}
/** ----------For Note Book------------ **/
@media only screen and (min-width: 768px) and (max-width: 959px) {
div.logo{
margin : auto;
display : table;
}
div.nav{
float : none;
margin : auto;
display : table;
}
div.nav>ul>li{
height : 70px;
}
div.nav>ul>li>a{
line-height : 70px;
}

div.nav ul li:hover ul{
display : block;

}
}
/** ----------For Tablet PC------------ **/
@media only screen and (min-width: 480px) and (max-width: 767px) {

div.logo{
margin : auto;
display : table;
font-size : 2.1em;
height: 72px;
line-height: 72px;
}
div.nav{
float : none;
margin : auto;
display : table;
}
div.nav>ul>li{
height : 70px;
border-bottom : solid 2px transparent;
}
div.nav>ul>li>a{
line-height : 70px;
}

div.nav ul li:hover ul{
display : block;

}
}

/** ----------For Mobile------------ **/
@media only screen and (max-width: 479px) {
div.logo{
margin : auto;
display : table;
font-size: 1.6em;
height: 50px;
line-height: 50px;
}

div.nav{
float : none;
margin : auto;
display : table;
}
div.nav{
width : 80%;
}
div.nav>ul>li{
display : block;
height : auto;
width : 100%;
}
div.nav>ul>li:hover{
border : none;
border-left : solid;
}
div.nav>ul>li>a{
line-height : 40px;
}
div.nav>ul>li>ul{
position : relative;
}
div.nav>ul>li>ul>li{
width : 100%;
}
div.nav>ul>li>ul>li>a{
border-left : solid 15px transparent;
}
div#choose_box{
position : relative;
display : block;
margin-top: 60px;
width : 70%;
}
div.nav ul li:hover ul{
display : block;

-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;

-webkit-animation-duration:0.5s;
-moz-animation-duration:0.5s;
-ms-animation-duration:0.5s;
-o-animation-duration:0.5s;
animation-duration:0.5s;

-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
}

&nbsp;
<pre>

preview download

Advertisements

One thought on “Create a CSS3 clean menu

  1. “Statistics for Word – Press” definitely forms the main statistical indicators for the blog.
    Please make sure you are self hosting your WordPress Blog.
    You can add this free blogging platform to an existing domain as
    the root address or as a sub domain and there are a lot of good reasons
    to choose to go this route.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s