library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Updating navbar.html to include jQuery toggle

Browse Source 
Minimal changes which introduce a jQuery toggle implementation of the 'navbar-burger' and 'navbar-menu'
This commit is contained in:
deasydoesit 2018-06-20 18:42:49 -04:00 committed by Jeremy Thomas
parent ff92d44761
commit b58b9b82ee
1 changed files with 26 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -513,7 +513,7 @@ document.addEventListener('DOMContentLoaded', function () {
var target = $el.dataset.target;
var $target = document.getElementById(target);
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
@ -524,6 +524,20 @@ document.addEventListener('DOMContentLoaded', function () {
});
{% endcapture %}
{% capture navbar_jquery_code %}
$(document).ready(function() {
// Check for click events on the navbar burger icon
$(".navbar-burger").click(function() {
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
$(".navbar-burger").toggleClass("is-active");
$(".navbar-menu").toggleClass("is-active");
});
});
{% endcapture %}
{% capture navbar_color_markup %}
<nav class="navbar is-primary">
<!-- navbar brand, navbar menu... -->
@ -689,12 +703,22 @@ document.addEventListener('DOMContentLoaded', function () {
<p>
The Bulma package <strong>does not come with any JavaScript</strong>.
<br>
Here is however an implementation example, which toggles the class <code>is-active</code> on both the <code>navbar-burger</code> and the targeted <code>navbar-menu</code>.
Here is however an implementation example, which toggles the class <code>is-active</code> on both the <code>navbar-burger</code> and the targeted <code>navbar-menu</code>, in Vanilla Javascript.
</p>
{% highlight html %}{{ navbar_js_html }}{% endhighlight %}
{% highlight javascript %}{{ navbar_js_code }}{% endhighlight %}
<p>
And here is another implementation example, which again toggles the class <code>is-active</code> on both the <code>navbar-burger</code> and the targeted <code>navbar-menu</code>, but this time in jQuery.
</p>
{% highlight javascript %}{{ navbar_jquery_code }}{% endhighlight %}
<p>
Remeber, these are just implementation examples. The Bulma package <strong>does not come with any JavaScript</strong>.
</p>
</div>
</div>
</div>