Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add top bottom navbar toggle

Browse Source
This commit is contained in:
Jeremy Thomas
2017-10-24 12:23:31 +01:00
parent 0e6e22e70a
commit c0639cde83
13 changed files with 326 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
docs/_includes/examples/navbar-bottom.html Normal file
View File

@@ -0,0 +1,74 @@
<nav id="navbarBottom" class="navbar is-fixed-bottom has-shadow is-hidden">
<div class="navbar-brand">
<a class="navbar-item" href="{{ site.url }}">
<img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<div class="navbar-burger burger" data-target="navbarExample{{ include.id }}">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navbarExample{{ include.id }}" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="{{ site.url }}/">
Home
</a>
<div class="navbar-item has-dropdown has-dropdown-up is-hoverable">
<a class="navbar-link" href="/documentation/overview/start/">
Docs
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/documentation/overview/start/">
Overview
</a>
<a class="navbar-item" href="{{ site.url }}/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item" href="{{ site.url }}/documentation/layout/container/">
Layout
</a>
<a class="navbar-item" href="{{ site.url }}/documentation/form/general/">
Form
</a>
<hr class="navbar-divider">
<a class="navbar-item" href="{{ site.url }}/documentation/elements/box/">
Elements
</a>
<a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/">
Components
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class="control">
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>

74
docs/_includes/examples/navbar.html Normal file
View File

@@ -0,0 +1,74 @@
<nav class="navbar{% if include.transparent %} is-transparent{% endif %}">
<div class="navbar-brand">
<a class="navbar-item" href="{{ site.url }}">
<img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<div class="navbar-burger burger" data-target="navbarExample{{ include.id }}">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navbarExample{{ include.id }}" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="{{ site.url }}/">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="/documentation/overview/start/">
Docs
</a>
<div class="navbar-dropdown{% if include.boxed %} is-boxed{% endif %}">
<a class="navbar-item" href="/documentation/overview/start/">
Overview
</a>
<a class="navbar-item" href="{{ site.url }}/documentation/modifiers/syntax/">
Modifiers
</a>
<a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
Columns
</a>
<a class="navbar-item" href="{{ site.url }}/documentation/layout/container/">
Layout
</a>
<a class="navbar-item" href="{{ site.url }}/documentation/form/general/">
Form
</a>
<hr class="navbar-divider">
<a class="navbar-item" href="{{ site.url }}/documentation/elements/box/">
Elements
</a>
<a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/">
Components
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
<span class="icon">
<i class="fa fa-twitter"></i>
</span>
<span>
Tweet
</span>
</a>
</p>
<p class="control">
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>

3
docs/_includes/footer.html
View File

@@ -122,6 +122,9 @@
{% if page.route == 'index' %}
<script src="https://player.vimeo.com/api/player.js"></script>
<script type="text/javascript" src="{{ site.url }}/lib/index.js"></script>
{% elsif page.doc-subtab == 'navbar' %}
{% include examples/navbar-bottom.html %}
<script type="text/javascript" src="{{ site.url }}/lib/navbar.js"></script>
{% endif %}
<div id="fb-root"></div>

2
docs/_includes/navbar.html
View File

@@ -1,4 +1,4 @@
<nav class="navbar {% if include.fixed %}is-fixed-top has-shadow{% endif %} {% if include.transparent %}is-transparent{% endif %}">
<nav id="navbar" class="navbar {% if include.fixed %}is-fixed-top has-shadow{% endif %} {% if include.transparent %}is-transparent{% endif %}">
{% if include.has_container %}
<div class="container">
{% endif %}