menu styling

src/css/layout/_nav.scss

@@ -25,9 +25,49 @@
         opacity: 0;
         position: fixed;
         color: _palette(white);
-        bottom: 100%;
+        bottom: 100vh;
-        right: 100%;
+        right: 0;
-        margin: 0 -50% -50% 0;
+        left: 0;
+        margin: 0 auto -50vh;
+
+        li {
+          transform: translate3d(0,0,0);
+          margin: 0 40%;
+          &:before {
+            @include vendor('transition', (
+              'width #{_duration(transition)} ease',
+            ));
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: auto;
+            background-color: _palette(white);
+            width: 0;
+          }
+          &:after {
+            opacity: 0;
+            content: attr(data-text);
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            margin: auto;
+            color: _palette(menu);
+          }
+          &:hover {
+            &:before {
+              left: 0;
+              right: auto;
+              width: 100%;
+            }
+            &:after {
+              opacity: 1;
+            }
+          }
+        }
       }
 
       > span {
@@ -71,7 +111,9 @@
         cursor: pointer;
         height: 80px;
         padding: 10px 23.1px;
-        left: calc(50% - 60px);
+        left: 0;
+        right: 0;
+        margin: auto;
 
         &:hover {
           @include vendor('filter', 'grayscale(0)');
@@ -156,7 +198,6 @@
         > a > #logo > img {
           height: 60px;
           padding: 7.5px 17.3px;
-          left: calc(50% - 45px);
         }
 
         > #menuToggle {

src/css/libs/_vars.scss

@@ -34,7 +34,7 @@
 		menu:					#0e0e0e,
 		white:				#ffffff,
 		bg:						#f2f2f2,
-		
+
 	/*
 		bg:					#935d8c,
 		fg:					rgba(255,255,255,0.65),

src/index.html

@@ -50,10 +50,10 @@
   <div id="menu">
     <span></span>
     <ul>
-      <li>loll</li>
+      <li data-text="Home">Home</li>
-      <li>xdd</li>
+      <li data-text="Websites">Websites</li>
-      <li>loll</li>
+      <li data-text="Websites">Websites</li>
-      <li>xdd</li>
+      <li data-text="Websites">Websites</li>
     </ul>
   </div>