Simplemenu

for Reveal.js

Option auto: true

What it does

Simplemenu can simplify HTML editing by letting authors just set a name to the sections, and autogenerate a menu from that.

JavaScript

Set the auto-option to true.

…
Reveal.initialize({
	simplemenu: {
		auto: true
	},
	plugins: [ Simplemenu ]

Optionally, choose data-name instead of name.

…
Reveal.initialize({
	simplemenu: {
		auto: true,
		selectby: 'data-name'
	},
	plugins: [ Simplemenu ]

HTML Markup

Give your sections a name, and add an empty menu.

<div class="menubar">
    <ul class="menu"></ul>
</div>
<div class="slides">
    <section name="Start">
        //...
    </section>
    <section name="What it does">
        //...
    </section>
    <section name="Setup">
        //...
    </section>
</div>

When having set the 'select-by' option to data-name, you should also use that in the markup. 

<div class="menubar">
    <ul class="menu"></ul>
</div>
<div class="slides">
    <section data-name="Start">
        //...
    </section>
    <section data-name="What it does">
        //...
    </section>
    <section data-name="Setup">
        //...
    </section>
</div>

That's it!