Added Menu Mixins:

Desktop vertical Desktop vertical Tablet/Phone Fullscreen Toggle Button
2017-02-22 01:21:17 +01:00
parent 6d9ce3dacc
commit 5cafe3670b
24 changed files with 946 additions and 54 deletions
@@ -0,0 +1,136 @@
+@mixin menu-horizontal-desktop(
+  $padding:15px,
+  $bg-color:#cccccc,
+  $bg-color-hover:#999999,
+  $font-color:#666666,
+  $font-color-hover:#ffffff
+) {
+  position: relative;
+  list-style: none;
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  background-color: $bg-color;
+
+  // First
+  li {
+    position: relative;
+    display: table-cell;
+    background-color: $bg-color;
+    color: $font-color;
+    width: 100%;
+
+    a {
+      display: block;
+      padding: $padding;
+      width: 100%;
+      text-decoration: none;
+      color: $font-color;
+      box-sizing: border-box;
+    }
+
+    // Second
+    ul {
+      display: none;
+      position: absolute;
+      width: 100%;
+
+      // Second
+      li {
+        color: $font-color;
+        a {
+          color: $font-color;
+        }
+
+        // Third
+        ul {
+          position: absolute;
+          display: none;
+          left: 100%;
+          top: 0;
+
+          // Third
+          li {
+            position: relative;
+            color: $font-color;
+
+            a {
+              color: $font-color;
+            }
+          }
+        }
+      }
+    }
+
+    // First
+    &:hover {
+      background-color: $bg-color-hover;
+      color: $font-color-hover;
+
+      a {
+        color: $font-color-hover;
+      }
+
+      // Second
+      ul {
+        display: block;
+
+        // Second
+        li {
+          display: block;
+          color: $font-color;
+
+          a {
+            color: $font-color;
+          }
+          // Third
+          ul {
+            display: none;
+
+            // Third
+            li {
+
+            }
+          }
+
+          // Second
+          &:hover {
+            color: $font-color-hover;
+
+            a {
+              color: $font-color-hover;
+            }
+
+            // Third
+            ul {
+              display: block;
+
+              // Third
+              li {
+                color: $font-color;
+
+                a {
+                  color: $font-color;
+                }
+
+                &:hover {
+                  color: $font-color-hover;
+
+                  a {
+                    color: $font-color-hover;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    &:last-of-type {
+      ul li ul {
+        right: 100%;
+        left: auto;
+      }
+    }
+  }
+}