Mouseover Tabs Menu in CSS

[- Empty Shell -]

Hi everyone, I am trying to make a tabs menu in CSS. Tabs menu definitely add attraction to the site, plus it makes the user more easy to direct to the other page. Also I have seen some gray round corner tabs that reveal a second level when the mouse rolls over each tab. I am trying to write a code that will do the same.!! I want to write a script that will move the mouse over designated links, and additional sub menu contents appear.!! So can anyone explain me how the Mouseover Tabs Menu in CSS are used.??
Waiting for the Solutions..!!

[kyosang]

You can use the mouseover tabs menu for more useful things other than the attraction. By using the mouseover tabs menu in CSS, you will able to move the mouse over designated links. Tab navigation has been one of the most fundamental element in any modern web structure. You can also add the sub menu contents which will appear in a separate DIV in CSS. Means that moving the mouse over designated links, you can able to add the "sub links" beneath it. The sub menu contents are defined inside an external file.

[Solitario]

When you have the appropriate markup language and you are having much knowledge about that language, then I would like to suggest you to use the markup rather than images whenever you want to convey information. The drawbacks of using an images is that it can appear blurry and pixelated when you use the screen magnifier. Also when the user uses the screen magnifier, many times they cannot read text embedded in images. So, its better to use the markup language instead of using an images. So according to me the best solution is using the CSS menu tabs. This will help you a lot in creating the menus.!

[MELTRONICS]

I have given the coding that may help you in creating the menu tab by using the HTML and CSS.
Since you are doing for the first time, I suggest that you should start with the simple link :

<div id="menu"><a href="#">Index</a></div>

After writing this code in HTML, you will have to assign the code to the CSS code. You can do this, like I did, in following coding :

#menu a
{
color: #000f;
background: #ff000c;
text-decoration: none
}

You can get the simple menu by using the above codes.

[Viensterrr]

I thought that providing you with an example of Mouseover Tabs Menu in CSS will help a lot. So I have provided you with the sample of the code. You will have to add the following sample HTML to the BODY of your page. And as I said earlier, this sample contains one instance of a Mouseover Tabs Menu. Here is the script :

<div id="menutab" class="classmenu">
<ul>
<li><a href="http://www.javascripttrial.com" rel="gotsubmenu[selected]">JavaScript Trial</a></li>
<li><a href="http://www.techarena.com" rel="gotsubmenu">CSS Drive</a></li>
<li><a href="http://www.google.com">No Sub Menu</a></li>
</ul>
</div>

<div id="menusub" class="tabsmenucontentclass">

<a href="submenucontents.htm" style="visibility:hidden">Sub Menu contents</a>

</div>

<script type="text/javascript">
//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
mouseovertabsmenu.init("menutab", "menusub", true)

</script>

[Deabelos]

By using the CSS, you can create a gray round corner tabs that reveal a second level when the mouse rolls over each tab. I know the coding for adding the left menu tab corner. For doing that, you need to make a small image with the same colour for the left rounded corner. I hope that the following code will definitely help you :
(The code is same as described by 'MELTRONICS', so that it will easy for you to understand)

#menu a
{
color: #000f;
background: #ffa20c url(left-tab.gif) left top no-repeat;
text-decoration: none
}

If you want to add some padding in your CSS, then you can have look at the code given down :

#menu a
{
color: #000f;
background: #ffa20c url(left-tab.gif) left top no-repeat;
text-decoration: none;
padding-left: 10px
}