Neat and modern header section with CSS3
Have you thought about remaking your website header section? As you know – this is the most important section of any website. First of all, all visitors are paying attention on this part of the site. And, the more clean and tidy it is, the better opinions on your site get visitors. In our today’s article I will show you how to create high-quality and modern header for your site. This header will include a logo, several links in the upper right corner, drop-down navigation menu and search form.
Before we start, I would like to show you what exactly we are going to buid:
Live Demo
[sociallocker]
download in package
[/sociallocker]
Now, let’s download the sources and start coding !
Step 1. HTML
In the most beginning, we have to define our header with all mentioned elements:
index.html
div id="header" !-- logo -- a href="#" id="logo"img src="images/logo.png"/a !-- extra top links -- div id="links" a href="#"About us/a a href="#"Help/a a href="#"Contact Us/a /div !-- navigation menu -- div id="navmenu" nav id="menu" ul li class="active"a href="index.php"Home/a ul lia href="#"span class="icon elem1"/spanFacebook/a/li lia href="#"span class="icon elem2"/spanGoogle/a/li lia href="#"span class="icon elem3"/spanRSS/a/li lia href="#"span class="icon elem4"/spanSkype/a/li lia href="#"span class="icon elem5"/spanStumbleupon/a/li /ul /li lia href="#"Faces/a ul lia href="#"span class="icon elem0"/spanmenu element 1/a/li lia href="#"span class="icon elem0"/spanmenu element 2/a/li lia href="#"span class="icon elem0"/spanmenu element 3/a/li lia href="#"span class="icon elem0"/spanmenu element 4/a/li lia href="#"span class="icon elem0"/spanmenu element 5/a/li /ul /li lia href="#"Clubs/a ul lia href="#"span class="icon elem0"/spanmenu element 1/a/li lia href="#"span class="icon elem0"/spanmenu element 2/a/li lia href="#"span class="icon elem0"/spanmenu element 3/a/li lia href="#"span class="icon elem0"/spanmenu element 4/a/li lia href="#"span class="icon elem0"/spanmenu element 5/a/li /ul /li lia href="#"Photos/a ul lia href="#"span class="icon elem0"/spanmenu element 1/a/li lia href="#"span class="icon elem0"/spanmenu element 2/a/li lia href="#"span class="icon elem0"/spanmenu element 3/a/li lia href="#"span class="icon elem0"/spanmenu element 4/a/li lia href="#"span class="icon elem0"/spanmenu element 5/a/li /ul /li lia href="#"Videos/a/li lia href="#"Games/a/li lia href="#"Blog/a ul lia href="#"span class="icon elem0"/spanmenu element 1/a/li lia href="#"span class="icon elem0"/spanmenu element 2/a/li lia href="#"span class="icon elem0"/spanmenu element 3/a/li lia href="#"span class="icon elem0"/spanmenu element 4/a/li lia href="#"span class="icon elem0"/spanmenu element 5/a/li /ul /li lia href="#"Classifieds/a/li /ul /nav !-- search form -- div id="search" form role="search" method="get" input type="text" placeholder="search..." name="s" value="" autocomplete="off" / /form /div /div /div
Everything should be easy to understand. This is quite usual UL-LI based menu plus easy search form
Step 2. CSS
css/main.css
Now, our main step – we have to stylize our prepared header. First of all – general styles for header itself, upper right corner links and logo:
/* header styles */ #header { border:1px solid; border-color:rgba(0,0,0,0.1); border-bottom-color:rgba(0,0,0,0.2); border-top:none; background: background:-webkit-linear-gradient(top, #f7f7f7, #f4f4f4); background:-moz-linear-gradient(top, #f7f7f7, #f4f4f4); background:-o-linear-gradient(top, #f7f7f7, #f4f4f4); background:linear-gradient(to bottom, #f7f7f7, #f4f4f4); background-clip:padding-box; border-radius:0 0 5px 5px; margin: auto; position: relative; width: 1000px; } #header a { color: } #header a:hover { color: } #logo { float: left; margin: 15px 10px; } #logo img { border: 0; } #links { float: right; font-size: 12px; margin: 10px 20px 0; overflow: hidden; text-shadow: 0 1px 0 } #links a { border-left: 1px solid margin-left: 7px; padding-left: 8px; text-decoration: none; } #links a:first-child { border-width: 0; }
Now, we have to define styles for our drop down navigation menu (pure CSS3), here is it:
/* navigation menu styles */ #navmenu { background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent; background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 ); border-radius: 0 0 4px 4px; border-top: 1px solid box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset; clear: both; height: 51px; padding-top: 1px; } #menu { float: left; } #menu a { text-decoration: none; } #menu ul { list-style: none; margin: 0; padding: 0; } #menu ul li { float: left; padding-bottom: 12px; } #menu ul li a { border-color: border-image: none; border-style: solid; border-width: 0 1px 0 0; box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset; color: display: block; font-size: 14px; height: 30px; line-height: 30px; padding: 11px 15px 10px; text-shadow: 0 1px 0 } #menu ul li a:hover { background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent; background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 ); } #menu ul li.active a { background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 ); border-bottom: 1px solid border-top: 1px solid box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset; color: margin: -1px 0 -1px -1px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); } #menu ul li.active a:hover { background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent; background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 ); } #menu ul li:first-child a { border-radius: 0 0 0 5px; }
Finally, all we need is to realize – drop-down behavior. I prepared next styles which allow us to slide smoothly down popup menu:
/* dropdown menu */ #menu ul ul { background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent; background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent; background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 ); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px 5px 5px 5px; box-shadow: 0 1px 0 #FFFFFF inset; height: 0; margin-top: 10px; opacity: 0; overflow: hidden; padding: 0; position: absolute; visibility: hidden; width: 250px; z-index: 1; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } #menu ul li:hover ul { height: 195px; margin-top: 09; opacity: 1; visibility: visible; } #menu ul ul a { border-right-width: 0; border-top: 1px solid box-shadow: 0 1px 0 #FFFFFF inset; color: height: 24px; line-height: 24px; padding: 7px 12px; text-shadow: 0 1px 0 } #menu ul ul li:first-child a { border-top-width: 0; } #menu ul ul a .icon { background-position: 50% 50%; background-repeat: no-repeat; display: block; float: left; height: 24px; margin-right: 10px; width: 24px; } #menu ul ul a .icon.elem0 { background-image: url("../images/elem.png"); } #menu ul ul a .icon.elem1 { background-image: url("../images/fb.png"); } #menu ul ul a .icon.elem2 { background-image: url("../images/go.png"); } #menu ul ul a .icon.elem3 { background-image: url("../images/rs.png"); } #menu ul ul a .icon.elem4 { background-image: url("../images/sk.png"); } #menu ul ul a .icon.elem5 { background-image: url("../images/su.png"); } /* search bar */ #search { margin:13px 10px 0 0; float: right; } #search form { background: url("../images/search.gif") no-repeat scroll 5% 50% transparent; border: 1px solid border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 height: 26px; padding: 0 25px; position: relative; width: 130px; } #search form:hover { background-color: } #search form input { color: font-size: 13px; height: 26px; text-shadow: 0 1px 0 background: none repeat scroll 0 0 transparent; border: medium none; float: left; outline: medium none; padding: 0; width: 100%; } #search form input.placeholder, #search form input:-moz-placeholder { color: }
Live Demo
Conclusion
That is all for today. We have just prepared a really nice looking and neat header block with own navigation menu. I’m sure that this material will be very useful for everybody. Good luck and welcome back