{"id":13577404,"url":"https://github.com/Martinomagnifico/reveal.js-simplemenu","last_synced_at":"2025-04-05T11:32:47.770Z","repository":{"id":133498989,"uuid":"177117150","full_name":"Martinomagnifico/reveal.js-simplemenu","owner":"Martinomagnifico","description":"A simple Reveal.js plugin for a menubar or a header or footer with an auto-generated menu.","archived":false,"fork":false,"pushed_at":"2023-10-25T07:01:03.000Z","size":651,"stargazers_count":45,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-28T14:31:49.818Z","etag":null,"topics":["javascript","menu","menubar","navigation","reveal-js-plugin","revealjs"],"latest_commit_sha":null,"homepage":"https://martinomagnifico.github.io/reveal.js-simplemenu/demo.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Martinomagnifico.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2019-03-22T10:06:09.000Z","updated_at":"2024-10-20T00:59:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"ed843172-7e0f-4b9a-a1da-3822f3e6d565","html_url":"https://github.com/Martinomagnifico/reveal.js-simplemenu","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Martinomagnifico%2Freveal.js-simplemenu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Martinomagnifico%2Freveal.js-simplemenu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Martinomagnifico%2Freveal.js-simplemenu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Martinomagnifico%2Freveal.js-simplemenu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Martinomagnifico","download_url":"https://codeload.github.com/Martinomagnifico/reveal.js-simplemenu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223186622,"owners_count":17102498,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","menu","menubar","navigation","reveal-js-plugin","revealjs"],"created_at":"2024-08-01T15:01:21.142Z","updated_at":"2024-11-05T14:31:06.878Z","avatar_url":"https://github.com/Martinomagnifico.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Simplemenu\n\n[![Version](https://img.shields.io/npm/v/reveal.js-simplemenu)](#) [![Downloads](https://img.shields.io/npm/dt/reveal.js-simplemenu)](https://github.com/Martinomagnifico/reveal.js-simplemenu/archive/refs/heads/master.zip)\n\nA simple menu for [Reveal.js](https://revealjs.com)\n\n[![Screenshot](https://martinomagnifico.github.io/reveal.js-simplemenu/screenshot.png)](https://martinomagnifico.github.io/reveal.js-simplemenu/demo.html)\n\nIn 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. Simplemenu now also supports the Markdown syntax. Combined with the `barhtml` option, you don't have to edit the template in HTML at all.\n\n-   [Demo with bar on top](https://martinomagnifico.github.io/reveal.js-simplemenu/demo.html)\n-   [Demo with bar on bottom](https://martinomagnifico.github.io/reveal.js-simplemenu/demo-bottom.html)\n-   [Demo with Markdown](https://martinomagnifico.github.io/reveal.js-simplemenu/demo-markdown.html)\n-   [Demo, custom styling, including a logo](https://martinomagnifico.github.io/reveal.js-simplemenu/demo-custom.html)\n-   [Demo, flat chapter navigation](https://martinomagnifico.github.io/reveal.js-simplemenu/demo-flat.html)\n-   [Demo, manual setup, select by id](https://martinomagnifico.github.io/reveal.js-simplemenu/demo-manual-id.html)\n-   [Demo, manual setup, select by data-name](https://martinomagnifico.github.io/reveal.js-simplemenu/demo-manual-dataname.html)\n\n### What it does\n\n-   Make menu items of your vertical stacks (top-level sections).\n-   Moving to another vertical stack (by whatever navigation) will automatically update the current menu item.\n-   Clicking an item in the menu will open the first section in the corresponding vertical stack.\n-   Note: Menu items can only be top-level sections: regular horizontal slides or vertical stacks.\n\n#### Auto mode\n\nThere is no longer an `auto-mode` that needs to be set in the options. Simplemenu can generate the menu, using sections with an attribute of `data-name`. If you add a menubar (manually or through the `barhtml` option) and an empty menu, Simplemenu will automatically populate it for you. You can also add such a menu anywhere else in the presentation, to serve as a Table Of Contents or an Agenda.\n\n#### Manual mode\n\nHowever, if you add a menu (in either a menubar or a standalone TOC menu), and manually add links to your sections to it, Simplemenu goes into 'manual' mode, and you have to take some things into account:\n\n-   There has to be an element that will hold the links. By default this selector is the class `menu`. The selector can be changed in the Simplemenu options.\n-   Inside this main menu, there have to be anchors with an href. These need to point to an ID of a top-level section. Reveal uses links with hashes to navigate, so the link has to be written like that: `href=\"#/firstchapter\"`.\n\n### Presentation structure\n\n![Setup](img/simplemenusetup.png)\n\nSimplemenu uses top-level slides for the menu item names. Nested slides in vertical stacks will then also use the name of the whole stack. This way you get chapters through which the user can navigate.\n\nHowever, 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 [Using the flat option](#using-the-flat-option) below.\n\n## Installation\n\n### Regular installation\n\nCopy the simplemenu folder to the plugins folder of the reveal.js folder, like this: `plugin/simplemenu`.\n\n### npm installation\n\nThis plugin is published to, and can be installed from, npm.\n\n``` console\nnpm install reveal.js-simplemenu\n```\n\nThe Simplemenu plugin folder can then be referenced from `node_modules/reveal.js-simplemenu/plugin/simplemenu`\n\n## Setup\n\n### JavaScript\n\nSimplemenu works in setups with multiple Reveal instances.\n\nThere are two JavaScript files for Simplemenu, a regular one, `simplemenu.js`, and a module one, `simplemenu.esm.js`. You only need one of them:\n\n#### Regular\n\nIf you're not using ES modules, for example, to be able to run your presentation from the filesystem, you can add it like this:\n\n``` html\n\u003cscript type=\"text/javascript\" src=\"dist/reveal.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"plugin/simplemenu/simplemenu.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    Reveal.initialize({\n        // ...\n        plugins: [ Simplemenu ]\n    });\n\u003c/script\u003e\n```\n\n#### As a module\n\nIf you're using ES modules, you can add it like this:\n\n``` html\n\u003cscript type=\"module\"\u003e\n    // This will need a server\n    import Reveal from './dist/reveal.esm.js';\n    import Simplemenu from './plugin/simplemenu/simplemenu.js';\n    Reveal.initialize({\n        // ...\n        plugins: [ Simplemenu ]\n    });\n\u003c/script\u003e\n```\n\n### Styling\n\nThe styling of Simplemenu is automatically inserted from the included CSS styles, either loaded through NPM or from the plugin folder.\n\nIf you want to change the Simplemenu style, you can simply make your own style and use that stylesheet instead. Linking to your custom style can be managed through the `csspath` option of Simplemenu. See [Custom styling](https://martinomagnifico.github.io/reveal.js-simplemenu/demo-custom.html) for an example.\n\n### HTML\n\nIt is easy to set up your HTML structure for Simplemenu. To keep the Simplemenu on every slide, put it outside of the `.slides`. Simplemenu can automatically do this for you if you use the `barhtml` option, so that you do not need to edit the template.\n\n#### The auto way\n\nStart by giving `data-name`s to your sections:\n\n``` html\n\u003cdiv class=\"slides\"\u003e\n    \u003csection data-name=\"Menu item one\"\u003e\n        //...\n    \u003c/section\u003e\n    \u003csection data-name=\"Menu item two\"\u003e\n        //...\n    \u003c/section\u003e\n    \u003csection data-name=\"Menu item three\"\u003e\n        //...\n    \u003c/section\u003e\n\u003c/div\u003e\n```\n\nNow add a menubar with an empty menu. You can do this through the options like this (yes, even when you use Markdown, you have to write a small piece of HTML here):\n\n``` javascript\nReveal.initialize({\n    // ...\n    simplemenu: {\n        // ...\n        barhtml: {\n            header: \"\u003cdiv class='menubar'\u003e\u003cul class='menu'\u003e\u003c/ul\u003e\u003cdiv\u003e\",\n            footer: \"\"\n        }\n    },\n    plugins: [ Simplemenu ]\n});\n```\n\n...or manually in your markup like this:\n\n``` html\n\u003cdiv class=\"menubar\"\u003e\n    \u003cul class=\"menu\"\u003e\u003c/ul\u003e \u003c!-- Keep this empty --\u003e\n\u003c/div\u003e\n\u003cdiv class=\"slides\"\u003e\n    \u003csection data-name=\"Menu item one\"\u003e\n        //...\n    \u003c/section\u003e\n    \u003csection data-name=\"Menu item two\"\u003e\n        //...\n    \u003c/section\u003e\n    \u003csection data-name=\"Menu item three\"\u003e\n        //...\n    \u003c/section\u003e\n\u003c/div\u003e\n```\n\n#### The manual way\n\n``` html\n\u003cdiv class=\"menubar\"\u003e\n    \u003cul class=\"menu\"\u003e\n        \u003c!-- Here's the menu --\u003e\n        \u003cli\u003e\u003ca href=\"#/firstchapter\"\u003eFirst chapter\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#/secondchapter\"\u003eSecond chapter\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#/thirdchapter\"\u003eThird chapter\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n\u003c/div\u003e\n\u003cdiv class=\"slides\"\u003e\n    ...\n\u003c/div\u003e\n```\n\nThe top-level sections (that should be in the menu) need to have an ID:\n\n``` html\n\u003cdiv class=\"slides\"\u003e\n    \u003csection id=\"firstchapter\" name=\"First chapter\"\u003e\n        \u003csection\u003e\n            \u003ch2\u003eThis is 1\u003c/h2\u003e\n        \u003c/section\u003e\n        \u003csection\u003e\n            \u003ch4\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit.\u003c/h4\u003e\n        \u003c/section\u003e\n    \u003c/section\u003e\n    \u003csection id=\"secondchapter\" name=\"Second chapter\"\u003e\n        \u003ch2\u003eThis is 2, no child slides\u003c/h2\u003e\n    \u003c/section\u003e\n    \u003csection id=\"thirdchapter\" name=\"My third chapter\"\u003e\n        \u003csection\u003e\n            \u003ch2\u003eThis is 3\u003c/h2\u003e\n        \u003c/section\u003e\n        \u003csection\u003e\n            \u003ch4\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit.\u003c/h4\u003e\n        \u003c/section\u003e\n    \u003c/section\u003e\n\u003c/div\u003e\n```\n\nThis manual way can also use the `data-name` of the sections, which will then link if the link text is exactly the same as the data-name. Set the `selectby: \"data-name\"` option if you set it up like that.\n\n### Markdown\n\nSimplemenu also supports Markdown, but you need to consider how you add `data-name`s to your sections. Because of the way how Reveal generates vertical stacks, you can't directly add a `data-name` to those. The workaround is to add a `data-stack-name` to the first vertical slide in those stacks:\n\n``` md\n# Simplemenu\n### for Reveal.js\nUsing Markdown\n---\n### Table of Contents\n\u003cul class=\"menu\"\u003e\u003cul\u003e\n---\n\u003c!-- .slide: data-name=\"Regular slide\" --\u003e\n## Slide 1\nA paragraph with some text and a [link](http://hakim.se).\n---\n\u003c!-- .slide: data-stack-name=\"Vertical\" --\u003e\n## Vertical slide 1\n----\n## Vertical slide 2\n```\n\nThe above example is from an externally loaded Markdown file, with the vertical separator specifically set to `\\n----\\n`, but any setup will work.\n\nIf you use Quarto, the syntax of the Markdown is a little bit different:\n\n``` md\n## Table of Contents\n\u003cul class=\"menu\"\u003e\u003cul\u003e\n\n# Slide 1 {data-name=\"Regular slide\"}\nA paragraph with some text and a [link](http://hakim.se).\n\n# Vertical slide 1 {data-stack-name=\"Vertical\"}\n\n## Vertical slide 2\n```\n\n### Moving the slide number to a menubar\n\nIf you add a menubar manually or through the options, you can also move the slide number into it. If a div with the class `slide-number` is found within a menubar, it is removed from the root Reveal element, and used in that menubar. This functionality is similar to the [RelativeNumber](https://martinomagnifico.github.io/reveal.js-relativenumber/demo.html) plugin. You will need to adjust the CSS yourself, like making the elements relative instead of absolute.\n\n``` javascript\nReveal.initialize({\n    // ...\n    simplemenu: {\n        // ...\n        barhtml: {\n            header: \"\u003cdiv class='menubar'\u003e\u003cul class='menu'\u003e\u003c/ul\u003e\u003cdiv class='slide-number'\u003e\u003c/div\u003e\u003cdiv\u003e\",\n            footer: \"\"\n        }\n    },\n    plugins: [ Simplemenu ]\n});\n```\n\n### Using the flat option\n\nSometimes 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. Whenever a slide is encountered with `data-sm=\"false\"`, the inheritance will stop.\n\n``` html\n\u003cdiv class=\"menubar\"\u003e\n    \u003cul class=\"menu\"\u003e\u003c/ul\u003e \u003c!-- Keep this empty --\u003e\n\u003c/div\u003e\n\u003cdiv class=\"slides\"\u003e\n    \u003csection data-name=\"Chapter 1\"\u003e\n        //... (Chapter 1 will be active)\n    \u003c/section\u003e\n    \u003csection\u003e\n        //... (Chapter 1 will be active)\n    \u003c/section\u003e\n    \u003csection data-name=\"Chapter 2\"\u003e\n        //... (Chapter 2 will be active)\n    \u003c/section\u003e\n    \u003csection\u003e\n        //... (Chapter 2 will be active)\n    \u003c/section\u003e\n    \u003csection data-sm=\"false\"\u003e\n        //... (No menu item will be active)\n    \u003c/section\u003e\n\u003c/div\u003e\n```\n\n## Configuration\n\nThere are a few options that you can change from the Reveal.js options. The values below are default and do not need to be set if they are not changed.\n\n``` javascript\nReveal.initialize({\n    // ...\n    simplemenu: {\n        menuclass: \"menu\",\n        activeclass: \"active\",\n        activeelement: \"li\",\n        selectby: \"id\",\n        barhtml: {\n            header: \"\",\n            footer: \"\"\n        },\n        flat: false,\n        scale: 0.67,\n        csspath: \"\"\n   },\n    plugins: [ Simplemenu ]\n});\n```\n\n-   **`menuclass`**: This option sets the classname of the menu.\n-   **`activeclass`**: This option is the class an active menuitem gets.\n-   **`activeelement`**: This option sets the element that gets the active class. Change it if you directly want to style the `a`, for example.\n-   **`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 by this. By default, it selects by ID, but it can also be set to `data-name`. In that case, Simplemenu will compare the text content of your links to the data-name of the section. This only will work if you disable the auto-generation of the menu by adding the menu and menu-items manually.\n-   **`barhtml`**:\n    -   **`header`**: Here you can add the HTML for the header. If you include an empty menu in it, that will be populated with actual links. You might also add a logo here, or anything else you like.\n    -   **`footer`**: Here you can add the HTML for the footer. If you include an empty menu in it, that will be populated with actual links. You might also add a logo here, or anything else you like.\n-   **`flat`**: This turns the `flat` option on or off. See the description above.\n-   **`scale`**: When you have a lot of subjects/chapters in your menubar, they might not all fit in a row. To avoid the need to adjust the CSS for each presentation, you can tweak the scale in the options. It is set to be two-thirds of the main scaling.\n-   **`csspath`**: Simplemenu will automatically load the styling for the menubar and the menu items. If you want to customise the styling, you can link to your own CSS file here. You can also set `csspath: false` if you define the styling of your menu through some other CSS file that is already loaded.\n\n## Like it?\n\nIf you like it, please star this repo!\n\nAnd if you want to show off what you made with it, please do :-)\n\n## License\n\nMIT licensed\n\nCopyright (C) 2023 Martijn De Jongh (Martino)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMartinomagnifico%2Freveal.js-simplemenu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMartinomagnifico%2Freveal.js-simplemenu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMartinomagnifico%2Freveal.js-simplemenu/lists"}