impress.js Navigation with active class
- by ArtGoddess
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!
