Differences

This shows you the differences between two versions of the page.

--- development:css:bootstrap:animated_hamburger_menu [2020/03/17 13:21]
kalenpw created
+++ development:css:bootstrap:animated_hamburger_menu [2020/03/17 13:31] (current)
kalenpw
@@ Line 1: / Line 1: @@
 ====== Animated Hamburger Menu Toggle ======
+Animation to have the 3 line hamburger menu turn into an x
+----
+===== HTML =====
+Replace the normal bootstrap hamburger menu in the navbar with the following
+<code html>
+<button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
+         data-target="#mainMenu" aria-controls="navbarsExampleDefault" aria-expanded="false"
+         aria-label="Toggle navigation"
+>
+    <span class="icon-bar top-bar"></span>
+    <span class="icon-bar middle-bar"></span>
+    <span class="icon-bar bottom-bar"></span>
+</button>
+</code>
+----
+===== CSS =====
+And add the following CSS
 <code css>
 .navbar-toggler {
@@ Line 39: / Line 58: @@
 </code>
-<code html>
+----
-        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
+===== Example =====
-            data-target="#mainMenu" aria-controls="navbarsExampleDefault" aria-expanded="false"
+{{:development:css:bootstrap:animated_x.gif?400|}}
-            aria-label="Toggle navigation">
-            <span class="icon-bar top-bar"></span>
-            <span class="icon-bar middle-bar"></span>
-            <span class="icon-bar bottom-bar"></span>
-        </button>
-</code>