Navigation Horizontal Bar

Here are the steps to add a Horizontal Navigation Menu bar.

     

Ø  Login to blogger
    

Ø  Click Design
    

Ø  Then click Edit HTML
    

Ø  After that, find this code ]]></ b: skin>

                                                        

Ø  If you have found, paste the code below exactly above the code

.container {width: 860px;background:#000; margin: 0 auto;}
ul#topnav {
margin: 0; padding: 0;
float: left;
width: 860px;
list-style: none;
position: relative;
font-size: 1.2em;
background: url(.gif) repeat-x;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #555;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #1376c9}
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:35px;
display: none;
width: 860px;
background: #1376c9;
color: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}

Ø    After that, place the following code below ]]></ b: skin>

<div class='container'>
<ul id='topnav'>
<li><a href=''>Home</a></li>
<li>
<a href='#'>About</a>
<span>
<a href='#'>The Company</a>
<a href='#'>The Team&lt;/a>
<a href='#'>Careers</a>
</span>
</li>
<li>
<a href='#'>Portfolio</a>
<span>
<a href='#'>Web Design</a>
<a href='#'>Development</a>
<a href='#'>Identity&lt;/a>
<a href='#'>SEO &amp; Internet Marketing</a>
<a href='#'>Print Design</a>
</span>
</li>
<li><a href='#'>Contact</a></li>
</ul>
</div>

Ø      After the above code is entered correctly the next step we add the code below to call the code that we added earlier. copy and paste the code below the above code <div id='content-wrapper'>

  

ü  To put the url address code # destination

ü  After that save your template

Now look at the results.

 

These may help you, plus you may find a better customizable horizontal menu to use:

ee following sites for navigation menus:

ü  CSS Library Horizontal CSS Menus: http://www.dynamicdrive.com/style/cssli ... tegory/C1/

ü  CSS Library Vertical CSS Menus: http://www.dynamicdrive.com/style/cssli ... tegory/C2/
http://www.dynamicdrive.com/dynamicindex1/
http://www.cssplay.co.uk/menus/

ü  How to Style an Unordered List with CSS: http://www.webreference.com/programming ... index.html

ü  Sexy Drop Down Menu w/ jQuery & CSS: http://www.noupe.com/tutorial/drop-down ... y-css.html

ü  NavDock jQuery Plugin (Ver 1.5.1): http://plugins.jquery.com/project/NavDock

ü  Making CSS Rollover Buttons: http://www.elated.com/articles/css-rollover-buttons/

How To:

http://www.w3.org/TR/WCAG10-HTML-TECHS/#links
http://www.creativepro.com/article/drea ... tion-links
http://efuse.com/Design/navigation.html

ü  Simple JQuery Accordion menu: http://www.i-marco.nl/weblog/jquery-accordion-menu/

ü  Drop-Down Menus, Horizontal Style: http://www.alistapart.com/articles/horizdropdowns/

ü  The Right Way to Make a Dropdown Menu: http://www.sitepoint.com/blogs/2009/04/ ... down-menu/

There are also some free online menu amkers you can use.