forked from joedf/strapdown-topbar
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
82 lines (72 loc) · 2.44 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link type="image/png" href="assets/logo.png" rel="icon">
<title>StrapDown-TopBar</title>
</head>
<body>
<topbar right style="display:none;">
<item><a href="index.html">Home</a></item>
<item><a href="template.html">Left</a></item>
<item><a href="template-right.html">Right</a></item>
<item><a href="template-mfixed.html">MFixed</a></item>
<menu name="Dropdown Menu">
<item><a href="#">Item #1</a></item>
<item><a href="#">Item #2</a></item>
<item><a href="#">Item #3</a></item>
<item></item> <!-- add a divider -->
<item><a href="#">Item #4</a></item>
</menu>
<toc>My TOC</toc>
<item><a href="https://github.com/joedf/strapdown-topbar">Fork on Github</a></item>
<item><small>(Powered by <a href="http://strapdownjs.com/">StrapDown.js</a>)</small></item>
</topbar>
<xmp theme="simplex" style="display:none;">
# strapdown-topbar
A topbar modification for [strapdown.js](http://strapdownjs.com/)
## Examples
Example #1
_Left aligned top links_
http://joedf.github.io/strapdown-topbar/template.html
Example #2
_Right aligned top links_
http://joedf.github.io/strapdown-topbar/template-right.html
Example MFixed
_Fixed topbar on mobile devices_
http://joedf.github.io/strapdown-topbar/template-mfixed.html
## Usage
Have your topbar setting in the `<body>`.
```HTML
<topbar right mfixed style="display:none;">
<item><a href="#">Home</a></item>
<item><a href="#">About</a></item>
<menu name="Dropdown Menu">
<item><a href="#">Item #1</a></item>
<item><a href="#">Item #2</a></item>
<item><a href="#">Item #3</a></item>
<item></item> <!-- add a divider -->
<item><a href="#">Item #4</a></item>
</menu>
<toc>My TOC</toc>
<item><small>(Powered by <a href="http://strapdownjs.com/">StrapDown.js</a>)</small></item>
</topbar>
```
Then, simply include `strapdown-topbar.js` **AFTER** `strapdown.js`.
```HTML
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
<!-- Include it AFTER strapdown -->
<script src="assets/strapdown/strapdown-topbar.min.js"></script>
<!-- Example: Manually adding a logo -->
<!-- Include it AFTER EVERYTHING -->
<script src="assets/logo.js"></script>
```
</xmp>
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
<!-- Include it AFTER strapdown -->
<script src="assets/strapdown/strapdown-topbar.min.js"></script>
<!-- Example: Manually adding a logo -->
<!-- Include it AFTER EVERYTHING -->
<script src="assets/logo.js"></script>
</body>
</html