Introduction: CSS3 Navigation - a Beautiful CSS3 Navigation Example

By SliceMaker Soft, Inc.
About: Hello, my name is Laurent He. I come from Chengdu, a beautiful city of China. I am a web design as well as a software developer. I hope I can share what I know with you and also want you to share yours with me…

Now, CSS3 has become more and more popular. However, many people still are not familiar with it.

In this article, I would like to share one of my CSS3 works - a beautiful CSS3 navigation bar. You can free download the beautiful CSS3 navigation bar and then edit it to use it for your own website.

To free download the CSS3 navigation, please refer to the original article: CSS3 Navigation - A Beautiful CSS3 Navigation Example

Step 1: The HTML Codes for the CSS3 Navigation Bar

This CSS3 navigation bar mainly consists of two parts: The logo part and the menu items part.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------
<div class='main-menu'>
<div class='brand'>
<a href='#' class='logo'>YOUR LOGO</a>
<div class='btn-group'>
<button type='button' class='sign-in'>Sign in</button><button type='button' class='register'>Register</button>
</div>
<div class='search-field'>
<input type='search' placeholder='Search' />
<a class='search-icon'>s</a>
</div>
</div>
<ul class='nav clearfix'>
<li><a href='#'>NFL</a></li>
<li><a href='#'>MBL</a></li>
......
<li>
<a href='#'>MORE</a>
<ul class='more-sport'>
<span class='header'>Sports</span>
<li>
<a href='#'>Aussie Football</a>
<a href='#'>MSL</a>
<a href='#'>CFL</a>
<a href='#'>NCAA Baseball</a>
<a href='#'>Cricket</a>
<a href='#'>Olympics</a>
</li>
<li>
......
</li>
<li>
......
</li>
<span class='footer'> Last update: Today,28 September,12 minutes ago <a href='#'>ALL SPORTS</a> </span>
</ul>
</li>
</ul>
</div>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Step 2: The CSS Codes for the CSS3 Navigation Bar

The CSS3 properties I used to create this CSS3 navigation bar include CSS3 border-radius, CSS3 gradient, CSS3 box, text-shadow, etc. I think it is unnecessary for me to explain every style code to you. However, there are still some notes to explain the main parts of the CSS3 navigation bar (Each note is in bold font); I hope it will be helpful to you.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

.main-menu {
    margin:50px auto;
    width:910px;
}

/*The Top Logo Part*/
.brand {
    text-align:center;
    width:908px;
    height:48px;
    line-height: 48px;
    border:1px solid rgb(25,25,25);
    border-radius:4px 4px 0 0;
    position:relative;
    background:-webkit-linear-gradient(top,rgb(49,50,52),rgb(12,13,14));
    background:-moz-linear-gradient(top,rgb(49,50,52),rgb(12,13,14));
    background:linear-gradient(top,rgb(49,50,52),rgb(12,13,14));
    box-shadow:inset 0 1px 0 rgb(62,63,65),inset 1px 0 0 rgba(75,75,80,0.4);
}
.brand .btn-group {position:absolute;top:0;left:8px;}
.brand .search-field {position:absolute;top:0;right:20px;}

/*The Sign in and Register Part */
.brand button {
    height:27px;
    padding:0 15px;
    line-height:25px;
    border:1px solid rgb(15,15,15);
    background:-webkit-linear-gradient(top,rgb(67,68,68),rgb(41,42,43) 50%,rgb(15,16,17));
    background:-moz-linear-gradient(top,rgb(67,68,68),rgb(41,42,43) 50%,rgb(15,16,17));
    background:linear-gradient(top,rgb(67,68,68),rgb(41,42,43) 50%,rgb(15,16,17));
    color:rgb(200,200,200);
    box-shadow:inset 0 1px 0 rgb(77,77,78),0 1px 0 rgb(42,43,44);
    font-weight:500;
    text-shadow:1px 1px 0 rgb(15,15,16);
    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    transition: color 300ms ease;
}
.brand .sign-in {border-radius:14px 0 0 14px; border-right:0 none;}
.brand .register {border-radius:0 14px 14px 0;}

/*The Logo*/
.brand .logo {
    color:rgb(255,255,255);
    font-size:25px;
    font-weight:bolder;
    text-shadow:0 -1px 0 rgb(111,111,111), 0 -2px 0 rgb(32,33,34);
}

/*The Search Box */
.brand input {
    width:140px;
    height:26px;
    border:none;
    padding:0 0 0 30px;
    border-radius:13px;
    color:rgb(255,255,255);
    background-color:rgb(0,0,0);
    box-shadow:0 1px 0 rgb(43,44,45);
}
.brand .search-icon {
    position:absolute;
    display:block;
    left:10px;
    top:0;
    font-family:icon-search;
    font-size:13px;
    color:rgb(100,100,100);
    cursor:pointer;
    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    transition: color 300ms ease;
}
/*The Hover Effect  */
.brand button:hover {color:rgb(255,255,255);}
.brand button:active {background:-*-linear-gradient(top,rgb(15,16,17),rgb(41,42,43) 50%,rgb(67,68,68));}
.brand .search-icon:hover {color:rgb(255,255,255);}

/*The CSS3 Navigation Bar Part */
.nav {background-color:rgb(175,175,175);border-radius:0 0 4px 4px;}
.nav > li {float:left;}

/*The Items/Buttons of the Navigation Bar */
.nav > li > a {
    display:block;
    color:rgb(50,50,50);
    height:38px;
    font-size:13px;
    font-weight:bold;
    line-height:38px;
    padding:0 20px;
    border:1px solid;
    margin-right:1px;
    border-color:rgb(254,254,254) rgb(227,227,227) rgb(210,210,210);
    background:-webkit-linear-gradient(top,rgb(248,248,248),rgb(184,184,184));
    background:-moz-linear-gradient(top,rgb(248,248,248),rgb(184,184,184));
    background:linear-gradient(top,rgb(248,248,248),rgb(184,184,184));
    text-shadow: 0 1px 0 rgb(229,229,229);
}
.nav > li:first-child a {border-radius:0 0 0 4px;}
.nav > li:last-child {position:relative;}
.nav > li:last-child > a {
    border-radius:0 0 4px 0;
    padding:0 32px 0 22px;
    margin:0;
}

/*The Triangle Marker of the Drop-down Menu */
.nav > li:last-child > a:before {
    content:'';
    position:absolute;
    right:15px;
    top:18px;
    border:5px solid transparent;
    border-color:rgb(50,50,50) transparent transparent transparent;
}
/*The Hover and Active Effect of the Navigation Items/Buttons */
.nav > li:hover > a {
    border-color:rgb(255,255,255) rgb(240,240,240) rgb(221,221,221);
    background:-*-linear-gradient(top,rgb(255,255,255),rgb(203,203,203));
}
.nav > li:not(:last-child) > a:active {background:-*-linear-gradient(top,rgb(203,203,203),rgb(255,255,255));}
.nav > li:hover ul {display:block;}

/*The Drop-down Menu*/
.more-sport {
    position:absolute;
    width:478px;
    top:100%;
    right:0;
    margin-top:13px;
    padding:46px 0 61px 0;
    border:1px solid;
    border-color:rgb(250,250,250) rgb(226,226,226) rgb(234,234,234);
    border-radius:4px;
    background:-webkit-linear-gradient(top,rgb(227,227,227),rgb(193,193,193));
    background:-moz-linear-gradient(top,rgb(227,227,227),rgb(193,193,193));
    background:linear-gradient(top,rgb(227,227,227),rgb(193,193,193));
    color:rgb(0,0,0);
    display:none;
}

/*Fill Up the Space between the Navigation Bar and Drop-down Menu */
.more-sport:before {       
    content:'';
    position:absolute;
    width:100%;
    height:14px;
    bottom:100%;
    left:0;
}

/*Create the Triangle Marker */
.more-sport:after {
    content:'';
    position:absolute;
    bottom:100%;
    right:40px;
    width:0;
    height:0;
    border:5px solid transparent;
    border-color:transparent transparent rgb(227,227,227) transparent;
}

/*Use display:inline-block to realize multicolumn layouts */
.more-sport li {
    display:inline-block;
    width:153px;
    vertical-align: top;
}

/*element label style of each column */
.more-sport li a {
    display:block;
    margin-left:13px;
    color:rgb(0,0,0);
    font-size:13px;
    font-weight:bold;
    padding:2px 5px;
    text-shadow: 0 1px 0 rgb(240,240,240);
    border-radius:7px;
}

/* header */
.more-sport .header {
    display:block;
    position:absolute;
    top:0;
    left:0;
    margin-left:18px;
    line-height:48px;
    color:rgb(33,33,33);
    text-shadow: 0 1px 0 rgb(246,246,246);
}

/*footer*/
.more-sport .footer {
    display:block;
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    color:rgb(145,145,145);
    text-shadow:0 1px 0 rgb(242,242,242);
    line-height:49px;
    background-color:rgb(228,228,228);
    border-radius:0 0 3px 3px;
    text-indent:20px;
}

/* The footer button */
.more-sport .footer a {
    position:absolute;
    right:10px;
    top:50%;
    margin-top:-15px;
    color:rgb(50,50,50);
    text-shadow:0 1px 0 rgb(247,247,247);
    height:28px;
    line-height:28px;
    padding:0 12px;
    text-indent:0;
    border:1px solid rgb(200,200,200);
    border-radius:4px;
    background:-webkit-linear-gradient(top,rgb(252,252,252),rgb(234,234,234));
    background:-moz-linear-gradient(top,rgb(252,252,252),rgb(234,234,234));
    background:linear-gradient(top,rgb(252,252,252),rgb(234,234,234));
    box-shadow:inset 0 1px 0 rgb(255,255,255),0 1px 3px rgb(210,210,210);
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}

/*The hover effectof the elements */
.more-sport li a:hover {
    color:rgb(0,31,99);
    background:rgb(150,150,150);
}

/*The hover and active effect of the buttons */
.more-sport .footer a:hover {color:rgb(0,31,99);}
.more-sport .footer a:active {background:-*-linear-gradient(top,rgb(234,234,234),rgb(252,252,252));}

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

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Step 3: Contact Me for Help

If you cannot understand how to create the above CSS3 navigation bar, please feel free to contact me at Laurent@slicemaker.com. I am always on standby for whatever problem you are having. Or, you can directly download the CSS3 navigation bar and simply edit it to use it for your own website, it is free!