Are you looking for some inspiration for the navigation bar of your next website project?
This tutorial explains how to design an elegant navigation bar (gettyone inspired) for your site using CSS. The result is like this:
Live preview 
Download this tutorialStep 1: Navigation bar HTML Code
HTML code is very simple: the structure is a <ul> list with a <li> element for each link in the navigation bar:
<div id="navbar">
<span class="inbar">
<ul>
</span>
</div>
<span class="inbar">
<ul>
<li class="navhome"><a href="home.html"><span>Home</span></a></li>
<li><a href="about.html"><span>About</span></a></li>
<li><a href="contact.html"><span>Products</span></a></li>
<li><a href="contact.html"><span>Contact Us</span></a></li>
</ul><li><a href="about.html"><span>About</span></a></li>
<li><a href="contact.html"><span>Products</span></a></li>
<li><a href="contact.html"><span>Contact Us</span></a></li>
</span>
</div>
How you can see, heach link <a> contains a <span> tag inside itself. I use very often this simple tips to design liquid elements with rounded corners like this:
See also this post for an explanation about how to implement a fluid rounded corners (with and height) for an HTML element.
Step 2: CSS structure
This is the CSS file structure to design the navigation bar:
#navbar{
width:auto;
height:36px;
background:url(img/navbar-bg.png) left top repeat-x; }
#navbar .inbar{
display:block;
height:36px;
background:url(img/right-round.png) right top no-repeat; }
#navbar ul, #navbar ul li{
border:0px;
margin:0px;
padding:0px;
list-style:none;
height:36px;
line-height:36px; } #navbar ul{
background:url(img/left-round.png) left top no-repeat; }
#navbar ul li{
float:left;
display:block;
line-height:36px; }
#navbar ul li a{
color:#403e32;
text-decoration:none;
font-weight:bold;
display:block; }
#navbar ul li a span{
padding:0 20px 0 0;
height:36px;
line-height:36px;
display:block;
margin-left:20px; }
#navbar .navhome a, #navbar .navhome a:hover{
background:url(img/a-bg.png) left top no-repeat;
height:36px;
line-height:36px; }
#navbar .navhome a span, #navbar .navhome a:hover span{
color:#FFFFFF;
background:url(img/span-bg.png) right top no-repeat;
height:36px;
line-height:36px; }
#navbar ul li a:hover{
background:url(img/ahover-bg.png) left top no-repeat;
height:36px;
line-height:36px; }
#navbar ul li a:hover span{
background:url(img/spanhover-bg.png) right top no-repeat;
height:36px;
line-height:36px; }
width:auto;
height:36px;
background:url(img/navbar-bg.png) left top repeat-x; }
#navbar .inbar{
display:block;
height:36px;
background:url(img/right-round.png) right top no-repeat; }
#navbar ul, #navbar ul li{
border:0px;
margin:0px;
padding:0px;
list-style:none;
height:36px;
line-height:36px; } #navbar ul{
background:url(img/left-round.png) left top no-repeat; }
#navbar ul li{
float:left;
display:block;
line-height:36px; }
#navbar ul li a{
color:#403e32;
text-decoration:none;
font-weight:bold;
display:block; }
#navbar ul li a span{
padding:0 20px 0 0;
height:36px;
line-height:36px;
display:block;
margin-left:20px; }
#navbar .navhome a, #navbar .navhome a:hover{
background:url(img/a-bg.png) left top no-repeat;
height:36px;
line-height:36px; }
#navbar .navhome a span, #navbar .navhome a:hover span{
color:#FFFFFF;
background:url(img/span-bg.png) right top no-repeat;
height:36px;
line-height:36px; }
#navbar ul li a:hover{
background:url(img/ahover-bg.png) left top no-repeat;
height:36px;
line-height:36px; }
#navbar ul li a:hover span{
background:url(img/spanhover-bg.png) right top no-repeat;
height:36px;
line-height:36px; }
Use this navigation bar on Blogger Template
Add this link to the CSS file in the <head> tag of your template
<link href="http://woork.bravehost.com/elegantNavbar/topbar.css" rel="stylesheet" type="text/css" />
...and copy and paste in a section of your template HTML code in the step 1. You have to change only the name and the URL of your link!
No comments:
Post a Comment