strapdown-topbar

A topbar modification for strapdown.js (markdown-based webpages)

Examples

Example #1: Left aligned top links [link]
Example #2: Right aligned top links [link]
Example #3: (MFixed) Fixed topbar on mobile devices [link]
Example #4: Testing Header anchor v-alignment [link]
Example #5: (MFixed) Testing Header anchor v-alignment [link]

Usage

Have your topbar setting in the <body>.

<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.

<script src="https://cdn.jsdelivr.net/gh/arturadib/strapdown@gh-pages/v/0.2/strapdown.js"></script>
<!-- Include it AFTER strapdown -->
<script src="https://github.com/joedf/strapdown-topbar/raw/gh-pages/assets/strapdown/strapdown-topbar.min.js"></script>

<!-- Example: Manually adding a logo -->
<!-- Include it AFTER EVERYTHING -->
<script src="https://github.com/joedf/strapdown-topbar/raw/gh-pages/assets/logo.js"></script>

Optionally, you can include the following before the js files to force a header text color to avoid link color styling when not hovered.

var STRAPDOWN_TOPBAR_DEFAULT_COLOR = '#555';

NOTE! Want more speed? Now available on cdnjs
Or even jsDelivr: https://cdn.jsdelivr.net/gh/joedf/strapdown-topbar@latest/assets/strapdown/strapdown-topbar.min.js

joedf / strapdown-topbar

readme

strapdown-topbar

Examples

Usage