Neat and modern header section with CSS3

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