I would like to use impress.js in order to make a website, with a navigation bar.

In each slide, the corresponding anchor or div must have an "active" class, in order to achieve a different link appearance.

I have followed all instructions provided here:

https://github.com/Ralt/impress.js/commit/f88feb8cae704ce27bd2168bdb77768f516ac2da#L2R605

but the "active" class on the correct menu must be added.

This is the code that generates the menu items. How can I add for example the "active" class in the first link?

/* ************************ MENU ***************************** */
        // Capitalize first letter of string
        // @see http://stackoverflow.com/a/1026087/851498
        var capitalize = function( str ) {  
            return str.charAt(0).toUpperCase() + str.slice(1);
        }

        // `showMenu` API function creates the menu
        // It defines the names of each entry by the id capitalized.

        var showMenu = function() {

            // Create the menu wrapper and the element that will be cloned
            // for each entry.

            var menu = document.createElement('div'),
                el = document.createElement('div');

            // Apply some classes
            menu.className = 'menu';
            el.className = 'menu-item';

            // Create an element that will be the "button" and append it
            // to the menu
            var button = document.createElement('div'); 
            button.className = 'menu-button';   
            button.textContent = 'Menu';
            menu.appendChild(button);

            // Now, for each div in #impress, add an entry to the menu
            [].forEach.call(byId('impress').firstElementChild.children,

                    function( child, index ) {
                var newEl = el.cloneNode(), 
                    i = index + 1,
                    text = i + '. ' + capitalize(child.id);

                // Set the text of the new element
                newEl.textContent = text;

                // Add an onclick event to the new element
                // We need to use a closure to make sure the index is correct   
                (function( index ) {
                    newEl.addEventListener('click', function() {
                        goto(index);
                    });

                }( index ));

                // And append the new element to the menu
                menu.appendChild(newEl);
            });

            // And append the menu to #impress  
            document.body.appendChild(menu);
        };

Then, in each click it must be removed the active class on the current, and add it to the clicked element.

// Remove the active class from the current active
document.querySelector( '.active' )[ 0 ].classList.remove( 'active' );

// And add it to the clicked index
byId('impress').firstElementChild.children[ index ].classList.add( 'active' );

Where do I have to apply this code?

Thank you!