Simplemenu

for Reveal.js

What?

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 data-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.
  • When not using the auto option, you need to do some more work: 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

Testing123

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 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 assume that the sections have data-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