-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathdemo-manual-dataname.html
110 lines (107 loc) · 5.2 KB
/
demo-manual-dataname.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simplemenu for Reveal.js, manual linking to data-name</title>
<meta name="description" content="">
<meta name="author" content="Martinomagnifico">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="../dist/reset.css">
<link rel="stylesheet" href="../dist/reveal.css">
<link rel="stylesheet" href="../dist/theme/black.css">
<link rel="stylesheet" href="../plugin/highlight/monokai.css">
<link rel="stylesheet" href="css/demo.css">
<style>
:root {
--r-background-color: #051525;
}
</style>
</head>
<body>
<div class="reveal"><a class="github-corner bottom" href="https://github.com/Martinomagnifico/reveal.js-simplemenu" target="blank" title="View source on GitHub">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55">
<path fill="currentColor" d="M27.5 11.2a16.3 16.3 0 0 0-5.1 31.7c.8.2 1.1-.3 1.1-.7v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.2-1 .6-1.8 1-2.2-3.5-.4-7.3-1.8-7.3-8 0-1.8.6-3.3 1.6-4.4-.1-.5-.7-2.1.2-4.4 0 0 1.4-.4 4.5 1.7a15.6 15.6 0 0 1 8.1 0c3.1-2 4.5-1.7 4.5-1.7.9 2.3.3 4 .2 4.4 1 1 1.6 2.6 1.6 4.3 0 6.3-3.8 7.7-7.4 8 .6.6 1.1 1.6 1.1 3v4.6c0 .4.3.9 1.1.7a16.3 16.3 0 0 0-5.2-31.7"></path>
</svg></a>
<div class="menubar">
<ul class="menu top">
<li><a href="#">Why?</a></li>
<li><a href="#">Set it up</a></li>
</ul>
</div>
<div class="slides">
<section class="center" data-transition="fade" data-state="hide-menubar">
<h1>Simplemenu</h1>
<h3>for Reveal.js</h3>
<p class="smaller">Manual menu, linking to <code>data-name</code></p>
</section>
<section data-name="Why?">
<section class="center">
<h4>Why?</h4>
<p>Sometimes manually linking the menu is needed. Simplemenu can do that too.</p>
<p class="small">Manually linking can be done through <code>id</code> and <code>data-name</code>. <br>These slides explain the use of <code>data-name</code>.</p>
</section>
</section>
<section data-name="Set it up">
<section class="center">
<h4>It's easy to set up, but expects a few things:</h4>
<ul class="small">
<li>Menu items can only be top-level sections: regular horizontal slides or vertical stacks.</li>
<li>Create an element that will hold the links. </li>
<li>Inside this menu, there have to be anchors. The href will be ignored, so it can stay empty: <code><a href="#"></code>.</li>
<li>The textcontent of each link has to be the same as the <code>data-name</code> of each linked section. This text-content is used to create a data-attribute for each link which is then used for matching. This way, any changes to the text of the link (for example, when it is translated) have no effect on the linking.</li>
</ul>
</section>
<section>
<h4>JavaScript</h4>
<p class="small">Load the Simplemenu script and make a reference to it in the Reveal plugin options. Add the selectby option and set it to <code>data-name</code>.</p><br>
<pre><code class="hljs html" data-line-numbers><script src="plugin/simplemenu/simplemenu.js"></script>
<script>
Reveal.initialize({
simplemenu: {
selectby: "data-name"
}
plugins: [ Simplemenu ]
});
<script></code></pre>
</section>
<section>
<h4>HTML Markup</h4>
<p class="small">Make sure that the text content of your links is the same as the <code>data-name</code> attribute of your sections. In the example below it is literally "Put some text here".</p>
<pre><code><div class="menubar">
<ul class="menu">
<li>
<a href="#">Put some text here</a>
</li>
</ul>
</div>
<div class="slides">
<section data-name="Put some text here">
//...
</section>
//...
</div></code></pre>
</section>
<section>
<h4>That’s it!</h4>
</section>
</section>
</div>
</div>
<script src="../dist/reveal.js"></script>
<script src="plugin/simplemenu/simplemenu.js"></script>
<script src="../plugin/highlight/highlight.js"></script>
<script>
Reveal.initialize({
transition: "slide",
simplemenu: {
selectby: "data-name"
},
plugins: [
Simplemenu,
RevealHighlight
]
});
</script>
</body>
</html>