Create menu with active class on deeplinking

johannes's Avatar

johannes

28 Oct, 2012 12:28 PM

Hi!

With help from my friend Mikkel W. Fredriksen, I have created my own menu that has an "Active Class", on the active menu list item.

I have a menu that looks like this in HTML5:

<nav>
    <ul>
        <li><a href="#page-1">Page 1</a></li>
        <li><a href="#page-2">Page 2</a></li>
        <li><a href="#page-3">Page 3</a></li>
        <li><a href="#page-4">Page 4</a></li>
        <li><a href="#page-5">Page 5</a></li>
        <li><a href="#page-6">Page 6</a></li>
    </ul>
</nav>

I then add the deeplinking functionality to the Royal Slider, with a 'page-' prefix:

deeplinking: {
    enabled: true,
    change: true,
    prefix: 'page-'
},

Within the "jQuery(document).ready(function($) {", I include this little script:

var slider = $('#content-slider').data('royalSlider'),
    controls = $('nav ul li'),
    setActiveMenuItem = function(){
        controls.removeClass('active').eq(slider.currSlideId).addClass('active');               
    };

    slider.ev.on('rsBeforeAnimStart', setActiveMenuItem);
    setActiveMenuItem();

Good luck :-)

  1. Support Staff 1 Posted by Dmitry Semenov on 28 Oct, 2012 08:58 PM

    Dmitry Semenov's Avatar

    Hi,

    Thank you very much for sharing, hope it'll be useful for someone. I optimized your JS part a little, if you dont mind.

    Dmitry

  2. 2 Posted by johannes on 28 Oct, 2012 09:44 PM

    johannes's Avatar

    Hi Dmitry!

    Looks great - thanks :-)

  3. Dmitry Semenov closed this discussion on 29 Oct, 2012 05:48 AM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac