Active menu item class

[nathansh]

As a feature request, it'd be really great if an active class was added to the current menu item. In order to use this I'll need to figure out a way of adding that as the designs I work with always have an active state.

[Prinzhorn]

This is requested as part of #6

I agree that it would be very helpful.

[claudchan]

Hi,
Is this feature implement yet?

[Prinzhorn]

No it hasn't.

[julienrondeau]

is it now possible to have an highlight on the active menu item? or is it still on request?

if not do you know a way to do it with skrollr menu? adding another plugin?
thanks

[er-tho]

Hello, I'm designing my new professional website and try to use skrollr.
To "activate" a menu item here is what i did :
To be simple, I will say my item menu is a link to a section like this : <a href="#section"></a>
To add my active state I simply use the native skrollr behaviour like this :

data-anchor-target="#section" data-bottom-top="@class:inactive" data-50-top="@class:active" data-50-top-bottom="@class:inactive"

In this example, we spy the section. Unless it reach the top of the viewport, the state is inactive. When the section reach the top of the viewport (data-top or here data-50-top because my menu is fixed and 50px height), we set an active class. And to finish, when the bottom of the section reach the top of viewport, we set the inactive state (data-top-bottom or here again with a 50px offset)

Hope it answers your questions and it will helps you guys !

PS : sorry if my english isn't perfect ^^

[mirko-dugic]

@nomadOnWeb ok, but where you add this "data-anchor-target (...)) to menu items? Could you provide complete example?

[er-tho]

@michal-jomsocial Sorry for this late answer. Hope it will help others (because i hope you found the solution since feb. ;))
So to be simple let's say we have this for the menu :

 < div>< a href="#section1">Got to section 1< /a>
< a href="#section2">Got to section 2< /a>< /div>

Simply add my code line like this :

< div>< a href="#section1" data-anchor-target="#section1" data-bottom-top="@class:inactive" data-50-top="@class:active" data-50-top-bottom="@class:inactive">Got to section 1< /a>
< a href="#section2" data-anchor-target="#section2" data-bottom-top="@class:inactive" data-50-top="@class:active" data-50-top-bottom="@class:inactive">Got to section 2< /a>< /div>

so data-anchor-target to specify wich section we want.
data-50 it's just because i have a static menu 50px height.
So when the desired section reach the top of the screen, an "active" class is added. when we scroll down and the bottom of the section reach the top of the screen, we switch on the "inactive" class.

And so we can style this in css :
.inactive {
color: white; }
.active {
color:red; }

Here it is, hope it will help :)