|
@@ -497,24 +497,24 @@ meta:
|
|
|
{% endcapture %}
|
|
|
|
|
|
{% capture navbar_js_code %}
|
|
|
-document.addEventListener('DOMContentLoaded', function () {
|
|
|
+document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
|
|
// 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
|
|
|
if ($navbarBurgers.length > 0) {
|
|
|
|
|
|
// Add a click event on each of them
|
|
|
- $navbarBurgers.forEach(function ($el) {
|
|
|
- $el.addEventListener('click', function () {
|
|
|
+ $navbarBurgers.forEach( el => {
|
|
|
+ el.addEventListener('click', () => {
|
|
|
|
|
|
// Get the target from the "data-target" attribute
|
|
|
- var target = $el.dataset.target;
|
|
|
- var $target = document.getElementById(target);
|
|
|
+ const target = el.dataset.target;
|
|
|
+ const $target = document.getElementById(target);
|
|
|
|
|
|
// 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');
|
|
|
|
|
|
});
|
|
@@ -709,15 +709,15 @@ $(document).ready(function() {
|
|
|
{% 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>.
|
|
|
+ Remember, these are just implementation examples. The Bulma package <strong>does not come with any JavaScript</strong>.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|