Simplemenu

for Reveal.js

Manual menu, linking to id

Why?

Sometimes manually linking the menu is needed. Simplemenu can do that too.

Manually linking can be done through id and data-name.
These slides explain the use of id.

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.
  • Create an element that will hold the links.
  • Inside this main menu, there have to be anchors with an href.
  • These need to point to an ID of a top-level section.

JavaScript

Load the Simplemenu 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!