Simplemenu

for Reveal.js

Flat navigation

Why?

Sometimes viewers don’t understand the whole concept of vertical navigation for nested slides.

A solution would be to limit your presentation to horizontal slides only, but you might still want to use ‘chapters’.

Simplemenu has a solution for that. Make your presentation in a flat structure (no nested sections) and turn the flat option to true. Then, if a data-name is set for a slide, any following slides will keep that menu name.

Of course, you can set it to stop inheriting the name as well.

Set it up

Set the flat option to true:

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

HTML Markup

Build your presentation in a flat way (no nested slides).
Then give your sections a data-name:

<div class="slides">
    <section data-name="Chapter 1">
        //...
    </section>
    <section>
        //... The 'Chapter 1' menu-item will be active for this slide
    </section>
    <section>
        //... The 'Chapter 1' menu-item will be active for this slide
    </section>
</div>

Any slides following a slide with a data-name will keep that menu name.

To stop inheriting the previous slide menu name, start a new named section, or add data-sm="false" to your slide.

<div class="slides">
    <section data-name="Chapter 1">
        //...
    </section>
    <section>
        //... The 'Chapter 1' menu-item will be active for this slide
    </section>
    <section data-sm="false">
        //... No menu-item will be active for this slide
    </section>
</div>

That’s it!