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

Fix docs

Browse Source
This commit is contained in:
Jeremy Thomas
2018-07-09 16:03:16 +01:00
parent b58b9b82ee
commit 14daff89c0
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -497,24 +497,24 @@ meta:
{% endcapture %} {% endcapture %}
{% capture navbar_js_code %} {% capture navbar_js_code %}
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements // Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers // Check if there are any navbar burgers
if ($navbarBurgers.length > 0) { if ($navbarBurgers.length > 0) {
// Add a click event on each of them // Add a click event on each of them
$navbarBurgers.forEach(function ($el) { $navbarBurgers.forEach( el => {
$el.addEventListener('click', function () { el.addEventListener('click', () => {
// Get the target from the "data-target" attribute // Get the target from the "data-target" attribute
var target = $el.dataset.target; const target = el.dataset.target;
var $target = document.getElementById(target); const $target = document.getElementById(target);
// Toggle the "is-active" 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'); el.classList.toggle('is-active');
$target.classList.toggle('is-active'); $target.classList.toggle('is-active');
}); });
@@ -709,15 +709,15 @@ $(document).ready(function() {
{% highlight html %}{{ navbar_js_html }}{% endhighlight %} {% highlight html %}{{ navbar_js_html }}{% endhighlight %}
{% highlight javascript %}{{ navbar_js_code }}{% endhighlight %} {% highlight javascript %}{{ navbar_js_code }}{% endhighlight %}
<p> <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. 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> </p>
{% highlight javascript %}{{ navbar_jquery_code }}{% endhighlight %} {% highlight javascript %}{{ navbar_jquery_code }}{% endhighlight %}
<p> <p>
Remeber, these are just implementation examples. The Bulma package <strong>does not come with any JavaScript</strong>. Remember, these are just implementation examples. The Bulma package <strong>does not come with any JavaScript</strong>.
</p> </p>
</div> </div>
</div> </div>