In Powerpoint you can make slides with a nice bottom- or top bar in which the active menu item is highlighted. This menu works in the same way, but automatically.
What Simplemenu does
It's easy to set up, but expects a few things:
href="#/firstchapter"
.Load the script and make a reference to it in the Reveal plugin options.
<script src="plugin/simplemenu/simplemenu.js"></script>
<script>
Reveal.initialize({
plugins: [ Simplemenu ]
});
<script>
Make anchors in your links to the ID's of your sections. Use the #/anchor
notation that Reveal uses.
<div class="menubar">
<ul class="menu">
<li>
<a href="#/firstmenuitem">First menu item</a>
</li>
</ul>
</div>
<div class="slides">
<section id="firstmenuitem">
//...
</section>
//...
</div>
The setup above is the default way of linking the menu with the sections. But you can simplify it a lot by using named sections in combination with an auto-generated menu. See the options.
The menubarclass option sets the classname of menubars.
Reveal.initialize({
//...
Simplemenu: {
menubarclass: 'menubar'
},
plugins: [ Simplemenu ]
Simplemenu will show the menubar(s) on all pages. If you do not want to show the menubar on certain pages, use data-state="hide-menubar"
on that section. This behaviour also works when exporting to PDF using the Reveal.js ?print-pdf
option.
The menuclass option sets the classname of the menu.
Reveal.initialize({
//...
Simplemenu: {
menuclass: 'menu'
},
plugins: [ Simplemenu ]
Simplemenu looks inside this menu for list items (LI's).
The activeclass option is the class an active menuitem gets.
Reveal.initialize({
//...
Simplemenu: {
activeclass: 'active'
},
plugins: [ Simplemenu ]
The activeelement option sets the item that gets the active class.
Reveal.initialize({
//...
Simplemenu: {
activeelement: 'li'
},
plugins: [ Simplemenu ]
You may want to change it to the anchor inside the li: activeelement: 'a'.
The selectby option finds the currently active vertical stack by this.
Reveal.initialize({
//...
Simplemenu: {
selectby: 'id'
// or 'name'
},
plugins: [ Simplemenu ]
By default it is 'id', but can also be set to 'name'. If set by name, Simplemenu will compare the text content of the link to the section. Then <a(href="#")>What does it do?</a>
will link to <section(name="What does it do?")>
If set to true, the auto option will auto-generate a menu.
Reveal.initialize({
//...
Simplemenu: {
auto: 'true'
},
plugins: [ Simplemenu ]
This will override any selectby
option to 'name'. Make sure your sections have names.
Then you will only need to supply an empty OL or UL with class 'menu' (or something else if set through the menuclass
option). Simplemenu will generate the menu-items from the names of the sections.