A simple Reveal.js plugin for a menubar or a header or footer with an auto-generated menu.
Home Page: https://martinomagnifico.github.io/reveal.js-simplemenu/demo.html
License: MIT License
Hi, thanks for this very useful plugin!
A strange thing happens, a simple commented line above a section breaks the menu:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simplemenu for Reveal.js, auto</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/reset.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/theme/black.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/plugin/highlight/monokai.css">
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
<div class="reveal">
<div class="menubar">
<ul class="menu"></ul>
</div>
<div class="slides">
<section name="Home">
<h1>HOME</h1>
</section>
<!-- some comment here breaks the menu (click jumps to the wrong link) -->
<section name="Biography">
<!-- some comment here is OK -->
<section>
<h2>Biography</h2>
</section>
</section>
<section name="What it does">
<section>
<h2>What it does</h2>
</section>
<section>
<p>Simplemenu can simplify HTML editing</p>
</section>
</section>
<section name="Set it up">
<section>
<h4>Set it up</h4>
<p>Set the auto-option to true.</p>
</section>
<section>
<h4>That's it!</h4>
</section>
</section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.js"></script>
<script src="plugin/simplemenu/simplemenu.js"></script>
<script>
Reveal.initialize({
simplemenu: { auto: true},
plugins: [
Simplemenu,
]
});
</script>
</body>
</html>the validator is also complaining about name:
Attribute “name” not allowed on element “section” at this point
Not sure if's related though.
Dear Martino,
First of all, thank you for this very useful plugin. As mentioned in the title, when the slideNumber option is activated in Reveal.initialize, the menu appears on all slides, even on those for which the menubar is hidden.
Step to reproduce the bug: add "slideNumber: 'c'," in Reveal.initialize, e.g. in demo.html of the simplemenu repo.
reveal.js version: 4.3.1.
I suspect something in the pdf.scss of reveal distribution, but I don't know how to solve this issue.
Thank you for your help !
So far I understand is reveal.js-simplemenu kind of a standalone fork. Is the plugin compatible with the recent stable version of reveal.js and if, how to integrate it into and existing project? I tried but the application is always breaking.
Hi, thank you for your work.
When I use the simplemenu in a window with a too small width, the last menu items are not displayed. Is there a way to dynamicly adapt font size in order for the menu to be always displayed, or to make the menu always been centered around the active item so that the next sections are alway displayed?
Sorry for my english
Dear Martino,
First of all, thank you for this very useful plugin.
Unfortunately it does not work properly if I render my slides with quarto (reveal.js 4.3.1). It does not build a menubar. It only works with level 2 headings and therefore not with stacks.
This is generated html using vertical stacks (h1 and h2 headings):
<section hidden="" aria-hidden="true" class="stack future" style="display: block;">
<section id="in-the-morning" class="title-slide slide level1 center" data-name="In the morning" style="top: 224px; display: block;" data-pdf-page-number="1">
<h1>In the morning</h1>
<ul>
<li>because it’s early</li>
<li>there is no content….</li>
</ul>
</section>
<section id="getting-up" class="slide level2 future" data-name="Getting Up" aria-hidden="true" data-pdf-page-number="2" style="display: block;">
<h2>Getting up</h2>
<ul>
<li>Turn off alarm</li>
<li>Get out of bed</li>
</ul>
</section>
<section class="slide level2 future" aria-hidden="true" data-pdf-page-number="3" style="display: none;"></section>
</section>Just using level 2 headings creates a menu:
<section id="inthemorning" class="slide level2 present" data-name="In the morning" style="display: block;" data-pdf-page-number="1">
<h2>In the morning</h2>
<ul>
<li>because it’s early</li>
<li>there is no content….</li>
</ul>
</section>Does the simpleMenu function considers the extra <section> tag with the stack class?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.