You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A simple menu for [Reveal.js](https://revealjs.com)
3
3
4
-
In Powerpoint you can make slides with a nice bottom- or top bar in which the active chapter is highlighted. This menu works in the same way, but automatically.
[Demo with bar on top](https://martinomagnifico.github.io/reveal.js-simplemenu/demo.html)
7
-
or
8
-
[Demo with bar on bottom](https://martinomagnifico.github.io/reveal.js-simplemenu/bottombar.html)
6
+
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.
9
7
8
+
[Demo with bar on top](https://martinomagnifico.github.io/reveal.js-simplemenu/demo.html)
10
9
10
+
[Demo with bar on bottom](https://martinomagnifico.github.io/reveal.js-simplemenu/demo-bottom.html)
11
11
12
-
It's easy to set up, but expects a few things:
12
+
[Demo with select by name](https://martinomagnifico.github.io/reveal.js-simplemenu/demo-name.html)
13
13
14
-
Chapters can only be top-level sections (horizontal) with, or without, nested sections (vertical).
14
+
[Demo with auto-generated menu](https://martinomagnifico.github.io/reveal.js-simplemenu/demo-auto.html)
15
15
16
-
There has to be a:
16
+
### What it does
17
+
- Make menu items of your vertical stacks (top-level sections).
18
+
- Moving to another vertical stack (by whatever navigation) will automatically update the current menu item.
19
+
- Clicking an item in the menu will open the first section in the corresponding vertical stack.
20
+
- Simplemenu can auto-generate the menu, using section names (ID's give ugly button names). See the option 'auto' in options
17
21
18
-
- Element with `class="menu"`.
19
-
- Inside this menu, there have to be anchors with an href. These can point to either an ID of a first nested section, or to an ID of a top-level section when it has no children.
20
-
- The top-level sections need a data attribute: `data-menu-title="chaptername"`.
21
-
- Simplemenu checks if the href value of those links correspond to the data-menu-title attribute of the sections.
22
22
23
-
Simplemenu does not check if an ID has the same name as the data-attribute. Reveal.js handles clicks on (named) anchors of top-level sections with subsections only horizontally. That means if you have clicked through the slides of chapter 1, are now in chapter 2, and click on an anchor that points to the top-level section of chapter one, it will not 'scroll' to the top, but show the last viewed slide of chapter 1. That's why the ID's need to be on the first slide of their chapter, and that's why there is both an ID and a data-attribute. Another possibility would be to use only ID's and to check if there is a sibling or parent with an ID that is also in the menu, but this current version works well enough.
23
+
It's easy to set up, but expects a few things:
24
24
25
+
- Menu items can only be top-level sections: regular horizontal slides or vertical stacks.
26
+
- 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.
27
+
- 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"`.
25
28
26
29
27
30
## Installation
28
31
29
32
Copy the simplemenu folder to the plugins folder of the reveal.js folder, like this: `plugin/simplemenu`. Now add it to the dependencies of Reveal.js:
30
33
31
34
32
-
```javascript
33
-
Reveal.initialize({
34
-
// ...
35
-
dependencies: [
36
-
// ...
37
-
{ src:'plugin/simplemenu/simplemenu.js' },
38
-
// ...
39
-
]
40
-
});
35
+
### JavaScript
36
+
37
+
The Simplemenu plugin has been rewritten for Reveal.js version 4.
38
+
39
+
If you want to use Simplemenu with an older version of Reveal, use the [1.0.2 version](https://github.com/Martinomagnifico/reveal.js-simplemenu/releases).
40
+
41
+
There are two JavaScript files for Simplemenu, a regular one, `simplemenu.js`, and a module one, `simplemenu.esm.js`. You only need one of them:
42
+
43
+
44
+
#### Regular
45
+
If you're not using ES modules, for example, to be able to run your presentation from the filesystem, you can add it like this:
@@ -81,6 +116,26 @@ It is easy to set up your HTML structure for Simplemenu:
81
116
</section>
82
117
</div>
83
118
```
119
+
### The auto way
120
+
121
+
When using the `auto` option (see Configuration), you only need to add an empty menu, and give names to your sections.
122
+
123
+
```html
124
+
<divclass="menubar">
125
+
<ulclass="menu"></ul>
126
+
</div>
127
+
<divclass="slides">
128
+
<sectionname="Menu item one">
129
+
//...
130
+
</section>
131
+
<sectionname="Menu item two">
132
+
//...
133
+
</section>
134
+
<sectionname="Menu item three">
135
+
//...
136
+
</section>
137
+
</div>
138
+
```
84
139
85
140
86
141
## Configuration
@@ -89,27 +144,30 @@ There are a few options that you can change from the Reveal.js options. The valu
89
144
90
145
```javascript
91
146
Reveal.initialize({
92
-
// ...
93
-
simplemenu: {
94
-
// Use menuselector to assign the menu items to be used. You might want to point
95
-
// it to '.menu li a' for example. In that case the class of the a's will toggle,
96
-
// not the class of the li's.
97
-
menuselector:'.menu li',
98
-
99
-
// Use a specific class for the active state.
100
-
activeclass:'active'
101
-
},
102
-
dependencies: [
103
-
// ...
104
-
]
147
+
// ...
148
+
simplemenu: {
149
+
menuclass:'menu',
150
+
activeclass:'active',
151
+
activeelement:'li',
152
+
selectby:'id',
153
+
auto:false
154
+
},
155
+
plugins: [ Simplemenu ]
105
156
});
106
157
```
158
+
***`menuclass`**: This option sets the classname of the menu.
159
+
***`activeclass`**: This option is the class an active menuitem gets.
160
+
***`activeelement`**: This option sets the element that gets the active class. Change it if you directly want to style the `a`, for example.
161
+
***`selectby`**: The selectby option finds the currently active vertical stack by this. By default, it selects by ID, but it can also be set to `name`. In that case, Simplemenu will compare the text content of your links to the name of the section.
162
+
***`auto`**: If set to true, the auto option will auto-generate a menu by the names of the sections.
163
+
164
+
107
165
108
166
## Like it?
109
-
This is my first Github repo... let me know if you like it.
0 commit comments