library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-12-12 13:28:30 +00:00
Code Issues Actions 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
Show Stats 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 %}

45
docs/_javascript/navbar.js Normal file
View File

@ -0,0 +1,45 @@
document.addEventListener('DOMContentLoaded', () => {
const rootEl = document.documentElement;
const navbarTopEl = document.getElementById('navbar');
const navbarBottomEl = document.getElementById('navbarBottom');
const fixTopEl = document.getElementById('navbarFixTop');
const fixTopElIcon = fixTopEl.querySelector('.fa');
const fixBottomEl = document.getElementById('navbarFixBottom');
const fixBottomElIcon = fixBottomEl.querySelector('.fa');
let fixedTop = false;
let fixedBottom = false;
fixTopEl.addEventListener('click', event => {
fixedTop = !fixedTop;
if (fixedTop) {
fixTopEl.className = 'button is-success';
fixTopElIcon.className = 'fa fa-check-square-o';
rootEl.classList.add('has-navbar-fixed-top');
navbarTopEl.classList.add('is-fixed-top', 'has-shadow');
} else {
fixTopEl.className = 'button is-link';
fixTopElIcon.className = 'fa fa-square-o';
rootEl.classList.remove('has-navbar-fixed-top');
navbarTopEl.classList.remove('is-fixed-top', 'has-shadow');
}
});
fixBottomEl.addEventListener('click', event => {
fixedBottom = !fixedBottom;
if (fixedBottom) {
fixBottomEl.className = 'button is-success';
fixBottomElIcon.className = 'fa fa-check-square-o';
rootEl.classList.add('has-navbar-fixed-bottom');
navbarBottomEl.classList.remove('is-hidden');
} else {
fixBottomEl.className = 'button is-link';
fixBottomElIcon.className = 'fa fa-square-o';
rootEl.classList.remove('has-navbar-fixed-bottom');
navbarBottomEl.classList.add('is-hidden');
}
});
});

4
docs/_layouts/documentation.html
View File

@ -3,9 +3,7 @@ layout: default
route: documentation
---
<div class="container">
{% include navbar.html id="Documentation" %}
</div>
{% include navbar.html id="Documentation" has_container=true %}
<section class="hero is-link">
<div class="hero-body">

2
docs/_sass/highlight.sass
View File

@ -128,4 +128,4 @@
text-align: left
.content li .highlight
margin: 0
margin-top: 0.5em

25
docs/css/bulma-docs.css
View File

@ -2987,6 +2987,7 @@ a.box:active {
pointer-events: none;
position: absolute;
transform: rotate(-45deg);
transform-origin: center;
width: 0.5em;
margin-top: -0.375em;
right: 1.125em;
@ -6460,6 +6461,10 @@ a.dropdown-item.is-active {
bottom: 0;
}
.navbar.is-fixed-bottom.has-shadow {
box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1);
}
.navbar.is-fixed-top {
top: 0;
}
@ -6644,6 +6649,9 @@ a.navbar-item:hover, a.navbar-item.is-active,
.navbar.is-fixed-bottom-touch {
bottom: 0;
}
.navbar.is-fixed-bottom-touch.has-shadow {
box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1);
}
.navbar.is-fixed-top-touch {
top: 0;
}
@ -6693,6 +6701,17 @@ a.navbar-item:hover, a.navbar-item.is-active,
.navbar-item.has-dropdown {
align-items: stretch;
}
.navbar-item.has-dropdown-up .navbar-link::after {
transform: rotate(135deg) translate(0.25em, -0.25em);
}
.navbar-item.has-dropdown-up .navbar-dropdown {
border-bottom: 1px solid #dbdbdb;
border-radius: 5px 5px 0 0;
border-top: none;
bottom: 100%;
box-shadow: 0 -8px 8px rgba(10, 10, 10, 0.1);
top: auto;
}
.navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown {
display: block;
}
@ -6711,6 +6730,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
pointer-events: none;
position: absolute;
transform: rotate(-45deg);
transform-origin: center;
width: 0.5em;
margin-top: -0.375em;
right: 1.125em;
@ -6793,6 +6813,9 @@ a.navbar-item:hover, a.navbar-item.is-active,
.navbar.is-fixed-bottom-desktop {
bottom: 0;
}
.navbar.is-fixed-bottom-desktop.has-shadow {
box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1);
}
.navbar.is-fixed-top-desktop {
top: 0;
}
@ -9778,7 +9801,7 @@ label.panel-block:hover {
}
.content li .highlight {
margin: 0;
margin-top: 0.5em;
}
.content .highlighter-rouge:not(:last-child) {

41
docs/documentation/components/navbar.html
View File

@ -8,7 +8,7 @@ doc-subtab: navbar
{% include subnav-components.html %}
{% capture navbar_example %}
{% include navbar.html id="bd-example" %}
{% include examples/navbar.html id="Default" %}
{% endcapture %}
{% capture navbar_brand_example %}
@ -132,7 +132,7 @@ doc-subtab: navbar
{% endcapture %}
{% capture navbar_transparent_example %}
{% include navbar.html transparent=true boxed=true id="TransparentExample" %}
{% include examples/navbar.html transparent=true boxed=true id="TransparentExample" %}
{% endcapture %}
{% capture navbar_dropdown_example %}
@ -751,6 +751,43 @@ document.addEventListener('DOMContentLoaded', function () {
{% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
{% include anchor.html name="Fixed navbar" %}
{% include elements/new-tag.html version="0.6.1" %}
<div class="content">
<p>
You can now <strong>fix</strong> the navbar to either the <strong>top</strong> or <strong>bottom</strong> of the page. This is a 2-step process:
</p>
<ul>
<li>
Add either <code>is-fixed-top</code> or <code>is-fixed-bottom</code> to the <code>navbar</code> component
{% highlight html %}<nav class="navbar is-fixed-top">{% endhighlight %}
</li>
<li>
Add the corresponding <code>has-navbar-fixed-top</code> or <code>has-navbar-fixed-bottom</code> modifier to the <code>&lt;html&gt;</code> element to provide the appropriate padding to the page
{% highlight html %}<html class="has-navbar-fixed-top">{% endhighlight %}
</li>
</ul>
</div>
<h4 class="title is-5">Try it out!</h4>
<div id="navbarToggles" class="buttons">
<a id="navbarFixTop" class="button is-link">
<span class="icon">
<i class="fa fa-square-o"></i>
</span>
<span>Fix top navbar</span>
</a>
<a id="navbarFixBottom" class="button is-link">
<span class="icon">
<i class="fa fa-square-o"></i>
</span>
<span>Show bottom navbar</span>
</a>
</div>
{% include anchor.html name="Dropdown menu" %}
<div class="content">

2
docs/index.html
View File

@ -4,7 +4,7 @@ route: index
fixed_navbar: true
---
{% include navbar.html id="Index" boxed=true fixed=true has_container=true %}
{% include navbar.html id="Index" fixed=true has_container=true %}
{% include index/intro.html %}

46
docs/lib/navbar.js Normal file
View File

@ -0,0 +1,46 @@
'use strict';
document.addEventListener('DOMContentLoaded', function () {
var rootEl = document.documentElement;
var navbarTopEl = document.getElementById('navbar');
var navbarBottomEl = document.getElementById('navbarBottom');
var fixTopEl = document.getElementById('navbarFixTop');
var fixTopElIcon = fixTopEl.querySelector('.fa');
var fixBottomEl = document.getElementById('navbarFixBottom');
var fixBottomElIcon = fixBottomEl.querySelector('.fa');
var fixedTop = false;
var fixedBottom = false;
fixTopEl.addEventListener('click', function (event) {
fixedTop = !fixedTop;
if (fixedTop) {
fixTopEl.className = 'button is-success';
fixTopElIcon.className = 'fa fa-check-square-o';
rootEl.classList.add('has-navbar-fixed-top');
navbarTopEl.classList.add('is-fixed-top', 'has-shadow');
} else {
fixTopEl.className = 'button is-link';
fixTopElIcon.className = 'fa fa-square-o';
rootEl.classList.remove('has-navbar-fixed-top');
navbarTopEl.classList.remove('is-fixed-top', 'has-shadow');
}
});
fixBottomEl.addEventListener('click', function (event) {
fixedBottom = !fixedBottom;
if (fixedBottom) {
fixBottomEl.className = 'button is-success';
fixBottomElIcon.className = 'fa fa-check-square-o';
rootEl.classList.add('has-navbar-fixed-bottom');
navbarBottomEl.classList.remove('is-hidden');
} else {
fixBottomEl.className = 'button is-link';
fixBottomElIcon.className = 'fa fa-square-o';
rootEl.classList.remove('has-navbar-fixed-bottom');
navbarBottomEl.classList.add('is-hidden');
}
});
});

16
sass/components/navbar.sass
View File

@ -104,6 +104,8 @@ $navbar-divider-background-color: $border !default
+navbar-fixed
&.is-fixed-bottom
bottom: 0
&.has-shadow
box-shadow: 0 -2px 3px rgba($black, 0.1)
&.is-fixed-top
top: 0
@ -216,6 +218,8 @@ a.navbar-item,
+navbar-fixed
&.is-fixed-bottom-touch
bottom: 0
&.has-shadow
box-shadow: 0 -2px 3px rgba($black, 0.1)
&.is-fixed-top-touch
top: 0
html.has-navbar-fixed-top-touch
@ -260,6 +264,16 @@ a.navbar-item,
.navbar-item
&.has-dropdown
align-items: stretch
&.has-dropdown-up
.navbar-link::after
transform: rotate(135deg) translate(0.25em, -0.25em)
.navbar-dropdown
border-bottom: $navbar-dropdown-border-top
border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
border-top: none
bottom: 100%
box-shadow: 0 -8px 8px rgba($black, 0.1)
top: auto
&.is-active,
&.is-hoverable:hover
.navbar-dropdown
@ -336,6 +350,8 @@ a.navbar-item,
+navbar-fixed
&.is-fixed-bottom-desktop
bottom: 0
&.has-shadow
box-shadow: 0 -2px 3px rgba($black, 0.1)
&.is-fixed-top-desktop
top: 0
html.has-navbar-fixed-top-desktop

1
sass/utilities/mixins.sass
View File

@ -10,6 +10,7 @@
pointer-events: none
position: absolute
transform: rotate(-45deg)
transform-origin: center
width: 0.5em
=block