From 9cd926a1e5586ad6248982ddd5ab04eb91f3ccde Mon Sep 17 00:00:00 2001
From: simongehrig <mail@simongehrig.de>
Date: Wed, 29 Mar 2017 12:14:21 +0200
Subject: [PATCH] Added Menu Mixins: Desktop vertical Desktop vertical
 Tablet/Phone Fullscreen Toggle Button

---
 .idea/deployment.xml                          |   7 +
 .idea/watcherTasks.xml                        |   2 +-
 examples/layout/image/cover/cover.html        |  63 +++++
 examples/layout/image/cover/cover.scss        |  21 ++
 .../layout/menus/vertical-open/vertical.css   | 219 ++++++++++++++++
 .../menus/vertical-open/vertical.css.map      |   1 +
 .../menus/vertical-open/vertical.css.tmp      | 219 ++++++++++++++++
 .../menus/vertical-open/vertical.css.tmp.map  |   7 +
 .../layout/menus/vertical-open/vertical.html  | 180 ++++++++++++++
 .../layout/menus/vertical-open/vertical.scss  |  26 ++
 .../menus/vertical-right-open/vertical.css    | 222 +++++++++++++++++
 .../vertical-right-open/vertical.css.map      |   1 +
 .../vertical-right-open/vertical.css.tmp      | 222 +++++++++++++++++
 .../vertical-right-open/vertical.css.tmp.map  |   7 +
 .../menus/vertical-right-open/vertical.html   | 180 ++++++++++++++
 .../menus/vertical-right-open/vertical.scss   |  27 ++
 .../layout/menus/vertical-right/vertical.css  | 235 ++++++++++++++++++
 .../layout/menus/vertical-right/vertical.html | 180 ++++++++++++++
 .../layout/menus/vertical-right/vertical.scss |  27 ++
 mixins/_mixins.scss                           |   1 +
 mixins/layout/image/_cover.scss               |  18 ++
 mixins/layout/menus/_00-menus.scss            |   7 +
 mixins/layout/menus/_vertical-open.scss       | 133 ++++++++++
 .../layout/menus/_vertical-right-desktop.scss | 134 ++++++++++
 mixins/layout/menus/_vertical-right-open.scss | 131 ++++++++++
 25 files changed, 2269 insertions(+), 1 deletion(-)
 create mode 100644 examples/layout/image/cover/cover.html
 create mode 100644 examples/layout/image/cover/cover.scss
 create mode 100644 examples/layout/menus/vertical-open/vertical.css
 create mode 100644 examples/layout/menus/vertical-open/vertical.css.map
 create mode 100644 examples/layout/menus/vertical-open/vertical.css.tmp
 create mode 100644 examples/layout/menus/vertical-open/vertical.css.tmp.map
 create mode 100644 examples/layout/menus/vertical-open/vertical.html
 create mode 100644 examples/layout/menus/vertical-open/vertical.scss
 create mode 100644 examples/layout/menus/vertical-right-open/vertical.css
 create mode 100644 examples/layout/menus/vertical-right-open/vertical.css.map
 create mode 100644 examples/layout/menus/vertical-right-open/vertical.css.tmp
 create mode 100644 examples/layout/menus/vertical-right-open/vertical.css.tmp.map
 create mode 100644 examples/layout/menus/vertical-right-open/vertical.html
 create mode 100644 examples/layout/menus/vertical-right-open/vertical.scss
 create mode 100644 examples/layout/menus/vertical-right/vertical.css
 create mode 100644 examples/layout/menus/vertical-right/vertical.html
 create mode 100644 examples/layout/menus/vertical-right/vertical.scss
 create mode 100644 mixins/layout/image/_cover.scss
 create mode 100644 mixins/layout/menus/_vertical-open.scss
 create mode 100644 mixins/layout/menus/_vertical-right-desktop.scss
 create mode 100644 mixins/layout/menus/_vertical-right-open.scss

diff --git a/.idea/deployment.xml b/.idea/deployment.xml
index aca1264..366185f 100644
--- a/.idea/deployment.xml
+++ b/.idea/deployment.xml
@@ -2,6 +2,13 @@
 <project version="4">
   <component name="PublishConfigData">
     <serverData>
+      <paths name="192.168.100.78">
+        <serverdata>
+          <mappings>
+            <mapping local="$PROJECT_DIR$" web="/" />
+          </mappings>
+        </serverdata>
+      </paths>
       <paths name="lisanahartl.de">
         <serverdata>
           <mappings>
diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
index ef75274..629b645 100644
--- a/.idea/watcherTasks.xml
+++ b/.idea/watcherTasks.xml
@@ -3,7 +3,7 @@
   <component name="ProjectTasksOptions">
     <TaskOptions isEnabled="true">
       <option name="arguments" value="--no-cache --update $FileName$:$FileNameWithoutExtension$.css.tmp" />
-      <option name="checkSyntaxErrors" value="true" />
+      <option name="checkSyntaxErrors" value="false" />
       <option name="description" value="Compiles .scss files into .css files" />
       <option name="exitCodeBehavior" value="ERROR" />
       <option name="fileExtension" value="scss" />
diff --git a/examples/layout/image/cover/cover.html b/examples/layout/image/cover/cover.html
new file mode 100644
index 0000000..bdb9829
--- /dev/null
+++ b/examples/layout/image/cover/cover.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Camera</title>
+    <link type="text/css"
+          rel="stylesheet"
+          href="./cover.css">
+</head>
+<body>
+<div class="content">
+    <div class="img-square">
+        <img src="http://lorempixel.com/300/400/city/1">
+    </div>
+    <div class="img-square">
+        <img src="http://lorempixel.com/400/300/city/2">
+    </div>
+    <div class="img-square">
+        <img src="http://lorempixel.com/700/400/city/3">
+    </div>
+    <div class="img-square">
+        <img src="http://lorempixel.com/400/700/city/4">
+    </div>
+</div>
+
+<div class="content">
+    <div class="img-round">
+        <img src="http://lorempixel.com/300/400/city/1">
+    </div>
+
+    <div class="img-round">
+        <img src="http://lorempixel.com/400/300/city/2">
+    </div>
+
+    <div class="img-round">
+        <img src="http://lorempixel.com/700/400/city/3">
+    </div>
+
+    <div class="img-round">
+        <img src="http://lorempixel.com/400/700/city/4">
+    </div>
+</div>
+
+<div class="content">
+    <div class="img-wrapper">
+        <img src="http://lorempixel.com/300/400/city/1">
+    </div>
+
+    <div class="img-wrapper">
+        <img src="http://lorempixel.com/400/300/city/2">
+    </div>
+
+    <div class="img-wrapper">
+        <img src="http://lorempixel.com/700/400/city/3">
+    </div>
+
+    <div class="img-wrapper">
+        <img src="http://lorempixel.com/400/700/city/4">
+    </div>
+</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/layout/image/cover/cover.scss b/examples/layout/image/cover/cover.scss
new file mode 100644
index 0000000..0c522fe
--- /dev/null
+++ b/examples/layout/image/cover/cover.scss
@@ -0,0 +1,21 @@
+@import "../../../../framework";
+
+.content {
+  .img-square {
+    width: 25%;
+    margin: 0 -4px 0 0 !important;
+
+    @include image-cover(0.75);
+  }
+
+  .img-round {
+    width: 25%;
+    margin-right: -4px !important;
+
+    @include image-cover(1);
+
+    img {
+      border-radius: 50%;
+    }
+  }
+}
\ No newline at end of file
diff --git a/examples/layout/menus/vertical-open/vertical.css b/examples/layout/menus/vertical-open/vertical.css
new file mode 100644
index 0000000..a5262dd
--- /dev/null
+++ b/examples/layout/menus/vertical-open/vertical.css
@@ -0,0 +1,219 @@
+/* Simons SCSS Framework */
+@CHARSET "ISO-8859-1";
+/* RESET
+
+  SOURCE:
+   http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline; }
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block; }
+
+ol, ul {
+  list-style: none; }
+
+blockquote, q {
+  quotes: none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none; }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0 !important; }
+
+body {
+  background-color: #d9ffd9;
+  font-family: Calibri, sans-serif; }
+  body .header #navcheck {
+    display: none;
+    /* tablet */ }
+    body .header #navcheck + .navbar {
+      display: none; }
+    @media (max-width: 979px) {
+      body .header #navcheck + .navbar {
+        position: fixed;
+        z-index: 10000;
+        display: block;
+        padding: 14.28571px;
+        background-color: #ffd9d9;
+        box-sizing: border-box; }
+        body .header #navcheck + .navbar span {
+          display: block;
+          margin-bottom: 14.28571px;
+          width: 71.42857px;
+          height: 14.28571px;
+          background-color: #806c80;
+          box-sizing: border-box; }
+          body .header #navcheck + .navbar span:last-of-type {
+            margin-bottom: 0; }
+        body .header #navcheck + .navbar + ul {
+          display: none; }
+      body .header #navcheck:checked + .navbar + ul {
+        /* Absolute Positioning */
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        padding-top: 100px;
+        list-style: none;
+        display: block;
+        table-layout: fixed;
+        width: 100%;
+        overflow: scroll;
+        background-color: #806c80; }
+        body .header #navcheck:checked + .navbar + ul li {
+          position: relative;
+          display: block;
+          background-color: #806c80;
+          color: #d9ffd9;
+          width: 100%;
+          text-transform: uppercase; }
+          body .header #navcheck:checked + .navbar + ul li a {
+            display: block;
+            padding: 20px;
+            width: 100%;
+            text-decoration: none;
+            color: #d9ffd9;
+            box-sizing: border-box; }
+          body .header #navcheck:checked + .navbar + ul li ul {
+            display: block;
+            position: relative;
+            width: 100%; }
+            body .header #navcheck:checked + .navbar + ul li ul li {
+              color: #d9ffd9;
+              text-transform: none; }
+              body .header #navcheck:checked + .navbar + ul li ul li a {
+                padding-left: 40px;
+                color: #d9ffd9; }
+              body .header #navcheck:checked + .navbar + ul li ul li ul {
+                position: relative;
+                display: block;
+                left: auto;
+                top: auto; }
+                body .header #navcheck:checked + .navbar + ul li ul li ul li {
+                  position: relative;
+                  color: #d9ffd9;
+                  font-weight: 300; }
+                  body .header #navcheck:checked + .navbar + ul li ul li ul li a {
+                    padding-left: 60px;
+                    color: #d9ffd9; }
+          body .header #navcheck:checked + .navbar + ul li:hover {
+            background-color: #ffd9d9;
+            color: #6c8080; }
+            body .header #navcheck:checked + .navbar + ul li:hover a {
+              color: #6c8080; }
+            body .header #navcheck:checked + .navbar + ul li:hover ul {
+              display: block; }
+              body .header #navcheck:checked + .navbar + ul li:hover ul li {
+                display: block;
+                color: #d9ffd9; }
+                body .header #navcheck:checked + .navbar + ul li:hover ul li a {
+                  color: #d9ffd9; }
+                body .header #navcheck:checked + .navbar + ul li:hover ul li ul {
+                  display: block; }
+                body .header #navcheck:checked + .navbar + ul li:hover ul li:hover {
+                  color: #6c8080; }
+                  body .header #navcheck:checked + .navbar + ul li:hover ul li:hover a {
+                    color: #6c8080; }
+                  body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul {
+                    display: block; }
+                    body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li {
+                      color: #d9ffd9; }
+                      body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li a {
+                        color: #d9ffd9; }
+                      body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover {
+                        color: #6c8080; }
+                        body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover a {
+                          color: #6c8080; }
+          body .header #navcheck:checked + .navbar + ul li:last-of-type ul li ul {
+            right: auto;
+            left: auto; } }
+  body .header .nav {
+    font-weight: 700;
+    letter-spacing: 1px;
+    font-size: 20px;
+    position: relative;
+    list-style: none;
+    display: block;
+    width: 200px;
+    background-color: #806c80;
+    position: fixed;
+    top: 0;
+    bottom: 0; }
+    body .header .nav li {
+      position: relative;
+      display: block;
+      background-color: #806c80;
+      color: #d9ffd9;
+      width: auto; }
+      body .header .nav li a {
+        display: block;
+        padding: 20px;
+        width: 100%;
+        text-decoration: none;
+        color: #d9ffd9;
+        box-sizing: border-box; }
+      body .header .nav li ul {
+        width: 100%; }
+        body .header .nav li ul li {
+          color: #d9ffd9; }
+          body .header .nav li ul li a {
+            color: #d9ffd9; }
+          body .header .nav li ul li ul li {
+            position: relative;
+            color: #d9ffd9; }
+            body .header .nav li ul li ul li a {
+              color: #d9ffd9; }
+      body .header .nav li:hover {
+        background-color: #ffd9d9;
+        color: #6c8080; }
+        body .header .nav li:hover a {
+          color: #6c8080; }
+        body .header .nav li:hover ul li {
+          color: #d9ffd9; }
+          body .header .nav li:hover ul li a {
+            color: #d9ffd9; }
+          body .header .nav li:hover ul li:hover {
+            color: #6c8080; }
+            body .header .nav li:hover ul li:hover a {
+              color: #6c8080; }
+            body .header .nav li:hover ul li:hover ul {
+              display: block; }
+              body .header .nav li:hover ul li:hover ul li {
+                color: #d9ffd9; }
+                body .header .nav li:hover ul li:hover ul li a {
+                  color: #d9ffd9; }
+                body .header .nav li:hover ul li:hover ul li:hover {
+                  color: #6c8080; }
+                  body .header .nav li:hover ul li:hover ul li:hover a {
+                    color: #6c8080; }
+
+/*# sourceMappingURL=vertical.css.map */
\ No newline at end of file
diff --git a/examples/layout/menus/vertical-open/vertical.css.map b/examples/layout/menus/vertical-open/vertical.css.map
new file mode 100644
index 0000000..061167d
--- /dev/null
+++ b/examples/layout/menus/vertical-open/vertical.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../_framework.scss","../../../../mixins/css/_reset.scss","vertical.scss","../../../../mixins/layout/menus/_toggle.scss","../../../../mixins/queries/_media-queries.scss","../../../../mixins/layout/_position.scss","../../../../mixins/layout/menus/_fullscreen-phone.scss","../../../../mixins/layout/menus/_vertical-open.scss"],"names":[],"mappings":"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","file":"vertical.css"}
\ No newline at end of file
diff --git a/examples/layout/menus/vertical-open/vertical.css.tmp b/examples/layout/menus/vertical-open/vertical.css.tmp
new file mode 100644
index 0000000..331dc24
--- /dev/null
+++ b/examples/layout/menus/vertical-open/vertical.css.tmp
@@ -0,0 +1,219 @@
+/* Simons SCSS Framework */
+@CHARSET "ISO-8859-1";
+/* RESET
+
+  SOURCE:
+   http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline; }
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block; }
+
+ol, ul {
+  list-style: none; }
+
+blockquote, q {
+  quotes: none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none; }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0 !important; }
+
+body {
+  background-color: #d9ffd9;
+  font-family: Calibri, sans-serif; }
+  body .header #navcheck {
+    display: none;
+    /* tablet */ }
+    body .header #navcheck + .navbar {
+      display: none; }
+    @media (max-width: 979px) {
+      body .header #navcheck + .navbar {
+        position: fixed;
+        z-index: 10000;
+        display: block;
+        padding: 14.28571px;
+        background-color: #ffd9d9;
+        box-sizing: border-box; }
+        body .header #navcheck + .navbar span {
+          display: block;
+          margin-bottom: 14.28571px;
+          width: 71.42857px;
+          height: 14.28571px;
+          background-color: #806c80;
+          box-sizing: border-box; }
+          body .header #navcheck + .navbar span:last-of-type {
+            margin-bottom: 0; }
+        body .header #navcheck + .navbar + ul {
+          display: none; }
+      body .header #navcheck:checked + .navbar + ul {
+        /* Absolute Positioning */
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        padding-top: 100px;
+        list-style: none;
+        display: block;
+        table-layout: fixed;
+        width: 100%;
+        overflow: scroll;
+        background-color: #806c80; }
+        body .header #navcheck:checked + .navbar + ul li {
+          position: relative;
+          display: block;
+          background-color: #806c80;
+          color: #d9ffd9;
+          width: 100%;
+          text-transform: uppercase; }
+          body .header #navcheck:checked + .navbar + ul li a {
+            display: block;
+            padding: 20px;
+            width: 100%;
+            text-decoration: none;
+            color: #d9ffd9;
+            box-sizing: border-box; }
+          body .header #navcheck:checked + .navbar + ul li ul {
+            display: block;
+            position: relative;
+            width: 100%; }
+            body .header #navcheck:checked + .navbar + ul li ul li {
+              color: #d9ffd9;
+              text-transform: none; }
+              body .header #navcheck:checked + .navbar + ul li ul li a {
+                padding-left: 40px;
+                color: #d9ffd9; }
+              body .header #navcheck:checked + .navbar + ul li ul li ul {
+                position: relative;
+                display: block;
+                left: auto;
+                top: auto; }
+                body .header #navcheck:checked + .navbar + ul li ul li ul li {
+                  position: relative;
+                  color: #d9ffd9;
+                  font-weight: 300; }
+                  body .header #navcheck:checked + .navbar + ul li ul li ul li a {
+                    padding-left: 60px;
+                    color: #d9ffd9; }
+          body .header #navcheck:checked + .navbar + ul li:hover {
+            background-color: #ffd9d9;
+            color: #6c8080; }
+            body .header #navcheck:checked + .navbar + ul li:hover a {
+              color: #6c8080; }
+            body .header #navcheck:checked + .navbar + ul li:hover ul {
+              display: block; }
+              body .header #navcheck:checked + .navbar + ul li:hover ul li {
+                display: block;
+                color: #d9ffd9; }
+                body .header #navcheck:checked + .navbar + ul li:hover ul li a {
+                  color: #d9ffd9; }
+                body .header #navcheck:checked + .navbar + ul li:hover ul li ul {
+                  display: block; }
+                body .header #navcheck:checked + .navbar + ul li:hover ul li:hover {
+                  color: #6c8080; }
+                  body .header #navcheck:checked + .navbar + ul li:hover ul li:hover a {
+                    color: #6c8080; }
+                  body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul {
+                    display: block; }
+                    body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li {
+                      color: #d9ffd9; }
+                      body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li a {
+                        color: #d9ffd9; }
+                      body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover {
+                        color: #6c8080; }
+                        body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover a {
+                          color: #6c8080; }
+          body .header #navcheck:checked + .navbar + ul li:last-of-type ul li ul {
+            right: auto;
+            left: auto; } }
+  body .header .nav {
+    font-weight: 700;
+    letter-spacing: 1px;
+    font-size: 20px;
+    position: relative;
+    list-style: none;
+    display: block;
+    width: 200px;
+    background-color: #806c80;
+    position: fixed;
+    top: 0;
+    bottom: 0; }
+    body .header .nav li {
+      position: relative;
+      display: block;
+      background-color: #806c80;
+      color: #d9ffd9;
+      width: auto; }
+      body .header .nav li a {
+        display: block;
+        padding: 20px;
+        width: 100%;
+        text-decoration: none;
+        color: #d9ffd9;
+        box-sizing: border-box; }
+      body .header .nav li ul {
+        width: 100%; }
+        body .header .nav li ul li {
+          color: #d9ffd9; }
+          body .header .nav li ul li a {
+            color: #d9ffd9; }
+          body .header .nav li ul li ul li {
+            position: relative;
+            color: #d9ffd9; }
+            body .header .nav li ul li ul li a {
+              color: #d9ffd9; }
+      body .header .nav li:hover {
+        background-color: #ffd9d9;
+        color: #6c8080; }
+        body .header .nav li:hover a {
+          color: #6c8080; }
+        body .header .nav li:hover ul li {
+          color: #d9ffd9; }
+          body .header .nav li:hover ul li a {
+            color: #d9ffd9; }
+          body .header .nav li:hover ul li:hover {
+            color: #6c8080; }
+            body .header .nav li:hover ul li:hover a {
+              color: #6c8080; }
+            body .header .nav li:hover ul li:hover ul {
+              display: block; }
+              body .header .nav li:hover ul li:hover ul li {
+                color: #d9ffd9; }
+                body .header .nav li:hover ul li:hover ul li a {
+                  color: #d9ffd9; }
+                body .header .nav li:hover ul li:hover ul li:hover {
+                  color: #6c8080; }
+                  body .header .nav li:hover ul li:hover ul li:hover a {
+                    color: #6c8080; }
+
+/*# sourceMappingURL=vertical.css.tmp.map */
diff --git a/examples/layout/menus/vertical-open/vertical.css.tmp.map b/examples/layout/menus/vertical-open/vertical.css.tmp.map
new file mode 100644
index 0000000..4de72c9
--- /dev/null
+++ b/examples/layout/menus/vertical-open/vertical.css.tmp.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AACA,2BAA2B;ACD3B,qBAAqB;AAErB;;;;;;;EAOE;AAEF;;;;;;;;;;;;wBAYyB;EACvB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;EACT,SAAS,EAAE,IAAI;EACf,IAAI,EAAE,OAAO;EACb,cAAc,EAAE,QAAQ;;AAG1B,iDAAiD;AACjD;0CAC2C;EACzC,OAAO,EAAE,KAAK;;AAGhB,MAAO;EACL,UAAU,EAAE,IAAI;;AAGlB,aAAc;EACZ,MAAM,EAAE,IAAI;;AAGd;iBACkB;EAChB,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,IAAI;;AAGf,KAAM;EACJ,eAAe,EAAE,QAAQ;EACzB,cAAc,EAAE,YAAY;;ACpD9B,IAAK;EACH,gBAAgB,EAAE,OAAO;EACzB,WAAW,EAAE,mBAAmB;EAK9B,sBAAU;ICHZ,OAAO,EAAE,IAAI;IC0Bb,YAAY;IDxBZ,gCAAU;MACR,OAAO,EAAE,IAAI;IC0Db,yBAAiC;MDrDjC,gCAAU;QACR,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,KAAK;QACd,OAAO,EAAE,KAAK;QACd,OAAO,EAAE,UAAO;QAChB,gBAAgB,EDTc,OAAO;QCUrC,UAAU,EAAE,UAAU;QAEtB,qCAAK;UACH,OAAO,EAAE,KAAK;UACd,aAAa,EAAE,UAAO;UACtB,KAAK,EAAE,UAAW;UAClB,MAAM,EAAE,UAAO;UACf,gBAAgB,EDjBqB,OAAO;UCkB5C,UAAU,EAAE,UAAU;UACtB,kDAAe;YACb,aAAa,EAAE,CAAC;QAMpB,qCAAK;UACH,OAAO,EAAE,IAAI;MASb,6CAAK;QE7CX,0BAA0B;QAC1B,QAAQ,EAAE,QAAQ;QAClB,GAAG,EAHqB,CAAC;QAIzB,KAAK,EAJ4B,CAAC;QAKlC,MAAM,EALqC,CAAC;QAM5C,IAAI,EAN+C,CAAC;QCWpD,WAAW,EJA0B,KAAK;QIC1C,UAAU,EAAE,IAAI;QAChB,OAAO,EAAE,KAAK;QACd,YAAY,EAAE,KAAK;QACnB,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,MAAM;QAChB,gBAAgB,EJNkC,OAAO;QISzD,gDAAG;UACD,QAAQ,EAAE,QAAQ;UAClB,OAAO,EAAE,KAAK;UACd,gBAAgB,EJZgC,OAAO;UIavD,KAAK,EJb6D,OAAO;UIczE,KAAK,EAAE,IAAI;UACX,cAAc,EAAE,SAAS;UAGzB,kDAAE;YACA,OAAO,EAAE,KAAK;YACd,OAAO,EJpBiC,IAAI;YIqB5C,KAAK,EAAE,IAAI;YACX,eAAe,EAAE,IAAI;YACrB,KAAK,EJvB2D,OAAO;YIwBvE,UAAU,EAAE,UAAU;UAIxB,mDAAG;YACD,OAAO,EAAE,KAAK;YACd,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,IAAI;YAGX,sDAAG;cACD,KAAK,EJnCyD,OAAO;cIoCrE,cAAc,EAAE,IAAI;cACpB,wDAAE;gBACA,YAAY,EAAE,IAAU;gBACxB,KAAK,EJvCuD,OAAO;cI2CrE,yDAAG;gBACD,QAAQ,EAAE,QAAQ;gBAClB,OAAO,EAAE,KAAK;gBACd,IAAI,EAAE,IAAI;gBACV,GAAG,EAAE,IAAI;gBAGT,4DAAG;kBACD,QAAQ,EAAE,QAAQ;kBAClB,KAAK,EJpDqD,OAAO;kBIqDjE,WAAW,EAAE,GAAG;kBAEhB,8DAAE;oBACA,YAAY,EAAE,IAAU;oBACxB,KAAK,EJzDmD,OAAO;UIiEzE,sDAAQ;YACN,gBAAgB,EJlEuC,OAAO;YImE9D,KAAK,EJnEoE,OAAO;YIsEhF,wDAAE;cACA,KAAK,EJvEkE,OAAO;YI2EhF,yDAAG;cACD,OAAO,EAAE,KAAK;cAGd,4DAAG;gBACD,OAAO,EAAE,KAAK;gBACd,KAAK,EJjFuD,OAAO;gBImFnE,8DAAE;kBACA,KAAK,EJpFqD,OAAO;gBIuFnE,+DAAG;kBACD,OAAO,EAAE,KAAK;gBAShB,kEAAQ;kBACN,KAAK,EJlG8D,OAAO;kBIoG1E,oEAAE;oBACA,KAAK,EJrG4D,OAAO;kBIyG1E,qEAAG;oBACD,OAAO,EAAE,KAAK;oBAGd,wEAAG;sBACD,KAAK,EJ9GiD,OAAO;sBIgH7D,0EAAE;wBACA,KAAK,EJjH+C,OAAO;sBIoH7D,8EAAQ;wBACN,KAAK,EJrHwD,OAAO;wBIuHpE,gFAAE;0BACA,KAAK,EJxHsD,OAAO;UIkIhF,sEAAS;YACP,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,IAAI;EJhId,iBAAK;IACH,WAAW,EAAE,GAAG;IAChB,cAAc,EAAE,GAAG;IACnB,SAAS,EAAE,IAAI;IKTnB,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,KAAK;IACd,KAAK,ELOiC,KAAK;IKN3C,gBAAgB,ELM6B,OAAO;IAChD,QAAQ,EAAE,KAAK;IACf,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,CAAC;IKNb,oBAAG;MACD,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,KAAK;MACd,gBAAgB,ELA2B,OAAO;MKClD,KAAK,ELDwD,OAAO;MKEpE,KAAK,EAAE,IAAI;MAEX,sBAAE;QACA,OAAO,EAAE,KAAK;QACd,OAAO,ELNqB,IAAI;QKOhC,KAAK,EAAE,IAAI;QACX,eAAe,EAAE,IAAI;QACrB,KAAK,ELTsD,OAAO;QKUlE,UAAU,EAAE,UAAU;MAIxB,uBAAG;QAGD,KAAK,EAAE,IAAI;QAKX,0BAAG;UACD,KAAK,ELvBoD,OAAO;UKwBhE,4BAAE;YACA,KAAK,ELzBkD,OAAO;UKoC9D,gCAAG;YACD,QAAQ,EAAE,QAAQ;YAClB,KAAK,ELtCgD,OAAO;YKwC5D,kCAAE;cACA,KAAK,ELzC8C,OAAO;MKiDpE,0BAAQ;QACN,gBAAgB,ELlDkC,OAAO;QKmDzD,KAAK,ELnD+D,OAAO;QKqD3E,4BAAE;UACA,KAAK,ELtD6D,OAAO;QK8DzE,gCAAG;UAED,KAAK,ELhEkD,OAAO;UKkE9D,kCAAE;YACA,KAAK,ELnEgD,OAAO;UKgF9D,sCAAQ;YACN,KAAK,ELjFyD,OAAO;YKmFrE,wCAAE;cACA,KAAK,ELpFuD,OAAO;YKwFrE,yCAAG;cACD,OAAO,EAAE,KAAK;cAGd,4CAAG;gBACD,KAAK,EL7F4C,OAAO;gBK+FxD,8CAAE;kBACA,KAAK,ELhG0C,OAAO;gBKmGxD,kDAAQ;kBACN,KAAK,ELpGmD,OAAO;kBKsG/D,oDAAE;oBACA,KAAK,ELvGiD,OAAO",
+"sources": ["../../../../_framework.scss","../../../../mixins/css/_reset.scss","vertical.scss","../../../../mixins/layout/menus/_toggle.scss","../../../../mixins/queries/_media-queries.scss","../../../../mixins/layout/_position.scss","../../../../mixins/layout/menus/_fullscreen-phone.scss","../../../../mixins/layout/menus/_vertical-open.scss"],
+"names": [],
+"file": "vertical.css.tmp"
+}
\ No newline at end of file
diff --git a/examples/layout/menus/vertical-open/vertical.html b/examples/layout/menus/vertical-open/vertical.html
new file mode 100644
index 0000000..742df2e
--- /dev/null
+++ b/examples/layout/menus/vertical-open/vertical.html
@@ -0,0 +1,180 @@
+<head>
+    <link rel="stylesheet" type="text/css" href="vertical.css">
+</head>
+<body>
+<div class="header">
+
+    <input id="navcheck" type="checkbox" name="menu">
+
+    <label class="navbar" for="navcheck">
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+    </label>
+
+    <ul class="nav">
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+</div>
+<div class="content"></div>
+</body>
\ No newline at end of file
diff --git a/examples/layout/menus/vertical-open/vertical.scss b/examples/layout/menus/vertical-open/vertical.scss
new file mode 100644
index 0000000..4562d8d
--- /dev/null
+++ b/examples/layout/menus/vertical-open/vertical.scss
@@ -0,0 +1,26 @@
+@import "../../../../framework";
+
+body {
+  background-color: #d9ffd9;
+  font-family: Calibri, sans-serif;
+
+  .header {
+    //transform: rotate(-1deg);
+
+    #navcheck {
+      @include toggle-tablet(100px, #ffd9d9, #806c80) {
+        @include menu-fullscreen-phone(100px, 20px, #806c80, #ffd9d9, #d9ffd9, #6c8080)
+      }
+    }
+
+    .nav {
+      font-weight: 700;
+      letter-spacing: 1px;
+      font-size: 20px;
+      @include menu-vertical-open(20px, 200px, #806c80, #ffd9d9, #d9ffd9, #6c8080);
+      position: fixed;
+      top: 0;
+      bottom: 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/examples/layout/menus/vertical-right-open/vertical.css b/examples/layout/menus/vertical-right-open/vertical.css
new file mode 100644
index 0000000..1e55803
--- /dev/null
+++ b/examples/layout/menus/vertical-right-open/vertical.css
@@ -0,0 +1,222 @@
+/* Simons SCSS Framework */
+@CHARSET "ISO-8859-1";
+/* RESET
+
+  SOURCE:
+   http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline; }
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block; }
+
+ol, ul {
+  list-style: none; }
+
+blockquote, q {
+  quotes: none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none; }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0 !important; }
+
+body {
+  background-color: #d9ffd9;
+  font-family: Calibri, sans-serif; }
+  body .header #navcheck {
+    display: none;
+    /* tablet */ }
+    body .header #navcheck + .navbar {
+      display: none; }
+    @media (max-width: 979px) {
+      body .header #navcheck + .navbar {
+        position: fixed;
+        z-index: 10000;
+        display: block;
+        padding: 14.28571px;
+        background-color: #ffd9d9;
+        box-sizing: border-box; }
+        body .header #navcheck + .navbar span {
+          display: block;
+          margin-bottom: 14.28571px;
+          width: 71.42857px;
+          height: 14.28571px;
+          background-color: #806c80;
+          box-sizing: border-box; }
+          body .header #navcheck + .navbar span:last-of-type {
+            margin-bottom: 0; }
+        body .header #navcheck + .navbar + ul {
+          display: none; }
+      body .header #navcheck:checked + .navbar + ul {
+        /* Absolute Positioning */
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        padding-top: 100px;
+        list-style: none;
+        display: block;
+        table-layout: fixed;
+        width: 100%;
+        overflow: scroll;
+        background-color: #806c80; }
+        body .header #navcheck:checked + .navbar + ul li {
+          position: relative;
+          display: block;
+          background-color: #806c80;
+          color: #d9ffd9;
+          width: 100%;
+          text-transform: uppercase; }
+          body .header #navcheck:checked + .navbar + ul li a {
+            display: block;
+            padding: 20px;
+            width: 100%;
+            text-decoration: none;
+            color: #d9ffd9;
+            box-sizing: border-box; }
+          body .header #navcheck:checked + .navbar + ul li ul {
+            display: block;
+            position: relative;
+            width: 100%; }
+            body .header #navcheck:checked + .navbar + ul li ul li {
+              color: #d9ffd9;
+              text-transform: none; }
+              body .header #navcheck:checked + .navbar + ul li ul li a {
+                padding-left: 40px;
+                color: #d9ffd9; }
+              body .header #navcheck:checked + .navbar + ul li ul li ul {
+                position: relative;
+                display: block;
+                left: auto;
+                top: auto; }
+                body .header #navcheck:checked + .navbar + ul li ul li ul li {
+                  position: relative;
+                  color: #d9ffd9;
+                  font-weight: 300; }
+                  body .header #navcheck:checked + .navbar + ul li ul li ul li a {
+                    padding-left: 60px;
+                    color: #d9ffd9; }
+          body .header #navcheck:checked + .navbar + ul li:hover {
+            background-color: #ffd9d9;
+            color: #6c8080; }
+            body .header #navcheck:checked + .navbar + ul li:hover a {
+              color: #6c8080; }
+            body .header #navcheck:checked + .navbar + ul li:hover ul {
+              display: block; }
+              body .header #navcheck:checked + .navbar + ul li:hover ul li {
+                display: block;
+                color: #d9ffd9; }
+                body .header #navcheck:checked + .navbar + ul li:hover ul li a {
+                  color: #d9ffd9; }
+                body .header #navcheck:checked + .navbar + ul li:hover ul li ul {
+                  display: block; }
+                body .header #navcheck:checked + .navbar + ul li:hover ul li:hover {
+                  color: #6c8080; }
+                  body .header #navcheck:checked + .navbar + ul li:hover ul li:hover a {
+                    color: #6c8080; }
+                  body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul {
+                    display: block; }
+                    body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li {
+                      color: #d9ffd9; }
+                      body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li a {
+                        color: #d9ffd9; }
+                      body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover {
+                        color: #6c8080; }
+                        body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover a {
+                          color: #6c8080; }
+          body .header #navcheck:checked + .navbar + ul li:last-of-type ul li ul {
+            right: auto;
+            left: auto; } }
+  body .header .nav {
+    font-weight: 700;
+    letter-spacing: 1px;
+    font-size: 20px;
+    position: relative;
+    list-style: none;
+    text-align: right;
+    display: block;
+    width: 200px;
+    background-color: #806c80;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0; }
+    body .header .nav li {
+      position: relative;
+      display: block;
+      background-color: #806c80;
+      color: #d9ffd9;
+      width: auto; }
+      body .header .nav li a {
+        display: block;
+        padding: 20px;
+        width: 100%;
+        text-decoration: none;
+        color: #d9ffd9;
+        box-sizing: border-box; }
+      body .header .nav li ul {
+        width: 100%;
+        padding-right: 20px; }
+        body .header .nav li ul li {
+          color: #d9ffd9; }
+          body .header .nav li ul li a {
+            color: #d9ffd9; }
+          body .header .nav li ul li ul li {
+            position: relative;
+            color: #d9ffd9; }
+            body .header .nav li ul li ul li a {
+              color: #d9ffd9; }
+      body .header .nav li:hover {
+        background-color: #ffd9d9;
+        color: #6c8080; }
+        body .header .nav li:hover a {
+          color: #6c8080; }
+        body .header .nav li:hover ul li {
+          color: #d9ffd9; }
+          body .header .nav li:hover ul li a {
+            color: #d9ffd9; }
+          body .header .nav li:hover ul li:hover {
+            color: #6c8080; }
+            body .header .nav li:hover ul li:hover a {
+              color: #6c8080; }
+            body .header .nav li:hover ul li:hover ul {
+              display: block; }
+              body .header .nav li:hover ul li:hover ul li {
+                color: #d9ffd9; }
+                body .header .nav li:hover ul li:hover ul li a {
+                  color: #d9ffd9; }
+                body .header .nav li:hover ul li:hover ul li:hover {
+                  color: #6c8080; }
+                  body .header .nav li:hover ul li:hover ul li:hover a {
+                    color: #6c8080; }
+
+/*# sourceMappingURL=vertical.css.map */
\ No newline at end of file
diff --git a/examples/layout/menus/vertical-right-open/vertical.css.map b/examples/layout/menus/vertical-right-open/vertical.css.map
new file mode 100644
index 0000000..1ec6c75
--- /dev/null
+++ b/examples/layout/menus/vertical-right-open/vertical.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../_framework.scss","../../../../mixins/css/_reset.scss","vertical.scss","../../../../mixins/layout/menus/_toggle.scss","../../../../mixins/queries/_media-queries.scss","../../../../mixins/layout/_position.scss","../../../../mixins/layout/menus/_fullscreen-phone.scss","../../../../mixins/layout/menus/_vertical-right-open.scss"],"names":[],"mappings":"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","file":"vertical.css"}
\ No newline at end of file
diff --git a/examples/layout/menus/vertical-right-open/vertical.css.tmp b/examples/layout/menus/vertical-right-open/vertical.css.tmp
new file mode 100644
index 0000000..d774bec
--- /dev/null
+++ b/examples/layout/menus/vertical-right-open/vertical.css.tmp
@@ -0,0 +1,222 @@
+/* Simons SCSS Framework */
+@CHARSET "ISO-8859-1";
+/* RESET
+
+  SOURCE:
+   http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline; }
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block; }
+
+ol, ul {
+  list-style: none; }
+
+blockquote, q {
+  quotes: none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none; }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0 !important; }
+
+body {
+  background-color: #d9ffd9;
+  font-family: Calibri, sans-serif; }
+  body .header #navcheck {
+    display: none;
+    /* tablet */ }
+    body .header #navcheck + .navbar {
+      display: none; }
+    @media (max-width: 979px) {
+      body .header #navcheck + .navbar {
+        position: fixed;
+        z-index: 10000;
+        display: block;
+        padding: 14.28571px;
+        background-color: #ffd9d9;
+        box-sizing: border-box; }
+        body .header #navcheck + .navbar span {
+          display: block;
+          margin-bottom: 14.28571px;
+          width: 71.42857px;
+          height: 14.28571px;
+          background-color: #806c80;
+          box-sizing: border-box; }
+          body .header #navcheck + .navbar span:last-of-type {
+            margin-bottom: 0; }
+        body .header #navcheck + .navbar + ul {
+          display: none; }
+      body .header #navcheck:checked + .navbar + ul {
+        /* Absolute Positioning */
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        padding-top: 100px;
+        list-style: none;
+        display: block;
+        table-layout: fixed;
+        width: 100%;
+        overflow: scroll;
+        background-color: #806c80; }
+        body .header #navcheck:checked + .navbar + ul li {
+          position: relative;
+          display: block;
+          background-color: #806c80;
+          color: #d9ffd9;
+          width: 100%;
+          text-transform: uppercase; }
+          body .header #navcheck:checked + .navbar + ul li a {
+            display: block;
+            padding: 20px;
+            width: 100%;
+            text-decoration: none;
+            color: #d9ffd9;
+            box-sizing: border-box; }
+          body .header #navcheck:checked + .navbar + ul li ul {
+            display: block;
+            position: relative;
+            width: 100%; }
+            body .header #navcheck:checked + .navbar + ul li ul li {
+              color: #d9ffd9;
+              text-transform: none; }
+              body .header #navcheck:checked + .navbar + ul li ul li a {
+                padding-left: 40px;
+                color: #d9ffd9; }
+              body .header #navcheck:checked + .navbar + ul li ul li ul {
+                position: relative;
+                display: block;
+                left: auto;
+                top: auto; }
+                body .header #navcheck:checked + .navbar + ul li ul li ul li {
+                  position: relative;
+                  color: #d9ffd9;
+                  font-weight: 300; }
+                  body .header #navcheck:checked + .navbar + ul li ul li ul li a {
+                    padding-left: 60px;
+                    color: #d9ffd9; }
+          body .header #navcheck:checked + .navbar + ul li:hover {
+            background-color: #ffd9d9;
+            color: #6c8080; }
+            body .header #navcheck:checked + .navbar + ul li:hover a {
+              color: #6c8080; }
+            body .header #navcheck:checked + .navbar + ul li:hover ul {
+              display: block; }
+              body .header #navcheck:checked + .navbar + ul li:hover ul li {
+                display: block;
+                color: #d9ffd9; }
+                body .header #navcheck:checked + .navbar + ul li:hover ul li a {
+                  color: #d9ffd9; }
+                body .header #navcheck:checked + .navbar + ul li:hover ul li ul {
+                  display: block; }
+                body .header #navcheck:checked + .navbar + ul li:hover ul li:hover {
+                  color: #6c8080; }
+                  body .header #navcheck:checked + .navbar + ul li:hover ul li:hover a {
+                    color: #6c8080; }
+                  body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul {
+                    display: block; }
+                    body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li {
+                      color: #d9ffd9; }
+                      body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li a {
+                        color: #d9ffd9; }
+                      body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover {
+                        color: #6c8080; }
+                        body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover a {
+                          color: #6c8080; }
+          body .header #navcheck:checked + .navbar + ul li:last-of-type ul li ul {
+            right: auto;
+            left: auto; } }
+  body .header .nav {
+    font-weight: 700;
+    letter-spacing: 1px;
+    font-size: 20px;
+    position: relative;
+    list-style: none;
+    text-align: right;
+    display: block;
+    width: 200px;
+    background-color: #806c80;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0; }
+    body .header .nav li {
+      position: relative;
+      display: block;
+      background-color: #806c80;
+      color: #d9ffd9;
+      width: auto; }
+      body .header .nav li a {
+        display: block;
+        padding: 20px;
+        width: 100%;
+        text-decoration: none;
+        color: #d9ffd9;
+        box-sizing: border-box; }
+      body .header .nav li ul {
+        width: 100%;
+        padding-right: 20px; }
+        body .header .nav li ul li {
+          color: #d9ffd9; }
+          body .header .nav li ul li a {
+            color: #d9ffd9; }
+          body .header .nav li ul li ul li {
+            position: relative;
+            color: #d9ffd9; }
+            body .header .nav li ul li ul li a {
+              color: #d9ffd9; }
+      body .header .nav li:hover {
+        background-color: #ffd9d9;
+        color: #6c8080; }
+        body .header .nav li:hover a {
+          color: #6c8080; }
+        body .header .nav li:hover ul li {
+          color: #d9ffd9; }
+          body .header .nav li:hover ul li a {
+            color: #d9ffd9; }
+          body .header .nav li:hover ul li:hover {
+            color: #6c8080; }
+            body .header .nav li:hover ul li:hover a {
+              color: #6c8080; }
+            body .header .nav li:hover ul li:hover ul {
+              display: block; }
+              body .header .nav li:hover ul li:hover ul li {
+                color: #d9ffd9; }
+                body .header .nav li:hover ul li:hover ul li a {
+                  color: #d9ffd9; }
+                body .header .nav li:hover ul li:hover ul li:hover {
+                  color: #6c8080; }
+                  body .header .nav li:hover ul li:hover ul li:hover a {
+                    color: #6c8080; }
+
+/*# sourceMappingURL=vertical.css.tmp.map */
diff --git a/examples/layout/menus/vertical-right-open/vertical.css.tmp.map b/examples/layout/menus/vertical-right-open/vertical.css.tmp.map
new file mode 100644
index 0000000..6d2eb2f
--- /dev/null
+++ b/examples/layout/menus/vertical-right-open/vertical.css.tmp.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "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",
+"sources": ["../../../../_framework.scss","../../../../mixins/css/_reset.scss","vertical.scss","../../../../mixins/layout/menus/_toggle.scss","../../../../mixins/queries/_media-queries.scss","../../../../mixins/layout/_position.scss","../../../../mixins/layout/menus/_fullscreen-phone.scss","../../../../mixins/layout/menus/_vertical-right-open.scss"],
+"names": [],
+"file": "vertical.css.tmp"
+}
\ No newline at end of file
diff --git a/examples/layout/menus/vertical-right-open/vertical.html b/examples/layout/menus/vertical-right-open/vertical.html
new file mode 100644
index 0000000..742df2e
--- /dev/null
+++ b/examples/layout/menus/vertical-right-open/vertical.html
@@ -0,0 +1,180 @@
+<head>
+    <link rel="stylesheet" type="text/css" href="vertical.css">
+</head>
+<body>
+<div class="header">
+
+    <input id="navcheck" type="checkbox" name="menu">
+
+    <label class="navbar" for="navcheck">
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+    </label>
+
+    <ul class="nav">
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+</div>
+<div class="content"></div>
+</body>
\ No newline at end of file
diff --git a/examples/layout/menus/vertical-right-open/vertical.scss b/examples/layout/menus/vertical-right-open/vertical.scss
new file mode 100644
index 0000000..bd3840b
--- /dev/null
+++ b/examples/layout/menus/vertical-right-open/vertical.scss
@@ -0,0 +1,27 @@
+@import "../../../../framework";
+
+body {
+  background-color: #d9ffd9;
+  font-family: Calibri, sans-serif;
+
+  .header {
+    //transform: rotate(-1deg);
+
+    #navcheck {
+      @include toggle-tablet(100px, #ffd9d9, #806c80) {
+        @include menu-fullscreen-phone(100px, 20px, #806c80, #ffd9d9, #d9ffd9, #6c8080)
+      }
+    }
+
+    .nav {
+      font-weight: 700;
+      letter-spacing: 1px;
+      font-size: 20px;
+      @include menu-vertical-right-open(20px, 200px, #806c80, #ffd9d9, #d9ffd9, #6c8080);
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      right: 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/examples/layout/menus/vertical-right/vertical.css b/examples/layout/menus/vertical-right/vertical.css
new file mode 100644
index 0000000..a84ffb2
--- /dev/null
+++ b/examples/layout/menus/vertical-right/vertical.css
@@ -0,0 +1,235 @@
+/* Simons SCSS Framework */
+@CHARSET "ISO-8859-1";
+/* RESET
+
+  SOURCE:
+   http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline; }
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block; }
+
+ol, ul {
+  list-style: none; }
+
+blockquote, q {
+  quotes: none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none; }
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0 !important; }
+
+body {
+  background-color: #d9ffd9;
+  font-family: Calibri, sans-serif; }
+  body .header #navcheck {
+    display: none;
+    /* tablet */ }
+    body .header #navcheck + .navbar {
+      display: none; }
+    @media (max-width: 979px) {
+      body .header #navcheck + .navbar {
+        position: fixed;
+        z-index: 10000;
+        display: block;
+        padding: 14.28571px;
+        background-color: #ffd9d9;
+        box-sizing: border-box; }
+        body .header #navcheck + .navbar span {
+          display: block;
+          margin-bottom: 14.28571px;
+          width: 71.42857px;
+          height: 14.28571px;
+          background-color: #806c80;
+          box-sizing: border-box; }
+          body .header #navcheck + .navbar span:last-of-type {
+            margin-bottom: 0; }
+        body .header #navcheck + .navbar + ul {
+          display: none; }
+      body .header #navcheck:checked + .navbar + ul {
+        /* Absolute Positioning */
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        padding-top: 100px;
+        list-style: none;
+        display: block;
+        table-layout: fixed;
+        width: 100%;
+        overflow: scroll;
+        background-color: #806c80; }
+        body .header #navcheck:checked + .navbar + ul li {
+          position: relative;
+          display: block;
+          background-color: #806c80;
+          color: #d9ffd9;
+          width: 100%;
+          text-transform: uppercase; }
+          body .header #navcheck:checked + .navbar + ul li a {
+            display: block;
+            padding: 20px;
+            width: 100%;
+            text-decoration: none;
+            color: #d9ffd9;
+            box-sizing: border-box; }
+          body .header #navcheck:checked + .navbar + ul li ul {
+            display: block;
+            position: relative;
+            width: 100%; }
+            body .header #navcheck:checked + .navbar + ul li ul li {
+              color: #d9ffd9;
+              text-transform: none; }
+              body .header #navcheck:checked + .navbar + ul li ul li a {
+                padding-left: 40px;
+                color: #d9ffd9; }
+              body .header #navcheck:checked + .navbar + ul li ul li ul {
+                position: relative;
+                display: block;
+                left: auto;
+                top: auto; }
+                body .header #navcheck:checked + .navbar + ul li ul li ul li {
+                  position: relative;
+                  color: #d9ffd9;
+                  font-weight: 300; }
+                  body .header #navcheck:checked + .navbar + ul li ul li ul li a {
+                    padding-left: 60px;
+                    color: #d9ffd9; }
+          body .header #navcheck:checked + .navbar + ul li:hover {
+            background-color: #ffd9d9;
+            color: #6c8080; }
+            body .header #navcheck:checked + .navbar + ul li:hover a {
+              color: #6c8080; }
+            body .header #navcheck:checked + .navbar + ul li:hover ul {
+              display: block; }
+              body .header #navcheck:checked + .navbar + ul li:hover ul li {
+                display: block;
+                color: #d9ffd9; }
+                body .header #navcheck:checked + .navbar + ul li:hover ul li a {
+                  color: #d9ffd9; }
+                body .header #navcheck:checked + .navbar + ul li:hover ul li ul {
+                  display: block; }
+                body .header #navcheck:checked + .navbar + ul li:hover ul li:hover {
+                  color: #6c8080; }
+                  body .header #navcheck:checked + .navbar + ul li:hover ul li:hover a {
+                    color: #6c8080; }
+                  body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul {
+                    display: block; }
+                    body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li {
+                      color: #d9ffd9; }
+                      body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li a {
+                        color: #d9ffd9; }
+                      body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover {
+                        color: #6c8080; }
+                        body .header #navcheck:checked + .navbar + ul li:hover ul li:hover ul li:hover a {
+                          color: #6c8080; }
+          body .header #navcheck:checked + .navbar + ul li:last-of-type ul li ul {
+            right: auto;
+            left: auto; } }
+  body .header .nav {
+    font-weight: 700;
+    letter-spacing: 1px;
+    font-size: 20px;
+    position: relative;
+    list-style: none;
+    text-align: right;
+    display: block;
+    width: 200px;
+    background-color: #806c80;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0; }
+    body .header .nav li {
+      position: relative;
+      display: block;
+      background-color: #806c80;
+      color: #d9ffd9;
+      width: auto; }
+      body .header .nav li a {
+        display: block;
+        padding: 20px;
+        width: 100%;
+        text-decoration: none;
+        color: #d9ffd9;
+        box-sizing: border-box; }
+      body .header .nav li ul {
+        display: none;
+        position: absolute;
+        width: 100%;
+        right: 100%;
+        top: 0; }
+        body .header .nav li ul li {
+          color: #d9ffd9; }
+          body .header .nav li ul li a {
+            color: #d9ffd9; }
+          body .header .nav li ul li ul {
+            position: absolute;
+            display: none;
+            right: 100%;
+            top: 0; }
+            body .header .nav li ul li ul li {
+              position: relative;
+              color: #d9ffd9; }
+              body .header .nav li ul li ul li a {
+                color: #d9ffd9; }
+      body .header .nav li:hover {
+        background-color: #ffd9d9;
+        color: #6c8080; }
+        body .header .nav li:hover a {
+          color: #6c8080; }
+        body .header .nav li:hover ul {
+          display: block; }
+          body .header .nav li:hover ul li {
+            display: block;
+            color: #d9ffd9; }
+            body .header .nav li:hover ul li a {
+              color: #d9ffd9; }
+            body .header .nav li:hover ul li ul {
+              display: none; }
+            body .header .nav li:hover ul li:hover {
+              color: #6c8080; }
+              body .header .nav li:hover ul li:hover a {
+                color: #6c8080; }
+              body .header .nav li:hover ul li:hover ul {
+                display: block; }
+                body .header .nav li:hover ul li:hover ul li {
+                  color: #d9ffd9; }
+                  body .header .nav li:hover ul li:hover ul li a {
+                    color: #d9ffd9; }
+                  body .header .nav li:hover ul li:hover ul li:hover {
+                    color: #6c8080; }
+                    body .header .nav li:hover ul li:hover ul li:hover a {
+                      color: #6c8080; }
+
+/*# sourceMappingURL=vertical.css.map */
\ No newline at end of file
diff --git a/examples/layout/menus/vertical-right/vertical.html b/examples/layout/menus/vertical-right/vertical.html
new file mode 100644
index 0000000..742df2e
--- /dev/null
+++ b/examples/layout/menus/vertical-right/vertical.html
@@ -0,0 +1,180 @@
+<head>
+    <link rel="stylesheet" type="text/css" href="vertical.css">
+</head>
+<body>
+<div class="header">
+
+    <input id="navcheck" type="checkbox" name="menu">
+
+    <label class="navbar" for="navcheck">
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+    </label>
+
+    <ul class="nav">
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href="#">Item</a>
+            <ul>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Sub Item</a>
+                    <ul>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                        <li><a href="#">Sub Sub Item</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+</div>
+<div class="content"></div>
+</body>
\ No newline at end of file
diff --git a/examples/layout/menus/vertical-right/vertical.scss b/examples/layout/menus/vertical-right/vertical.scss
new file mode 100644
index 0000000..2c76674
--- /dev/null
+++ b/examples/layout/menus/vertical-right/vertical.scss
@@ -0,0 +1,27 @@
+@import "../../../../framework";
+
+body {
+  background-color: #d9ffd9;
+  font-family: Calibri, sans-serif;
+
+  .header {
+    //transform: rotate(-1deg);
+
+    #navcheck {
+      @include toggle-tablet(100px, #ffd9d9, #806c80) {
+        @include menu-fullscreen-phone(100px, 20px, #806c80, #ffd9d9, #d9ffd9, #6c8080)
+      }
+    }
+
+    .nav {
+      font-weight: 700;
+      letter-spacing: 1px;
+      font-size: 20px;
+      @include menu-vertical-right-desktop(20px, 200px, #806c80, #ffd9d9, #d9ffd9, #6c8080);
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      right: 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/mixins/_mixins.scss b/mixins/_mixins.scss
index e8bb5ae..9b53068 100644
--- a/mixins/_mixins.scss
+++ b/mixins/_mixins.scss
@@ -1,6 +1,7 @@
 // Layout
 @import "layout/layout";
 @import "layout/position";
+@import "layout/image/cover";
 @import "layout/menus/_00-menus";
 
 // Queries
diff --git a/mixins/layout/image/_cover.scss b/mixins/layout/image/_cover.scss
new file mode 100644
index 0000000..c911ce6
--- /dev/null
+++ b/mixins/layout/image/_cover.scss
@@ -0,0 +1,18 @@
+@mixin image-cover($heightaspect) {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+
+  img {
+    position: absolute;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+
+  &:after {
+    content: "";
+    display: block;
+    padding-bottom: 100% * $heightaspect;
+  }
+}
\ No newline at end of file
diff --git a/mixins/layout/menus/_00-menus.scss b/mixins/layout/menus/_00-menus.scss
index d3d9d20..bb686af 100644
--- a/mixins/layout/menus/_00-menus.scss
+++ b/mixins/layout/menus/_00-menus.scss
@@ -1,4 +1,11 @@
 @import "fullscreen-phone";
+
 @import "horizontal-desktop";
+
 @import "vertical-desktop";
+@import "vertical-open";
+
+@import "vertical-right-desktop";
+@import "vertical-right-open";
+
 @import "toggle";
\ No newline at end of file
diff --git a/mixins/layout/menus/_vertical-open.scss b/mixins/layout/menus/_vertical-open.scss
new file mode 100644
index 0000000..14c5655
--- /dev/null
+++ b/mixins/layout/menus/_vertical-open.scss
@@ -0,0 +1,133 @@
+@mixin menu-vertical-open(
+  $padding:15px,
+  $width:200px,
+  $bg-color:#cccccc,
+  $bg-color-hover:#999999,
+  $font-color:#666666,
+  $font-color-hover:#ffffff
+) {
+  // First
+  position: relative;
+  list-style: none;
+  display: block;
+  width: $width;
+  background-color: $bg-color;
+
+  // First
+  li {
+    position: relative;
+    display: block;
+    background-color: $bg-color;
+    color: $font-color;
+    width: auto;
+
+    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%;
+      //left: 100%;
+      //top: 0;
+
+      // 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;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/mixins/layout/menus/_vertical-right-desktop.scss b/mixins/layout/menus/_vertical-right-desktop.scss
new file mode 100644
index 0000000..41629b0
--- /dev/null
+++ b/mixins/layout/menus/_vertical-right-desktop.scss
@@ -0,0 +1,134 @@
+@mixin menu-vertical-right-desktop(
+  $padding:15px,
+  $width:200px,
+  $bg-color:#cccccc,
+  $bg-color-hover:#999999,
+  $font-color:#666666,
+  $font-color-hover:#ffffff
+) {
+  // First
+  position: relative;
+  list-style: none;
+  text-align: right;
+  display: block;
+  width: $width;
+  background-color: $bg-color;
+
+  // First
+  li {
+    position: relative;
+    display: block;
+    background-color: $bg-color;
+    color: $font-color;
+    width: auto;
+
+    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%;
+      right: 100%;
+      top: 0;
+
+      // Second
+      li {
+        color: $font-color;
+        a {
+          color: $font-color;
+        }
+
+        // Third
+        ul {
+          position: absolute;
+          display: none;
+          right: 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;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/mixins/layout/menus/_vertical-right-open.scss b/mixins/layout/menus/_vertical-right-open.scss
new file mode 100644
index 0000000..07a758b
--- /dev/null
+++ b/mixins/layout/menus/_vertical-right-open.scss
@@ -0,0 +1,131 @@
+@mixin menu-vertical-right-open(
+  $padding:15px,
+  $width:200px,
+  $bg-color:#cccccc,
+  $bg-color-hover:#999999,
+  $font-color:#666666,
+  $font-color-hover:#ffffff
+) {
+  // First
+  position: relative;
+  list-style: none;
+  text-align: right;
+  display: block;
+  width: $width;
+  background-color: $bg-color;
+
+  // First
+  li {
+    position: relative;
+    display: block;
+    background-color: $bg-color;
+    color: $font-color;
+    width: auto;
+
+    a {
+      display: block;
+      padding: $padding;
+      width: 100%;
+      text-decoration: none;
+      color: $font-color;
+      box-sizing: border-box;
+    }
+
+    // Second
+    ul {
+      width: 100%;
+      padding-right: $padding;
+
+      // Second
+      li {
+        color: $font-color;
+        a {
+          color: $font-color;
+        }
+
+        // Third
+        ul {
+          //position: absolute;
+          //display: none;
+          //right: 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;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file