custom.md

Simplemenu

for Reveal.js

Using custom styling

---

Table of Contents

---

Slide 1

A paragraph with some text and a link.

---

Setup

---

Add a header via the barhtml option and include your custom header markup. Change the CSS to your needs and link to it through the csspath option.

Reveal.initialize({
	//...
	simplemenu: {
		barhtml: { 
			header: '<div class="menubar"><a href="#"><img class="logo" src="img/logo.svg"></a><ul class="menu"></ul></div>'
		},
		csspath: 'css/mycustomstyle.css'
	},
	plugins: [ Simplemenu ]

---

You can also move the slidenumber into the menubar by just adding a div with the class slide-number to it:

Reveal.initialize({
	//...
	simplemenu: {
		barhtml: { 
			header: '<div class="menubar"><a href="#"><img class="logo" src="img/logo.svg"></a><ul class="menu"></ul><div class="slide-number"></div></div>'
		},
		csspath: 'css/mycustomstyle.css'
	},
	plugins: [ Simplemenu ]

---

That’s it!