Menu Buttons with Mouse Over

Support for Template related issues
Post Reply
fretbeater
Posts: 8
Joined: Fri Dec 02, 2011 5:08 am

Menu Buttons with Mouse Over

Post by fretbeater » Fri Dec 02, 2011 1:49 pm

How would I change the navigation menu to customized javascript buttons with mouseover effects?

User avatar
Brent
Site Admin
Posts: 4400
Joined: Sat Dec 12, 2009 3:35 pm
Location: Canada eh

Re: Menu Buttons with Mouse Over

Post by Brent » Fri Dec 02, 2011 2:57 pm

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.

User avatar
Brent
Site Admin
Posts: 4400
Joined: Sat Dec 12, 2009 3:35 pm
Location: Canada eh

Re: Menu Buttons with Mouse Over

Post by Brent » Fri Dec 02, 2011 3:13 pm

Sorry. You will also have to edit template/default/module/navigation.tpl and add code to the buttons to create your javascript effects.

fretbeater
Posts: 8
Joined: Fri Dec 02, 2011 5:08 am

Re: Menu Buttons with Mouse Over

Post by fretbeater » Fri Dec 02, 2011 3:17 pm

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..

User avatar
Brent
Site Admin
Posts: 4400
Joined: Sat Dec 12, 2009 3:35 pm
Location: Canada eh

Re: Menu Buttons with Mouse Over

Post by Brent » Fri Dec 02, 2011 3:49 pm

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.

fretbeater
Posts: 8
Joined: Fri Dec 02, 2011 5:08 am

Re: Menu Buttons with Mouse Over

Post by fretbeater » Fri Dec 02, 2011 4:11 pm

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?

User avatar
Brent
Site Admin
Posts: 4400
Joined: Sat Dec 12, 2009 3:35 pm
Location: Canada eh

Re: Menu Buttons with Mouse Over

Post by Brent » Fri Dec 02, 2011 4:45 pm

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');

fretbeater
Posts: 8
Joined: Fri Dec 02, 2011 5:08 am

Re: Menu Buttons with Mouse Over

Post by fretbeater » Fri Dec 02, 2011 5:44 pm

Thank you

Post Reply