Page 1 of 1

Menu Buttons with Mouse Over

Posted: Fri Dec 02, 2011 1:49 pm
by fretbeater
How would I change the navigation menu to customized javascript buttons with mouseover effects?

Re: Menu Buttons with Mouse Over

Posted: Fri Dec 02, 2011 2:57 pm
by Brent
In the colors/***.ccs files, you will fine the #bar.
This is from neutral.css

Code: Select all

#bar .b a {
	background: url('../image/color2/neutral/tabup.png');
	color: #000000;
}
#bar .b a:hover{
	background: url('../image/color2/neutral/tabdown.png');
	color: #000000;
}
Each color css file has similar cord, depending on the color you wish and the layout, 2 or 3 column.
It's best if you create a new color/yourfile.css so your changes won't be overwritten on upgrades.
You would then need to manipulate the css file with your javascript if that is what you want to do.

Re: Menu Buttons with Mouse Over

Posted: Fri Dec 02, 2011 3:13 pm
by Brent
Sorry. You will also have to edit template/default/module/navigation.tpl and add code to the buttons to create your javascript effects.

Re: Menu Buttons with Mouse Over

Posted: Fri Dec 02, 2011 3:17 pm
by fretbeater
what if the buttons were images? how would i incorporate that with mouse over effects using JavaScript? don't i have to include the javascript in a header somewhere?

sorry i am a bit new to this..

Re: Menu Buttons with Mouse Over

Posted: Fri Dec 02, 2011 3:49 pm
by Brent
No, you do not have to include in header.
I would add it in the navigation.tpl at the top where it will be convenient for you to find.
As far as how you implement it, you would have to provide complete details on what you want to do.

Re: Menu Buttons with Mouse Over

Posted: Fri Dec 02, 2011 4:11 pm
by fretbeater
I am creating new buttons in Expression Blend and need to put each button with its separate function so that it works like the original nav tpl. I gave up on the mouse over for now. How would I place the new buttons to function like the original?

Re: Menu Buttons with Mouse Over

Posted: Fri Dec 02, 2011 4:45 pm
by Brent
Do your new buttons have text, or are you going to use the text similar to the old buttons.
The old buttons are a pain button with no text. all 5 buttons are the same.
The css file loads the button for each text declaration and the text is written over the button.
If that is what you want to do, just load your 2 button images to the appropriate folder for the color you are using.
catalog/styles/default/image/ color2 or color 3/ the color folder for the color you are using.

In the colors/***.ccs files, you will fine the #bar.
The change the tabup.png and tabdown.png to your image names in these lines:
background: url('../image/color2/neutral/tabup.png');
background: url('../image/color2/neutral/tabdown.png');

Re: Menu Buttons with Mouse Over

Posted: Fri Dec 02, 2011 5:44 pm
by fretbeater
Thank you