jQuery Forum

Menu solution

in Getting Started • 6 years ago

I need help how to create a menu that

1. when loaded on the page is showing divs css with colour

2. when mouseover all divs except the one that was hovered turns to grey

what is the best way to do this?

thanks

Replies(39)

Re: Menu solution

6 years ago

Start writing, Use :hover in CSS. You don’t need any jQuery.

JΛ̊KE

Re: Menu solution

6 years ago

that won't work let me explain what I need

menu bar with 4 divs - when the page loads they load purple in colour

I understand how to mouseover 1 to make it change colour but what I need is when I mouse over 1 it can stay purple but i need the other 3 to change to grey based on me hovering over the 1st div. and so on for the rest.

The one I mouse over will appear active while the others will be grey (look not active)

Re: Menu solution

6 years ago

Start writing. Use http://jsfiddle.net and we can assist when you come to a problem.

JΛ̊KE

Re: Menu solution

6 years ago

Put the 4 divs in a container.

</div>

.bar .item { background: purple; }

.bar:hover .item {background: grey; }

.bar:hover .item:hover { background: yellow;}

CSS is very powerful. Don't apply the jQuery hammer to this problem, which needs a CSS screwdriver!

Re: Menu solution

6 years ago

Note I made a slight edit to the above to correct specificity.

http://jsfiddle.net/18e9x3oz/

Re: Menu solution

6 years ago

http://jsfiddle.net/18e9x3oz/1/

Re: Menu solution

6 years ago

I just updated to add a few more items to make the demo more clear.

Re: Menu solution

6 years ago

Note: you need to click first somewhere in the jsFiddle preview window in order to select the iFrame it creates for the demo.

http://jsfiddle.net/18e9x3oz/3/

Re: Menu solution

6 years ago

I guess you only wanted two colors, not three:

Re: Menu solution

6 years ago

http://jsfiddle.net/jakecigar/18e9x3oz/2/ has less HTML and no class=item.

JΛ̊KE

Re: Menu solution

6 years ago

^ Yes, that would be the minimum. It relies on a specific HTML structure. I wanted to show the generic way and spell it out.

The key is understanding CSS selectors, HTML element nesting, and the CSS cascade. (The order of the CSS rules matters!)

It's a very good idea to learn CSS well. You can do all sort of things that you might think you'd need code for.

Re: Menu solution

6 years ago

http://jsfiddle.net/jakecigar/18e9x3oz/5/ adds a little fade with CSS animations. All the same HTML and CSS selectors, just one different rule.

JΛ̊KE

Re: Re: Menu solution

6 years ago

http://jsfiddle.net/jakecigar/18e9x3oz/6/ switches to background-color, which is more appropriate.

JΛ̊KE

Re: Menu solution

6 years ago

thanks for all the support on this one more question..

When the item is moused over and turns purple, which is great but I also need the page background to change. I have attempted to change to link my #bg div with the active menu item but can't seem to figure it out.

Ideas to link my #bg background display to reach in the div when the menu a is hovered over?

Re: Menu solution

6 years ago

What is your #bg div? Please update the fiddle with some HTML that is closer to your own page.

JΛ̊KE

Re: Menu solution

6 years ago

not sure how to share fiddle with you? This is an example

BG calls on an images (css)

When bar .item is hovered I want BG image to show a different image

<div class='item'>< a href="">button link or image here</a></div>

</div>

Re: Menu solution

6 years ago

http://jsfiddle.net/jakecigar/18e9x3oz/7/ is one way to do it.

JΛ̊KE

Re: Menu solution

6 years ago

Thank you I see that works great in your example but I still can't seem to get it to work for me.

This is my complete code as it is now and this is a wordpress site.. I see that adding javascript isn't like adding to html doc.

so currently when I mouseover bar (circle button it changes from purple to grey) What I need is when I mouse over the circle the background pictures changes.

click here to see example link (html file I have started) then I will worry about making it work in wordpress.

Re: Menu solution

6 years ago

[Error] ReferenceError: Can't find variable: $

global code (example.html, line 9)

You don’t have jQuery

JΛ̊KE

Re: Menu solution

6 years ago

So I added this to the jquery.index.js file

$(".bar .item>*").mouseover(function () {

$("#bg").attr("data-image", $(this).index())

});

and added this to my html document...

what am I missing?

Re: Menu solution

6 years ago

does not exist.

You also need to put jQuery code in a "ready" callback…

$(function(){
$(".bar .item>*").mouseover(function () {
$("#bg").attr("data-image", $(this).index())
});
})

Fiddle does that for you

JΛ̊KE

Re: Menu solution

6 years ago

Jake, I have run into an issue... ( really appreciate your help)

When I add container divs around the working code it doesn't work anymore...

please see here

my other question is if I want the bg to return to original state (orange on mouse out) would I use this type of code

$(function()$(".bar .item>*").mouseleave(function() {

$("#bg").hide();

});

}) </script>

Re: Menu solution

6 years ago

http://jsfiddle.net/jakecigar/18e9x3oz/8/ <--

I’m not sure what text text text is supposed to be for. Could you use some real words, update the fiddle instead of making your own page?

JΛ̊KE

Re: Menu solution

6 years ago

It works just fine for me. What do you think is "not working"? I think it works according to the description of what you want.

Like Jake, I don't know what "text text text" means. Is that the trouble?

Aside: I find it really counter-intuitive and confusing, though. Maybe it's just me. But the way the selection works just seems "backward" to me, and I think would for others, as well.

I'd find it a lot less confusing if the buttons were grayed-out (or some light color) when they are not selected, and then whichever one is moused-over (or selected) then becomes purple.

It's not what people are used to. Maybe that is what you are trying to achieve, and it it's meant to be "creative" so be it. But it's also very likely to confuse.

Re: Menu solution

6 years ago

Here is my code Jake - http://jsfiddle.net/srivers/s7h9fwtb/3/

My end result is this..

hover over circle 1 it turns purple and the rest grey

and background changes to background picture "on"

when you mouse off the circle - the circle turns back to purple (or whatever colour I need) and then the background images changes back to the first image "off" state.

Thanks

Re: Menu solution

6 years ago

My last demo fixed that. http://jsfiddle.net/jakecigar/s7h9fwtb/5/ <--

$(".bar").mouseleave(function () {

$("#aboutbgnew").removeAttr("data-image")

});

JΛ̊KE

Re: Menu solution

6 years ago

I'm still confused. You haven't said if it works as you want, or not!

When I try the latest one, there is no change to the background image. There is a background image that is just always there.

http://en.wikipedia.org/wiki/Photosensitive_epilepsy

Re: Menu solution

6 years ago

I also see no change in background image with Jake's latest.

I am using desktop Safari 8.0.3 on OSX.

Maybe there is something that I am not noticing. I have to say that I find the effect not only confusing, but rather visually disturbing.

I would not use this myself, because of the small possibility that it might induce an epileptic seizure in a susceptible viewer. I am not saying that to be funny. It's something you should consider.

Here is a starting point if you will take my comment seriously. Skip down to the "Web Design" section:

Re: Menu solution

6 years ago

Sherry changed the organization of the item. They were moved into the div instead of being on the div.

JΛ̊KE

Re: Menu solution

6 years ago

http://jsfiddle.net/jakecigar/s7h9fwtb/6/ <-- seems kinda normal.

JΛ̊KE

Re: Menu solution

6 years ago

Perhaps some timer and/or nice slow fade that would prevent those BRIGHT flashing purple buttons as you move the mouse from one to another other across the empty space between would make it more visually pleasing and less troublesome...

Re: Menu solution

6 years ago

Yes, backgrounds are back now, and those disturbing flashes are gone.

I think some fade would be nice, and calm it down a bit.

Did you ever see "The Andromeda Strain", Jake? ;) LOL I knew about this at an early age. And I actually worked on firmware for one of those moving dot-matrix LED signboards, and we had to take the flashing into consideration. Liability issue. We had to be careful about flash and refresh frequencies.

Re: Menu solution

6 years ago

I did a fade a few demos back. It was ignored.

JΛ̊KE

Re: Menu solution

6 years ago

Thanks for the links.. I need to be able to add text above the circle as an image will be in the circle themselves.

When I mouse off of the circle does the images change back to what #BG is set to?

Re: Re: Menu solution

6 years ago

Nothing, Just reset the data-image

$("#aboutbgnew").removeAttr("data-image")

JΛ̊KE

Re: Menu solution

6 years ago

I am going to add the fade effect. Thanks to both of you.

I still don't have a working solution. Maybe more appropriate ... hover over circle one and show image 1 in the background. hover off circle one and show original background image for that page.