Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 375
  • Last Modified:

Change menu hover state looks based on image

At http://tinyurl.com/2d4dlx8 I am working on a site. The menu the way it is is not exactly what the client wants. See  menu correct style for a view of what is needed. I am having a hard time figuring out how I can do the hover part as the hover display seems to to need changes not only on the menu item hovered on, but on the previous one as well as a part of it should match the same color as the hover state color. How can I manage this?
0
rhandalthor
Asked:
rhandalthor
  • 5
  • 5
1 Solution
 
BardobraveCommented:
I'm not sure of understanding what do you need, could you please explain it a bit more?
0
 
rhandalthorAuthor Commented:
Now when I hover on a menu item the color changes. But not like in earlier attached image. In the earlier attached image - menu as it should become - the color just above and next the curved part is also changed on hover. But the way the site's menu is created I do not see how I can adjust the color just surrounding the curved part on hover on its neighboring menu item...
0
 
BardobraveCommented:
Ok... now I think I understand you.

So your buttons have two differenciated parts and you need to change both on hover event.

We need to know how are you doing the curved part above the buttons, to think in a way to change it at the same time you change the button itself.

I suppose that you change button color through CSS, so when you get your mouse over a button the hover style gets active and button changes it's color. And your problem is that you can't generate this style at same time for button and it's curved part above.

If this is the scenario, you'll need some type of client code to change the style on the curved part also.

I recommend you to avoid hover styles and define two classes on you stylesheet. One class for standard style and another one for "hover" style.

Then, through javascript, you can change your button's class and your curved part's class on button onMouseOver event (backing to standard classes when onMouseOut event fires).

Make me know if you need further assistance to reach this behaviour.
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
rhandalthorAuthor Commented:
@ bardoBrave See earlier added link http://tinyurl.com/2d4dlx8 so you can see how it is all set up at the moment. I use images and CSS for hover. I prefer to make the adjustments as minimal as possible of course.
0
 
BardobraveCommented:
Ok then.

You need two images for the curve (one normal and one for hover style) and two style classes for the button.

On button onMouseOver event, you change the class of your button and the image background of the curved part (or the url of the image if i isn't a background).

On button onMouseOut event you change back styles and images to normal styles.
0
 
rhandalthorAuthor Commented:
Basically I need to have two images change on hover to achieve this the way I see it and how can a trigger a hover on two images when I hover on one? I mean the hover button should change color and a piece (curve background) of button left of hove item. A larger hover image with a z-index covering its neighbor to the left maybe? Maybe I need to skip one night and try again. But I really do not see it yet .
0
 
BardobraveCommented:
When your object is hovered you can fire a javascript function, this javascript function can get the curved part object and change it's background or image url, so it swaps to a hovered color version. On onMouseOut event you can revert back the color to original through another javascript function.

It's possible that you need to change both styles (button and curved image) through javascript, as changing one relying on stylesheet and another one through code may result in a slight delay in the change that could result a bit weird on the screen.
0
 
rhandalthorAuthor Commented:
Yeah, I guess JavaScript would be the only way to go. Too bad that is my real weak spot. I use jQuery and ready-made plugins that need basic adjustments most of the time. Would not really know where to start to manipulate two buttons to create a simultaneous hover effect that is smooth. And the menu is already using a Sprybar JavaScript so to add JavaScript to that might prove difficult. For me anyways. Any tips where to start Bardobrave?
0
 
BardobraveCommented:
Ok, lets see.

If you are using jquery things get easier.

Your buttons should have an id to identify them. Also, your curved parts should have and id too.

On your buttons mouseover event you attach a change of style.

$("#button1Id").mouseover(function () {
       $("#button1Id").addClass("styleClassOver");
       $("#button1IdCurvedPart").addclass("styleClassOverCurvedPart");
       $("#button1Id").removeClass("styleClassNormal");
       $("#button1IdCurvedPart").removeClass("styleClassNormalCurvedPart");
});

$("#button1Id").mouseout(function () {
       $("#button1Id").addClass("styleClassNormal");
       $("#button1IdCurvedPart").addClass("styleClassNormalCurvedPart");
       $("#button1Id").removeClass("styleClassOver");
       $("#button1IdCurvedPart").removeClass("styleClassOverCurvedPart");
});

styleClassNormal, styleClassNormalCurvedPart, styleClassOver and styleClassOverCurvedPart will be CSS style classes that you define on your stylesheet to render buttons and it's curved parts in normal mode and in hovered mode. If you represent curved parts through images instead of changing styles you can use $("#button1IdCurvedPart").attr("href","pathToHoverCurvedImage"); to swap between normal and hovered images inside the functions.

You will need to add a pair of functions like above ones to each one of your buttons, this functions will link hover event behaviour of buttons and curved parts.

0
 
rhandalthorAuthor Commented:
Will work on that as soon as possible. Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now