-
Posts
-
Hi,
on my website I use a sticky full width sub menu on which I styled the links.
The background is darker blue, each link has a lighter blue background with rounded corners. During mouse-over the background-color changes to the color of the section that the link is heading to.
To get an effect that looks like a little transparent window in the sub menue, I want the link’s background to pick up the hover color and keep it until the section is reached – and until another link is clicked. (as you have it, when you use an iPad for example)I thought I could do that in the quick css-box using the pseudo element :visited.
The hover-effect is working, but not the :visited-effect.This is, what I wrote:
#mg_navikiste_hallo {
background: #4C5B8C; color: white; padding-left: 15px; padding-right: 15px; padding-top: 7px; padding-bottom: 7px; border-radius: 12px; font-size: 18px;}
#mg_navikiste_hallo:visited {background: #7682A9;}
#mg_navikiste_hallo:hover {background: #7682A9;}Can you give me a hint what I did wrong?
Best regards
GrobiHi,
The easiest solution for you is to use the classes that are added to the menu by the “Page Scroll To” plugin, since you are already using it.
So, you have a choice, you can use the “mPS2id-clicked” class for items clicked, but this will follow the user around changing the color on the items just because they clicked it, not because they are there. Or you can use the “mPS2id-highlight” class that will only change the color if the user is there, no matter if they clicked it or not.
I recommend the latter because it will make sense to the user, but it’s up to you.
the css for clicking the first menu item is:a.mPS2id-clicked span#mg_navikiste_hallo { background: #7682A9 !important; }the css for hovering that item is:
a span#mg_navikiste_hallo:hover {background: #7682A9 !important; }the css for the “highlight” class, meaning that you are there:
a.mPS2id-highlight span#mg_navikiste_hallo {background: #7682A9 !important; }Note there are some settings for the plugin, such as *”highlight only one item at a time” & *”keep item highlighted until next item” that you may want to use. (*this is from memory, not the exact text)
Best regards,
MikeWow, Mike, cool!
It works and yor are right, the highlight-one is the better one!
Thank you very much!
Kind regards!
GrobiHi,
I think I sorted out the “Jump-to-Nirvana” problem on Mac in the other thread, please check there.Best regards,
MikeHi Mike,
I already saw it – thanks a lot for this big job!Mike, after solving this link-highlight-thing above: what would you have proposed to me, if I did not already had used the “scroll to id”-plugin?
Was my way to try over “:visited” in principle right? Or was I already on the wrong track? Could I have solved this via CSS? Or does there have to be “php-support” in the background?In any case, thanks again for your help!
Kind regards
GrobiHi,
The “:visited” would have remembered that setting until the cache was cleared, so changing the color for the next section would have been hard because there is no way to undo it.
If you were not using the plugin I would have suggested using the built-in classes for the menu colors with css, such as:
“current_page_item” & “current-menu-item”
I’m glad that it worked out, I assume we can close this now, but I like to ask. Shall we close this then?Best regards,
MikeHello Mike, yes, of course you can close this thread.
Thanks again for your effort – also regarding the other “Jump-to-nirvana” -thread.
I am afraid for you that we will meet again soon in this forum – namely, if I will have a question again … ;-)Kind regards
GrobiHi Grobi,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
Victoria
- The topic ‘full width sub menue styling with :visited’ is closed to new replies.