Navigation Bars

Posted: Mon Nov 24, 2003 8:36 pm (20 years, 4 months ago)

Hey all,

Newbie here, I was wondering if you could help me in any way possible? I would like to create a navigation bar, a bar that when you scroll over it some sub links show under the the hovered button..

If I don't make sense I'm sorry, but here is an example of what I would like to learn/do www.blackfoot.co.uk

If anyone could help me that would be great

cheers, Chris

Posted: Tue Nov 25, 2003 12:38 pm (20 years, 4 months ago)

I did this once before; it's done using javascript in a mouseover, something like this:

Code:

and then the javascript would be something like:

Code:

that might not work exactly as it is, as it has been some time since I did any javascript, but it should be pretty close.

Posted: Tue Nov 25, 2003 1:42 pm (20 years, 4 months ago)

You might also want to look at the source for the blackfoot example you gave. From a brief look, as far as I can tell it looks like the JavaScript used to make this menu was generated by Macromedia Fireworks. Doing a search for mm_menu on Macromedia gives various bits of info about it.

If you don't have fireworks you could try the 30 day trial, should be long enough to generate the menu Very Happy

Posted: Thu Nov 27, 2003 10:17 am (20 years, 4 months ago)

Hey all, thank you for your responses, much apreciated.

However, one more question...

Q: am I correct in sayin' that you have to create the buttons in which will appear when you hover over the main button? if so thats fine, but where do you actually place them? next to the main set of buttons? or does that code put them there automatically?

sorry for being a pain...still a newbie to JavaScript i guess

cheers

Chris

Posted: Thu Nov 27, 2003 11:15 am (20 years, 4 months ago)

Yes, you would create an 'up' and an 'over' state for each button. You would then just place the up button in your html. The javascript (which are just the standard swap image fuinctions from Macromedia) are then used to swap to the over image and restore it back again. the bit I've marked in red is the bit responsible for the swapping of the button image. The bits marked green are doing the sub menu.

<a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/home_over.jpg',1)"><img src="images/home.jpg" alt="Home" name="Image4" width="59" height="40" border="0" onMouseOver="MM_showMenu(window.mm_menu_1023181102_0,0,40,null,'Image4')" onMouseOut="MM_startTimeout();"></a>

N.B. these are calling functions defined elsewhere on the page