added support for multiple menus

Author: handymathis@gmail..com

dropdown/animations.scss

@@ -16,4 +16,64 @@
         top: 2.5%;
         opacity: 1;
     }
+}
+
+.old-out {
+    animation-name: oldOut;
+    animation-duration: .3s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes oldOut {
+    from  {
+        left: 0;
+    }
+    to {
+        left: -100%;
+    }
+}
+
+.old-in {
+    animation-name: oldIn;
+    animation-duration: .3s;
+    animation-fill-mode: backwards;
+}
+
+@keyframes oldIn {
+    from  {
+        left: 0;
+    }
+    to {
+        left: -100%;
+    }
+}
+
+.new-out {
+    animation-name: newOut;
+    animation-duration: .3s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes newOut {
+    from  {
+        right: -10px;
+    }
+    to {
+        right: -100%;
+    }
+}
+
+.new-in {
+    animation-name: newIn;
+    animation-duration: .3s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes newIn {
+    from  {
+        right: -100%;
+    }
+    to {
+        right: -10px;
+    }
 }

js/dropdown-toggler.js

@@ -0,0 +1,34 @@
+
+
+function DropdownForwardMenu(from, to) {
+
+    let fromElement = document.getElementById(from);
+    removeUnusedClasses(fromElement);
+
+    let toElement = document.getElementById(to);
+    removeUnusedClasses(toElement);
+
+    fromElement.classList.add('old-out');
+    toElement.classList.add('new-in');
+
+}
+
+function DropdownBackwardMenu(from, to) {
+
+    let fromElement = document.getElementById(from);
+    removeUnusedClasses(fromElement);
+
+    let toElement = document.getElementById(to);
+    removeUnusedClasses(toElement);
+
+    fromElement.classList.add('new-out');
+    toElement.classList.add('old-in');
+}
+
+function removeUnusedClasses(element) {
+
+    element.classList.contains('old-out') ? element.classList.remove('old-out') : null;
+    element.classList.contains('old-in') ? element.classList.remove('old-in') : null;
+    element.classList.contains('new-out') ? element.classList.remove('new-out') : null;
+    element.classList.contains('new-in') ? element.classList.remove('new-in') : null;
+}