From: deasydoesit <37127765+deasydoesit@users.noreply.github.com>
Date: Wed, 20 Jun 2018 22:42:49 +0000 (-0400)
Subject: Updating navbar.html to include jQuery toggle
X-Git-Tag: 0.7.2~86
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b58b9b82ee84150aa267e57366b381177f85b22c;p=thirdparty%2Fbulma.git

Updating navbar.html to include jQuery toggle

Minimal changes which introduce a jQuery toggle implementation of the 'navbar-burger' and 'navbar-menu'
---

diff --git a/docs/documentation/components/navbar.html b/docs/documentation/components/navbar.html
index b82097e39..6b4e5b3c1 100644
--- a/docs/documentation/components/navbar.html
+++ b/docs/documentation/components/navbar.html
@@ -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>