Creating horizontal Sub-Navigation with CSS

On 08.08.09, In Cascading Style Sheet (CSS), by Template Tutorial

For those of you who like crating and modifying website template, you should know that one section that you have to create is Navbar (Navigation Bar) that functions to place the menus of a blog or website. Well, at this post, I will give the tutorial about how to create the horizontal sub navigation with CSS.

But before I give the tutorial, you can view the example of horizontal sub navigation that I have created. Please click the image below to view the live demo.

What do you think? Are you interested in creating the horizontal sub-navbar? If yes, please follow the steps below:

Please copy and place the CSS code below between the code <head></head> or if you are confused, you can place exactly above the code]]></b:skin>

ul#topnav {margin: 0; padding: 0;float: left;width: 960px;list-style: none;position: relative;font-size: 12px;background: url(http://i28.tinypic.com/6nxug1.gif) repeat-x;}

ul#topnav li {float: left;margin: 0; padding: 0;border-right: 1px solid #555;}

ul#topnav li a {padding: 7px 15px;display: block;color: #f0f0f0;text-decoration: none;}

ul#topnav li:hover { background: #27990A url(http://i28.tinypic.com/2crrmyu.png) repeat-x; }ul#topnav li span {float: left;padding: 15px 0;position: absolute;left: 0; top:34px;display: none;width: 960px;background: #27990A;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;}

Then copy the JavaScript below and paste under the code ]]></b:skin> above the code </head>

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$("ul#topnav li").hover(function() { //Hover over event on list item

$(this).css({ 'background' : '#27990A url(http://i28.tinypic.com/2crrmyu.png) repeat-x'}); //Add background color and image on hovered list item

$(this).find("span").show(); //Show the subnav

} , function() { //on hover out...

$(this).css({ 'background' : 'none'}); //Ditch the background

$(this).find("span").hide(); //Hide the subnav

});

});

</script>

The next step is that you have to create HTML code for the navbar and the horizontal sub-navbar. If you are confused, please copy the html code that I have made exactly under the code <body>

<ul id=”topnav”><li><a href=”#”>Home</a></li><li><a href=”http://template-tutorial.com/search/label/Blogger%20Templates”>Blogger Template</a><a href=”http://template-tutorial.com/2009/04/blogger-template-magazine-template-r13.html”>Magazine Template R.1.3</a> |<a href=”http://template-tutorial.com/2009/04/magazine-template-r12.html”>Magazine Template R.1.2</a> |<a href=”http://template-tutorial.com/2009/03/blogger-template-magazine-template-r1.html”>Magazine Template R.1</a></li><li><a href=”http://template-tutorial.com/search/label/Wordpress%20Themes”>Wordpress Themes</a><a href=”http://template-tutorial.com/2009/04/wordpress-theme-pixeled.html”>WP Theme – Pixeled</a> |<a href=”http://template-tutorial.com/2009/05/wordpress-theme-bizmax.html”>WP Theme – Bizmax</a> |<a href=”http://template-tutorial.com/2009/04/wordpress-themes-dark-wordpress-themes.html”>Dark WP Themes</a></li><li><a href=”http://template-tutorial.com/search/label/Money”>Make Money Online</a><a href=”http://template-tutorial.com/2009/05/making-money-by-joining-with.html”>Linkworth.com</a> |<a href=”http://template-tutorial.com/2009/05/make-money-online-with-reviewmecom.html”>ReviewMe.com</a> |<a href=”http://template-tutorial.com/2009/06/broker-sites-that-pay-your-blogging.html”>Broker Sites PTR</a> |<a href=”http://template-tutorial.com/2009/05/how-to-earn-dollars-from-linkworthcom.html”>Linkworth</a></li><li><a href=”#”>Contact</a></li></ul>

The basic code of the html code above is:

<ul id="topnav">

<li><a href="#">Link</a></li>

 <li>

   <a href="#">Link</a>

    <!--Subnav Starts Here-->

 <span>

   <a href="#">Subnav Link</a> |

   <a href="#">Subnav Link</a> |

   <a href="#">Subnav Link</a> |

   <a href="#">Subnav Link</a>

 </span>

<!--Subnav Ends Here-->

</li>

<li><a href="#">Link</a></li>

</ul>

Remarks: at the section of ‘width‘, please adjust the width that it will suit the template. You also can fit the color of background and image of the navbar.

Happy trying and Good Luck!

I give thanks to Sohtanaka, as the inspiration of creating this Horizontal Sub Navigation.

Template Tutorial

Template Tutorial is a site that contains about website information, download softwares, blogging tutorial, wordpress tutorial, blogger templates and wordpress themes.

Visit Authors Website