Simplemenu

for Reveal.js

Table of contents

(TOC generated by Simplemenu)

    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

    • Generates a menu of your sections and stacks
    • Puts the menu in a header or footer if provided
    • And/or on any slide as an agenda or TOC
    • Use the menu to navigate
    • Update the menu state during navigation

    Menu items can only be regular horizontal slides or vertical stacks.

    It's easy to set up

    JavaScript

    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

    (Markdown is also supported, see the Markdown demo.)
    Give your sections a data-name:

    <div class="slides">
    <section>
        //...
    </section>
    <section data-name="What it does">
        //...
    </section>
    <section data-name="Set it up">
        //...
    </section>
    //...
</div>

    Add data-sm="false" to named sections you don’t want to show in the menu.

    HTML Markup

    Add a menubar (header and/or footer), with an empty menu, through the options:

    …
Reveal.initialize({
    simplemenu: {
        barhtml: {
            header: "<div class='menubar'><ul class='menu'></ul></div>",
            footer: ""
        }
    },
    plugins: [ Simplemenu ]

    HTML Markup

    … or manually:

    <div class="menubar">
    <ul class="menu"></ul> 
</div>
<div class="slides">
    <section>
        //...
    </section>
    //...
</div>

    HTML Markup

    You can also add a TOC slide:

    <div class="slides">
    <section>
        <h1>My presentation</h1>
    </section>
    <section>
        <h2>Agenda</h2>
        <ul class="menu"></ul> 
    </section>
    <section data-name="What it does">
        //...
    </section>
    <section data-name="Set it up">
        //...
    </section>
    //...
</div>

    That’s it!

    The setup above is the default (auto) way of linking the menu with the sections.

    There is also a manual way, where the author creates the links in the menu(s) manually. See demo-manual.html.

    Options

    1. menubarclass
    2. menuclass
    3. activeclass
    4. activeelement
    5. selectby
    6. barhtml
    7. flat
    8. scale
    9. csspath

    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

    This option is only needed when adding a menu manually. You then need to link sections to the menu items. The selectby option finds the active slide or stack.

    Reveal.initialize({
	//...
	simplemenu: {
	    selectby: "id"
	},
	plugins: [ Simplemenu ]

    By default it is 'id', but can also be set to 'data-name'. If set to data-name, Simplemenu will compare the text content of the link to the section. Then <a(href="#")>What it does</a> will link to <section(data-name="What it does")></section>.

    Option 6: barhtml

    Instead of editing your HTML template, you can let Simplemenu add a header- or footerbar. You can include any HTML in it, like an empty menu (that will be automatically filled with links by Simplemenu), or a logo.

    Reveal.initialize({
	//...
	simplemenu: {
	    barhtml: { 
	        header: "<div class='menubar'><ul class='menu'></ul></div>",
	        footer: ""
	    }
	},
	plugins: [ Simplemenu ]

    Option 6: barhtml (continued)

    You can also move the slide number or the controls to your header or footer. If they are nested there manually, or through the barhtml option, they will then display inside that header or footer.

    Reveal.initialize({
	//...
	simplemenu: {
	    barhtml: { 
	        header: "",
	        footer: "<div class='menubar'><ul class='menu'></ul><div class='slide-number'></div></div>"
	    }
	},
	plugins: [ Simplemenu ]

    Option 7: flat

    Sometimes you’ll want to limit your presentation to horizontal slides only. To still use ‘chapters’ with several slides, you can use the flat option. By default, it is set to false, but you can set it to true. Then, when a data-name is set for a slide, any following slides will keep that menu name. See Flat navigation.

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

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

    Option 8: scale

    When you have a lot of subjects/chapters in your menubar, they might not all fit in a row. You can then tweak the scale in the options. Simplemenu copies the Reveal.js (slide) scaling and adds a scale option on top of that.

    Reveal.initialize({
	//...
	simplemenu: {
	    scale: 0.67
	},
	plugins: [ Simplemenu ]

    It is set to be two-thirds of the main scaling.

    Option 9: csspath

    Simplemenu will automatically load some styling for the menubar and the links.
    It is likely that you will want to change it. You can link to your own CSS file with the csspath option.

    Reveal.initialize({
	//...
	simplemenu: {
	    csspath: "mycustomstyle.css"
	},
	plugins: [ Simplemenu ]

    You can also set csspath: false if you define the styling of your menu through some other CSS file that is already loaded.

    Option demos