4

I'm having a problem with the menu I just coded: https://jsfiddle.net/nL124rLq/1/

I am using a general selector (~) on my css and I think this might be a mistake, because it might be the origin of my problem:

#nav #link1:hover ~ #flydown {
left:0;
display:block;
}

#nav #link2:hover ~ #flydown {
    left:-100%;
    display:block;
}

... and so on.

As you can see, everything works fine but when I stop hovering on the anchors, the sliding menu under the links disappears. I understand my code is not made for this to work correctly, but I can't figure out a way of making it work.

I am going to add content (sub-menus) to the coloured areas that form the slider, so they must be clickable and must remain visible when the user hovers over them.

If it's any help, I got the idea from this site: http://www.tiffany.es/

Thank you guys very much in advance and excuse the relatively vague question!

fnune
  • 5,256
  • 1
  • 21
  • 35
  • 2
    I asked a similar question last year. Maybe it will help you. [Hover over thumbnail image to launch new image; new image persists after hovering ends](http://stackoverflow.com/questions/24836640/hover-over-thumbnail-image-to-launch-new-image-new-image-persists-after-hoverin) – Michael Benjamin Sep 18 '15 at 00:40
  • It does seem like that would work. I am convinced that it should work with CSS only though, and that my problem stems from the structure I'm using on my HTML elements. If all else fails, I will surely use your solution. Thank you! – fnune Sep 18 '15 at 00:50
  • You could maybe trigger a forward CSS animation on hover and then overwrite display from there? Similar to what is discussed here. http://stackoverflow.com/questions/3273478/webkit-css-animation-issue-persisting-the-end-state-of-the-animation – Zze Sep 18 '15 at 05:50
  • Have you found your answer, I have a very similar problem. – Fernando Souza Sep 18 '15 at 07:08
  • 1
    Yes, it was with the help of @Michael_B I'm posting it now as an answer. – fnune Sep 18 '15 at 07:11

1 Answers1

1

Okay, so I found the solution, more or less. @Michael_B 's help was awesome! The resulting code looks horrible though. Oh well, it works!

Basically I added this to every single link that I have on the nav (link1, link2... etc.):

$("#link1").on("mouseover", function () {
$(".flydown").addClass('permahover1');
});

$(".flydown").mouseleave(function () {
$(".flydown").removeClass('permahover1');
});

...and added the following CSS once for every element in my menu (permahover1, permahover2 etc.) to specify their different positions with left:0%, left:-100%, etc:

.flydown.permahover1 {
left:0%;
display:block;
}

It got really dirty in no time. But I don't know a better solution. Here's a working JSFiddle:

https://jsfiddle.net/nL124rLq/4/

As always, thank you guys very much for your help!

fnune
  • 5,256
  • 1
  • 21
  • 35