How to add vertical hover navigation sub-menu?

JavaScript
1

hi all,
I am new to css and javascript programing.I want help regarding this…
I have an horizontal menu,but the menu items all are in image format.when mouseover on it, it display another color means it is in active state.(this is also an image of another color to differentiate active or not).

Now i want to add vertical sub-menu of diff levels to the already existed menu(i.e original menu is of image format). Is it possible to add the sub-menu items to the image menu? if possible, i want the solution for it.

Format :::

Home(image format) Example(image format) Download(image format)
|
Ex on php
|
Ex on MySql
The sub-menu items will display only mouse over on the main menu…

Thanking you…
venkat6134 is offline Reply With Quote

2

Okay, that’s all well and good but what I need is the structure of your navigation.
Please tell me your nav section isn’t just a bunch of <a> tags that are places close together in the document…

3

i use javascript::
<script language=“JavaScript”>
rollOver[8] = new Image()
rollOver[8].src=“/buttons/login_on.gif”
rollOver[9] = new Image()
rollOver[9].src=“/buttons/register_on.gif”
}
function rollSwitch(name,m) {
picSwap(name, rollOver[m])
}
function picSwap(i1,i2) {
var temp = i1.src
i1.src=i2.src
i2.src=temp
}
</script>

Adding images whereever we require:::

<a href=“http://sitename/login.html”>
<img border=“0” onmouseover=“rollSwitch(document.PROF8,8)”
onmouseout=“rollSwitch(document.PROF8,8)” name=“PROF8” src=“/buttons/login.gif”></a>

<a href=“http://sitename/reg.html”>
<img border=“0” onmouseover=“rollSwitch(document.PROF9,9)”
onmouseout=“rollSwitch(document.PROF9,9)” name=“PROF9” src=“/buttons/register.gif”></a>

4

What you’re saying doesn’t make sense. Please be clearer and more precise in what you want to say.

5

Well now that’s just wrong.

If you want a dropdown menu, you really should follow the the tutorial I linked earlier. You can customize that once you’ve built it to use images if you choose, but you cannot expect to build a complicated menu using a loose collection of anchors. Go watch that tutorial again, it will go over building your navigation using unordered lists, which can have child lists as their sub menus. You can make your anchors contain images just like the ones you’re using now using that method.

6

Not a pretty ways. Hacky ones, unclean ones, javascript heavy ones… The tutorial I sent you to is really one of the simplest ways to implement this, and if you don’t care about IE6, it won’t require any javascript.
I STRONGLY recommend using the method in the tutorial. It will be faster and easier than using javascript to hack one into place.

7

is there any another way to get sub-menu?

8

yes, by using only <a> tags.

9

How is your current menu structured? May I see the code?

10

for ex,
i am using horizantal menu as of gif images for HOME,LOGIN,REGISTER. And also add mouseover effect to it like changing the color of that image(this is another image of diff color to identify it is highlighted)
And i add href to it, to go to specific page when ever it clicked.

Now i want to add sub-menu of it in a vertical fashion…

11

Thank you for reply me…
but i have already images in horizontal menu.
For that i will add sub-menu.
but it shows all are with css/java script…
Any other way for this???

12

Take a look at this nettuts tutorial: http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/

I think you’ll find it helpful for what you’re trying to do. It goes over building a multi-level menu entirely in CSS, with only IE6 needing some javascript to handle its inability to work well with some of the CSS techniques used.