Script Tutorials

Neat and modern header section with CSS3

—

by

admin
in

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:

result of header section

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

01 <div id="header">
02     <!-- logo -->
03     <a href="#" id="logo"><img src="images/logo.png"></a>
04     <!-- extra top links -->
05     <div id="links">
06         <a href="#">About us</a>
07         <a href="#">Help</a>
08         <a href="#">Contact Us</a>
09     </div>
10     <!-- navigation menu -->
11     <div id="navmenu">
12         <nav id="menu">
13             <ul>
14                 <li class="active"><a href="index.php">Home</a>
15                     <ul>
16                         <li><a href="#"><span class="icon elem1"></span>Facebook</a></li>
17                         <li><a href="#"><span class="icon elem2"></span>Google</a></li>
18                         <li><a href="#"><span class="icon elem3"></span>RSS</a></li>
19                         <li><a href="#"><span class="icon elem4"></span>Skype</a></li>
20                         <li><a href="#"><span class="icon elem5"></span>Stumbleupon</a></li>
21                     </ul>
22                 </li>
23                 <li><a href="#">Faces</a>
24                     <ul>
25                         <li><a href="#"><span class="icon elem0"></span>menu element 1</a></li>
26                         <li><a href="#"><span class="icon elem0"></span>menu element 2</a></li>
27                         <li><a href="#"><span class="icon elem0"></span>menu element 3</a></li>
28                         <li><a href="#"><span class="icon elem0"></span>menu element 4</a></li>
29                         <li><a href="#"><span class="icon elem0"></span>menu element 5</a></li>
30                     </ul>
31                 </li>
32                 <li><a href="#">Clubs</a>
33                     <ul>
34                         <li><a href="#"><span class="icon elem0"></span>menu element 1</a></li>
35                         <li><a href="#"><span class="icon elem0"></span>menu element 2</a></li>
36                         <li><a href="#"><span class="icon elem0"></span>menu element 3</a></li>
37                         <li><a href="#"><span class="icon elem0"></span>menu element 4</a></li>
38                         <li><a href="#"><span class="icon elem0"></span>menu element 5</a></li>
39                     </ul>
40                 </li>
41                 <li><a href="#">Photos</a>
42                     <ul>
43                         <li><a href="#"><span class="icon elem0"></span>menu element 1</a></li>
44                         <li><a href="#"><span class="icon elem0"></span>menu element 2</a></li>
45                         <li><a href="#"><span class="icon elem0"></span>menu element 3</a></li>
46                         <li><a href="#"><span class="icon elem0"></span>menu element 4</a></li>
47                         <li><a href="#"><span class="icon elem0"></span>menu element 5</a></li>
48                     </ul>
49                 </li>
50                 <li><a href="#">Videos</a></li>
51                 <li><a href="#">Games</a></li>
52                 <li><a href="#">Blog</a>
53                     <ul>
54                         <li><a href="#"><span class="icon elem0"></span>menu element 1</a></li>
55                         <li><a href="#"><span class="icon elem0"></span>menu element 2</a></li>
56                         <li><a href="#"><span class="icon elem0"></span>menu element 3</a></li>
57                         <li><a href="#"><span class="icon elem0"></span>menu element 4</a></li>
58                         <li><a href="#"><span class="icon elem0"></span>menu element 5</a></li>
59                     </ul>
60                 </li>
61                 <li><a href="#">Classifieds</a></li>
62             </ul>
63         </nav>
64         <!-- search form -->
65         <div id="search">
66             <form role="search" method="get">
67                 <input type="text" placeholder="search..." name="s" value="" autocomplete="off" />
68             </form>
69         </div>
70     </div>
71 </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:

01 /* header styles */
02 #header {
03     border:1px solid;
04     border-color:rgba(0,0,0,0.1);
05     border-bottom-color:rgba(0,0,0,0.2);
06     border-top:none;
07     background:#f7f7f7;
08     background:-webkit-linear-gradient(top, #f7f7f7, #f4f4f4);
09     background:-moz-linear-gradient(top, #f7f7f7, #f4f4f4);
10     background:-o-linear-gradient(top, #f7f7f7, #f4f4f4);
11     background:linear-gradient(to bottom, #f7f7f7, #f4f4f4);
12     background-clip:padding-box;
13     border-radius:0 0 5px 5px;
14     margin: auto;
15     position: relative;
16     width: 1000px;
17 }
18 #header a {
19     color: #4C9FEB;
20 }
21 #header a:hover {
22     color: #FF7D4C;
23 }
24 #logo {
25     float: left;
26     margin: 15px 10px;
27 }
28 #logo img {
29     border: 0;
30 }
31 #links {
32     float: right;
33     font-size: 12px;
34     margin: 10px 20px 0;
35     overflow: hidden;
36     text-shadow: 0 1px 0 #FFFFFF;
37 }
38 #links a {
39     border-left: 1px solid #DEDEDE;
40     margin-left: 7px;
41     padding-left: 8px;
42     text-decoration: none;
43 }
44 #links a:first-child {
45     border-width: 0;
46 }

Now, we have to define styles for our drop down navigation menu (pure CSS3), here is it:

01 /* navigation menu styles */
02 #navmenu {
03     background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
04     background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
05     background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
06     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
07     border-radius: 0 0 4px 4px;
08     border-top: 1px solid #D1D1D1;
09     box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
10     clear: both;
11     height: 51px;
12     padding-top: 1px;
13 }
14 #menu {
15     float: left;
16 }
17 #menu a {
18     text-decoration: none;
19 }
20 #menu ul {
21     list-style: none;
22     margin: 0;
23     padding: 0;
24 }
25 #menu > ul > li {
26     float: left;
27     padding-bottom: 12px;
28 }
29 #menu ul li a {
30     border-color: #D1D1D1;
31     border-image: none;
32     border-style: solid;
33     border-width: 0 1px 0 0;
34     box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
35     color: #333333;
36     display: block;
37     font-size: 14px;
38     height: 30px;
39     line-height: 30px;
40     padding: 11px 15px 10px;
41     text-shadow: 0 1px 0 #FFFFFF;
42 }
43 #menu ul li a:hover {
44     background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
45     background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
46     background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
47     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
48 }
49 #menu > ul > li.active > a {
50     background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
51     background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
52     background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
53     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
54     border-bottom: 1px solid #2D81CC;
55     border-top: 1px solid #4791D6;
56     box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
57     color: #FFFFFF;
58     margin: -1px 0 -1px -1px;
59     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
60 }
61 #menu > ul > li.active > a:hover {
62     background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
63     background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
64     background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
65     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 );
66 }
67 #menu > ul > li:first-child > a {
68     border-radius: 0 0 0 5px;
69 }

Finally, all we need is to realize – drop-down behavior. I prepared next styles which allow us to slide smoothly down popup menu:

001 /* dropdown menu */
002 #menu ul ul {
003     background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
004     background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
005     background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
006     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
007     border: 1px solid rgba(0, 0, 0, 0.1);
008     border-radius: 5px 5px 5px 5px;
009     box-shadow: 0 1px 0 #FFFFFF inset;
010     height: 0;
011     margin-top: 10px;
012     opacity: 0;
013     overflow: hidden;
014     padding: 0;
015     position: absolute;
016     visibility: hidden;
017     width: 250px;
018     z-index: 1;
019     -webkit-transition: all .5s;
020     -moz-transition: all .5s;
021     -ms-transition: all .5s;
022     -o-transition: all .5s;
023     transition: all .5s;
024 }
025 #menu ul  li:hover ul  {
026     height: 195px;
027     margin-top: 0\9;
028     opacity: 1;
029     visibility: visible;
030 }
031 #menu ul ul a {
032     border-right-width: 0;
033     border-top: 1px solid #D1D1D1;
034     box-shadow: 0 1px 0 #FFFFFF inset;
035     color: #444444;
036     height: 24px;
037     line-height: 24px;
038     padding: 7px 12px;
039     text-shadow: 0 1px 0 #FFFFFF;
040 }
041 #menu ul ul li:first-child a {
042     border-top-width: 0;
043 }
044 #menu ul ul a .icon {
045     background-position: 50% 50%;
046     background-repeat: no-repeat;
047     display: block;
048     float: left;
049     height: 24px;
050     margin-right: 10px;
051     width: 24px;
052 }
053 #menu ul ul a .icon.elem0 {
054     background-image: url("../images/elem.png");
055 }
056 #menu ul ul a .icon.elem1 {
057     background-image: url("../images/fb.png");
058 }
059 #menu ul ul a .icon.elem2 {
060     background-image: url("../images/go.png");
061 }
062 #menu ul ul a .icon.elem3 {
063     background-image: url("../images/rs.png");
064 }
065 #menu ul ul a .icon.elem4 {
066     background-image: url("../images/sk.png");
067 }
068 #menu ul ul a .icon.elem5 {
069     background-image: url("../images/su.png");
070 }
071 /* search bar */
072 #search {
073     margin:13px 10px 0 0;
074     float: right;
075 }
076 #search form {
077     background: url("../images/search.gif") no-repeat scroll 5% 50% transparent;
078     border: 1px solid #CCCCCC;
079     border-radius: 3px 3px 3px 3px;
080     box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
081     height: 26px;
082     padding: 0 25px;
083     position: relative;
084     width: 130px;
085 }
086 #search form:hover {
087     background-color: #F9F9F9;
088 }
089 #search form input {
090     color: #999999;
091     font-size: 13px;
092     height: 26px;
093     text-shadow: 0 1px 0 #FFFFFF;
094     background: none repeat scroll 0 0 transparent;
095     border: medium none;
096     float: left;
097     outline: medium none;
098     padding: 0;
099     width: 100%;
100 }
101 #search form input.placeholder, #search form input:-moz-placeholder {
102     color: #C4C4C4;
103 }
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