Simplemenu

for Reveal.js

Manual menu, linking to data-name

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 data-name.

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 menu, there have to be anchors. The href will be ignored, so it can stay empty: <a href="#">.
  • The textcontent of each link has to be the same as the data-name of each linked section. This text-content is used to create a data-attribute for each link which is then used for matching. This way, any changes to the text of the link (for example, when it is translated) have no effect on the linking.

JavaScript

Load the Simplemenu script and make a reference to it in the Reveal plugin options. Add the selectby option and set it to data-name.


<script src="plugin/simplemenu/simplemenu.js"></script>
<script>
    Reveal.initialize({
        simplemenu: {
            selectby: "data-name"
        }
        plugins: [ Simplemenu ]
    });
<script>

HTML Markup

Make sure that the text content of your links is the same as the data-name attribute of your sections. In the example below it is literally "Put some text here".

<div class="menubar">
    <ul class="menu">
        <li>
            <a href="#">Put some text here</a>
        </li>
    </ul>
</div>
<div class="slides">
    <section data-name="Put some text here">
        //...
    </section>
        //...
</div>

That’s it!