-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
79 lines (71 loc) · 3.4 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
<!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>
<menu name="Examples">
<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>
<item><a href="header-test.html">Header Test</a></item>
<item><a href="header-test-mfixed.html">Header Test (MFixed)</a></item>
</menu>
<menu name="Themes"><item><a id="settheme"><b>Current</b></a></item></menu>
<toc></toc>
<item><a href="https://github.com/joedf/strapdown-topbar">Fork on Github</a></item>
<item><small>(Powered by <a href="https://github.com/arturadib/strapdown">StrapDown.js</a>)</small></item>
</topbar>
<xmp theme="simplex" style="display:none;">
# strapdown-topbar
A topbar modification for [strapdown.js](https://github.com/arturadib/strapdown) (markdown-based webpages)
[](https://cdnjs.com/libraries/strapdown-topbar) [](https://github.com/joedf/strapdown-topbar/releases/latest)
## Examples
- Example #1: _Left aligned top links_ [[link]](http://joedf.github.io/strapdown-topbar/template.html)
- Example #2: _Right aligned top links_ [[link]](http://joedf.github.io/strapdown-topbar/template-right.html)
- Example #3: (MFixed) _Fixed topbar on mobile devices_ [[link]](http://joedf.github.io/strapdown-topbar/template-mfixed.html)
- Example #4: _Testing Header anchor v-alignment_ [[link]](http://joedf.github.io/strapdown-topbar/header-test.html)
- Example #5: (MFixed) _Testing Header anchor v-alignment_ [[link]](http://joedf.github.io/strapdown-topbar/header-test-mfixed.html)
## Usage
Have your topbar setting in the `<body>`.
```HTML
<topbar 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="https://github.com/arturadib/strapdown">StrapDown.js</a>)</small></item>
</topbar>
```
Then, simply include `strapdown-topbar.js` **AFTER** `strapdown.js`.
```HTML
<script src="https://cdn.jsdelivr.net/gh/arturadib/strapdown@gh-pages/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>
```
**NOTE!** Want more speed? Now available on [cdnjs](https://cdnjs.com/libraries/strapdown-topbar)
Or even [jsDelivr](https://www.jsdelivr.com): `https://cdn.jsdelivr.net/gh/joedf/strapdown-topbar@latest/assets/strapdown/strapdown-topbar.min.js`
</xmp>
<script src="assets/strapdown/v/0.2/strapdown.js"></script>
<!-- Include it AFTER strapdown -->
<script>var STRAPDOWN_TOPBAR_DEFAULT_COLOR = '#555';</script>
<script src="assets/strapdown/strapdown-topbar.min.js"></script>
<!-- Example: Manually adding a logo -->
<!-- Include it AFTER EVERYTHING -->
<script src="assets/logo.js"></script>
<script src="assets/themeswitcher.js"></script>
</body>
</html>