Simplemenu

for Reveal.js

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

  • Allows for static header and footer bars on every slide that can also be exported to PDF
  • Make menu items of your vertical stacks (top-level sections).
  • Moving to another vertical stack (by whatever navigation) will automatically update the current menu item.
  • Clicking an item in the menu will open the first section in the corresponding vertical stack.
  • Simplemenu can auto-generate the menu, using section names. See the option 'auto' in options

It's easy to set up, but expects a few things:

  • Menu items can only be top-level sections: regular horizontal slides or vertical stacks.
  • There has to be an element that will hold the links. By default this selector is the class `menu`. The selector can be changed in the Simplemenu options.
  • Inside this main menu, there have to be anchors with an href. These need to point to an ID of a top-level section. Reveal uses links with hashes to navigate, so the link has to be written like that: href="#/firstchapter".

JavaScript

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>

HTML Markup

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>

That's it!

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.

Options

  1. menubarclass
  2. menuclass
  3. activeclass
  4. activeelement
  5. selectby
  6. auto

Option 1: menubarclass

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.

Option 2: menuclass

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).

Option 3: activeclass

The activeclass option is the class an active menuitem gets.

Reveal.initialize({
	//...
	Simplemenu: {
		activeclass: 'active'
	},
	plugins: [ Simplemenu ]

Option 4: activeelement

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'.

Option 5: selectby

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?")>

Option 6: auto

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.

Option demos