Blogger Tips :Menu Title Bar Blogspot

Description: Create the title bar for easy interface with CSS blogspot bring your positive experience for users.A CSS based tab menu that supports a secondary level of menu items. Both levels are horizontal, so there no drop down menus that may become hidden underneath form elements in browsers such as IE. Cool!www.ArborAssays.com

Example:

When You click Tab > Home > you see

You click Tab > Tutorials > you see

You click tab > References > you see

You click tab > Javascripts > you see

Directions:

Step 1: Add the following code to the section of your page:

It references two external files. Download them below (right click, and select "save as"):

Step 2: Add the below HTML to your page, which contain your menu links:

<ul id="maintab" class="basictab">
<li><a href="http://www.javascriptkit.com">Home</a></li>
<li class="selected" rel="tutorials"><a href="#">Tutorials ▼</a></li>
<li rel="references"><a href="#">References ▼</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">JavaScripts</a></li>
</ul>

<div id="references" class="submenustyle">
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
<a href="http://www.javascriptkit.com/domref/">DOM Reference</a>
<a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a>
</div>

<div id="tutorials" class="submenustyle">
<a href="http://www.javascriptkit.com/javatutors/">JavaScript Tutorials</a>
<a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS Tutorials</a>
<a href="http://www.javascriptkit.com/howto/">Web Building tutorials</a>
<a href="http://www.javascriptkit.com/howto/htaccess.shtml">htaccess Tutorial</a>
</div>

Enjoy!

Configuration info

This menu is entirely HTML based and very easy to configure. I'll use a snippet of the HTML code in Step 2 to explain how to associate a submenu with a tab:

Enjoy!

Configuration info

This menu is entirely HTML based and very easy to configure. I'll use a snippet of the HTML code in Step 2 to explain how to associate a submenu with a tab:


Home
References ▼



JavaScript Reference
DOM Reference
CSS Reference

As you can see, to associate a submenu with a particular main tab, insert the "rel" attribute inside the tab's LI element with the id of the submenu as its value. At the very end, you'll want to initialize the entire menu by calling "initalizetab()" with the id of the tab menu.

You can also have the contents of a particular submenu displayed automatically when the page loads by adding a CSS class next to the rel attribute: