reveal.js-menu
A slideout menu plugin for Reveal.js to quickly jump to any slide by title. Also optionally change the theme and set the default transition. Check out the live demo
Installation
Bower
Download and install the package in your project:
bower install reveal.js-menu
Add the plugin to your presentation, as below.
<script src="bower_components/reveal.js-menu/menu.js"></script><script> Reveal;</script>
npm
Download and install the package in your project:
npm install --save reveal.js-menu
Add the plugin to your presentation, as below.
<script src="node_modules/reveal.js-menu/menu.js"></script><script> Reveal;</script>
Manual
Copy this repository into the plugins folder of your reveal.js presentation, ie plugins/menu
.
Add the plugin to the dependencies in your presentation, as below.
<script src="plugin/menu/menu.js"></script><script> Reveal;</script>
Configuration
You can configure the menu for your presentation by providing a menu
option in the reveal.js initialization options. Note that all config values are optional and will default as specified below.
Reveal;
Themes Stylesheet
If you are using the themes panel you need to ensure the theme stylesheet in the presentation uses the id="theme"
attribute. For example...
If your themes configuration includes code highlight themes you need to ensure the highlights theme stylesheet in the presentation uses the id="highlight-theme"
attribute. For example...
Slide Titles
The slide titles used in the menu can be supplied explicitly or are taken directly from the presentation, using the following rules...
data-menu-title
attribute.
1. The section's If the slide's section element contains a data-menu-title
attribute this will be used for the slide title in the menu. For example...
Title ...
menu-title
.
2. Any element with the class If the slide's section contains an element with the class menu-title
then the element's text will be used for the title. The first such element found will be used if there are more than one. Note the element need not be displayed to be used. For example...
Title Custom Menu Title ...
3. The first heading found or a custom element selector
The titleSelector
option can be used to customise the elements that will be used to generate the slide titles in the menu. The default option selects the first heading element found in the slide. For example...
This will be the slide title in the menu Title ...
Any valid CSS selector should work but note the selector will only be applied to elements contained within the slide section. You could use the 'h1'
selector to only use level 1 headings or 'p'
to use the first paragraph element. For example, titleSelector: 'p.lead'
would be used like this...
Title This will be the slide title in the menu ...
Using titleSelector: ''
will ignore all elements and no title will be provided, unless the slide section contains a data-menu-title
attribute or an element with the menu-title
class.
4. No title is provided
If no title can be found using the above methods, a default title incorporating the slide number will be used. For example, the following would result in a slide title in the format of 'Slide 12'...
...
If the hideMissingTitles
option is set to true
, however, the slide will not be listed in the menu.
Custom Menu Panels
Additional custom panels can be added the menu using the custom
option.
Reveal;
title
and icon
are used for the toolbar buttons at the top of the menu. There are two approaches you can use to provide content for the panels...
- You can provide a URL in
src
to load html from another file. - Alternatively, you can provide html in
content
and this will be added to the custom panel.
Custom slide menu items
You can provide menu items in your custom panels using the following format. This allows you to define your own navigation links for your presentation.
Links Transitions Code highlighting
You are not limited to linking to presentation slides. You can provide any link you wish.
External Links Reveal.js-menu Reveal.js
Using menu items enables keyboard navigation of your links as with the other panels. However, you don't have to use menu items for your links. You can simply provide standard links and unordered lists in your html. Notice you can provide your custom menu items mixed with other html if you wish.
Ready Event
A 'menu-ready' event is fired when reveal.js-menu has loaded all non-async dependencies and is ready to start navigating.
Reveal;
API
The RevealMenu
object exposes a JavaScript API for controlling the menu:
Function | Description |
---|---|
toggle(event) | Toggles the open state of the menu, ie open if it is closed, and close if it is open |
openMenu(event) | Opens the menu |
closeMenu(event, force) | Closes the menu. To force the menu to close (ie when sticky option is true ) call closeMenu(null, true) |
openPanel(event, ref) | Opens the menu to a specific panel, passing the name of the panel or the panel element itself |
isOpen() | Returns true if the menu is open |
initialiseMenu() | Initialises the menu if it has not already been initialised. Used in conjunction with the delayInit option |
isMenuInitialised() | Returns true if the menu has been initialised |
Compatibility
reveal.js-menu v2.0 is built for reveal.js v4. It will not work with reveal.js v3. If you require a menu for reveal.js v3 you will need to install reveal.js-menu v1.2.0.
v2.0 also introduces API changes that are not backwards compatible. init()
has been renamed to initMenu()
to deconflict with the reveal.js v4 plugin API. isInit()
has also been changed to isMenuInitialised()
.
License
MIT licensed
Copyright (C) 2020 Greg Denehy