mobile menu

dmd-web-and-mobile · Apr 4, 2016 · 8abb6d7 · 8abb6d7
1 parent babf050
commit 8abb6d7
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 15 deletions.
diff --git a/www/wp-content/themes/ation2016/src/scripts/main.js b/www/wp-content/themes/ation2016/src/scripts/main.js
@@ -56,4 +56,35 @@ jQuery( document ).ready( function( $ ) {
         });
     }
 
+
+    // Mobile Menu
+    var mobileMenu = $('#mobile-menu'),
+        pageContainer = $('#page'),
+        mobileToggleBtn = $('.mobile-btn');
+
+
+    function mobileToggle() {
+        console.log('Called Mobile Toggle');
+        mobileMenu.toggleClass('mobile-active');
+        pageContainer.toggleClass('mobile-active');
+        $('body').toggleClass('mobile-active');
+        toggleConditionals();
+    }
+
+    function toggleConditionals() {
+        if (mobileMenu.hasClass('mobile-active')) {
+            pageContainer.on('touchmove', function(e) {
+                e.preventDefault();
+            });
+        } else {
+            pageContainer.off('touchmove');
+        }
+    }
+
+    mobileToggleBtn.on('click', function(e) {
+        console.log('Clicked Mobile Button');
+        e.preventDefault();
+        mobileToggle();
+    });
+
 });
diff --git a/www/wp-content/themes/ation2016/src/styles/components/_mobile-menu.scss b/www/wp-content/themes/ation2016/src/styles/components/_mobile-menu.scss
@@ -15,6 +15,12 @@ $mobile-menu-width: 225px;
     padding: 0 1em;
     border-left: 1px solid $grey;
 
+    li.top-mobile-bar {
+        a {
+            padding: 10px;
+        }
+    }
+
     & > ul {
         padding: 0;
         margin: 0;
@@ -36,21 +42,22 @@ $mobile-menu-width: 225px;
                 font-size: 0.80em;
                 color: $orange;
                 text-decoration: none;
-                padding: 0 0 10px 10px;
+                padding: 10px 10px;
                 line-height: 1.5em;
             }
         }
 
         & > li {
-            font-size: 14px;
+            font-size: 16px;
             font-weight: 500;
+            border-bottom: 1px solid $white;
 
             &:first-child {
                 // Some height property if doing this
             }
 
             a {
-                color: $orange;
+                color: $white;
                 padding: 10px 10px;
                 display: block;
                 text-decoration: none;
@@ -93,4 +100,24 @@ $mobile-menu-width: 225px;
 
 body.mobile-active {
     overflow: hidden;
+}
+
+header .mobile-btn {
+    font-size: 30px;
+    text-decoration: none;
+    font-family: $header-font;
+    &:hover {
+        text-decoration: none;
+    }
+}
+
+#mobile-menu {
+    .mobile-btn {
+        font-size: 20px;
+        color: $white;
+        text-decoration: none;
+        &:hover {
+            text-decoration: none;
+        }
+    }
 }
diff --git a/www/wp-content/themes/ation2016/static/scripts/main.js b/www/wp-content/themes/ation2016/static/scripts/main.js
@@ -56,4 +56,35 @@ jQuery( document ).ready( function( $ ) {
         });
     }
 
+
+    // Mobile Menu
+    var mobileMenu = $('#mobile-menu'),
+        pageContainer = $('#page'),
+        mobileToggleBtn = $('.mobile-btn');
+
+
+    function mobileToggle() {
+        console.log('Called Mobile Toggle');
+        mobileMenu.toggleClass('mobile-active');
+        pageContainer.toggleClass('mobile-active');
+        $('body').toggleClass('mobile-active');
+        toggleConditionals();
+    }
+
+    function toggleConditionals() {
+        if (mobileMenu.hasClass('mobile-active')) {
+            pageContainer.on('touchmove', function(e) {
+                e.preventDefault();
+            });
+        } else {
+            pageContainer.off('touchmove');
+        }
+    }
+
+    mobileToggleBtn.on('click', function(e) {
+        console.log('Clicked Mobile Button');
+        e.preventDefault();
+        mobileToggle();
+    });
+
 });
diff --git a/www/wp-content/themes/ation2016/static/scripts/main.min.js b/www/wp-content/themes/ation2016/static/scripts/main.min.js
diff --git a/www/wp-content/themes/ation2016/static/styles/site.css b/www/wp-content/themes/ation2016/static/styles/site.css
@@ -6019,6 +6019,8 @@ footer {
   text-transform: uppercase;
   padding: 0 1em;
   border-left: 1px solid #a8a8a8; }
+  .mobile-menu li.top-mobile-bar a {
+    padding: 10px; }
   .mobile-menu > ul {
     padding: 0;
     margin: 0;
@@ -6036,13 +6038,14 @@ footer {
         font-size: 0.80em;
         color: #ff7200;
         text-decoration: none;
-        padding: 0 0 10px 10px;
+        padding: 10px 10px;
         line-height: 1.5em; }
     .mobile-menu > ul > li {
-      font-size: 14px;
-      font-weight: 500; }
+      font-size: 16px;
+      font-weight: 500;
+      border-bottom: 1px solid white; }
       .mobile-menu > ul > li a {
-        color: #ff7200;
+        color: white;
         padding: 10px 10px;
         display: block;
         text-decoration: none; }
@@ -6072,6 +6075,20 @@ footer {
 body.mobile-active {
   overflow: hidden; }
 
+header .mobile-btn {
+  font-size: 30px;
+  text-decoration: none;
+  font-family: "Source Sans Pro", sans-serif; }
+  header .mobile-btn:hover {
+    text-decoration: none; }
+
+#mobile-menu .mobile-btn {
+  font-size: 20px;
+  color: white;
+  text-decoration: none; }
+  #mobile-menu .mobile-btn:hover {
+    text-decoration: none; }
+
 .ation-btn, form input[type="submit"] {
   border: 3px solid transparent;
   color: white;

diff --git a/www/wp-content/themes/ation2016/static/styles/site.min.css b/www/wp-content/themes/ation2016/static/styles/site.min.css
diff --git a/www/wp-content/themes/ation2016/templates/base.twig b/www/wp-content/themes/ation2016/templates/base.twig
@@ -12,14 +12,15 @@
 				<div class="container">
 					{% block header %}
 						<div class="row">
-							<div class="col-xs-12 col-sm-4 col-md-6">
+							<div class="col-xs-6 col-sm-4 col-md-6">
 								<a href="{{ site.link }}" rel="home" class="header-logo">
 									<img src="{{theme.path}}/static/images/ation-logo-02-02.png" alt="ATION Digital Media" />
 								</a>
 							</div>
-							<nav id="nav-main" class="nav-main col-xs-12 col-sm-8 col-md-6" role="navigation">
+							<nav id="nav-main" class="nav-main col-xs-12 col-sm-8 col-md-6 hidden-xs" role="navigation">
 								{% include "menu.twig" with {'menu': menu.get_items} %}
 							</nav><!-- #nav -->
+							<a href="#" class="mobile-btn hidden-sm hidden-md hidden-lg">MENU</a>
 						</div>
 					{% endblock %}
 				</div>
@@ -43,11 +44,14 @@
 				<footer id="footer">
 					{% include 'footer.twig' %}
 				</footer>
-				<ul id="mobile-menu" class="mobile-menu">
-					{% include "menu.twig" with {'menu': menu.get_items } %}
-				</ul>
-				{{ function('wp_footer') }}
 			{% endblock %}
 		</div>
+		<ul id="mobile-menu" class="mobile-menu hidden-sm hiddn-md hidden-lg">
+			<li class="top-mobile-bar">
+				<a href="#" class="mobile-btn">CLOSE</a>
+			</li>
+			{% include "menu.twig" with {'menu': menu.get_items } %}
+		</ul>
+		{{ function('wp_footer') }}
 	</body>
 </html>