Move this topic
Menu solution
in Getting Started
•
7 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
1
Replies(39)
Leave a comment on jakecigar's reply
Re: Menu solution
7 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)
Leave a comment on Sherry Rivers's reply
Re: Menu solution
7 years ago
Leave a comment on jakecigar's reply
Re: Menu solution
7 years ago
Put the 4 divs in a container.
<div class='bar'>
<div class='item'>Blah</div>
<div class='item'>Foo</div>
</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!
Leave a comment on watusiware's reply
Leave a comment on watusiware's reply
Leave a comment on watusiware's reply
Leave a comment on watusiware's reply
Re: Menu solution
7 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.
Leave a comment on watusiware's reply
Leave a comment on watusiware's reply
Re: Menu solution
7 years ago
Leave a comment on jakecigar's reply
Re: Menu solution
7 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.
Leave a comment on watusiware's reply
Re: Menu solution
7 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
7 years ago
http://jsfiddle.net/jakecigar/18e9x3oz/6/ switches to background-color,
which is more appropriate.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Menu solution
7 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?
Leave a comment on Sherry Rivers's reply
Re: Menu solution
7 years ago
What is your #bg
div? Please update the fiddle with some HTML that is closer to your
own page.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Menu solution
7 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 id="bg">
<div class='bar'>
<div class='item'>< a
href="">button link or image here</a></div>
</div>
</div>
Leave a comment on Sherry Rivers's reply
Leave a comment on jakecigar's reply
Re: Menu solution
7 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.
Leave a comment on Sherry Rivers's reply
Re: Menu solution
7 years ago
[Error] ReferenceError: Can't find variable: $
global
code (example.html, line 9)
You don’t have jQuery
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Menu solution
7 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...
<script type="text/javascript" src="/js/jquery-index.js"></script>
what am I missing?
Leave a comment on Sherry Rivers's reply
Re: Menu solution
7 years ago
<script type="text/javascript" src="/js/jquery-index.js"></script>
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
Leave a comment on jakecigar's reply
Re: Menu solution
7 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
<script>
$(function()$(".bar .item>*").mouseleave(function() {
$("#bg").hide();
});
}) </script>
Leave a comment on Sherry Rivers's reply
Re: Menu solution
7 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
Leave a comment on jakecigar's reply
Re: Menu solution
7 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.
Leave a comment on watusiware's reply
Re: Menu solution
7 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
Leave a comment on Sherry Rivers's reply
Re: Menu solution
7 years ago
My last demo fixed that. http://jsfiddle.net/jakecigar/s7h9fwtb/5/ <--
$(".bar").mouseleave(function () {
$("#aboutbgnew").removeAttr("data-image")
});
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Menu solution
7 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.
Leave a comment on watusiware's reply
Re: Menu solution
7 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:
Leave a comment on watusiware's reply
Re: Menu solution
7 years ago
Sherry changed the organization of the item. They were moved into the
div instead of being on the div.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Menu solution
7 years ago
Leave a comment on jakecigar's reply
Re: Menu solution
7 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...
Leave a comment on watusiware's reply
Re: Menu solution
7 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.
Leave a comment on watusiware's reply
Leave a comment on jakecigar's reply
Re: Menu solution
7 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
7 years ago
Nothing, Just reset the data-image
- $("#aboutbgnew").removeAttr("data-image")
JΛ̊KE
Leave a comment on Sherry Rivers's reply
Re: Menu solution
7 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.
Leave a comment on Sherry Rivers's reply
Re: Menu solution
7 years ago
Leave a comment on jakecigar's reply
Re: Menu solution
7 years ago
when each image loads in for the first time it is a flashy hard on the eyes load. Is there a way to preload them to avoid this?
Leave a comment on Sherry Rivers's reply
Re: Menu solution
7 years ago
yes. If you hit the search engines, you will find many ways to cache images.
JΛ̊KE
Leave a comment on jakecigar's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Sherry Rivers's question
{"z7664639":[14737000006067868,14737000006067870,14737000006067872,14737000006067874,14737000006067876,14737000006067878,14737000006067880,14737000006068311,14737000006068315,14737000006068317,14737000006068319,14737000006068321],"z48901190":[14737000006066530,14737000006066607,14737000006066723,14737000006066725,14737000006063897,14737000006066765,14737000006063925,14737000006063931,14737000006063941,14737000006077041,14737000006079057],"z2950240":[14737000006065871,14737000006065887,14737000006065889,14737000006065891,14737000006065893,14737000006068107,14737000006068111,14737000006068219,14737000006068281,14737000006063927,14737000006063933,14737000006063935,14737000006063937,14737000006063939,14737000006077043,14737000006077053,14737000006080037]}
Statistics
- 39 Replies
- 4794 Views
- 1 Followers