Add script and style for the mobile nav

From keweenaw

diff --git a/footer.php b/footer.php
index f94c101..d353f8b 100644 (file)
--- a/footer.php
+++ b/footer.php
@@ -23,6 +23,14 @@
 <script src="<?php bloginfo('template_url');?>/js/foundation.min.js"></script>
 <script>
     jQuery(document).foundation();
+    jQuery(document).ready(function(){
+    console.log('loading...');
+        jQuery('.off-canvas-list ul.children').before('<a class="toggle" href="#"></a>');
+        jQuery('.off-canvas-list').find('a.toggle').click(function(){
+            jQuery(this).toggleClass('open');
+            jQuery(this).siblings('ul').toggleClass('open');
+        });
+    });
 </script>
 </body>
 </html>

diff --git a/sidebar.php b/sidebar.php
index 33909fe..18a2af3 100644 (file)
--- a/sidebar.php
+++ b/sidebar.php
@@ -31,7 +31,7 @@
                     </div><!-- /#column -->
                     <aside class="left-off-canvas-menu">
                         <ul class="off-canvas-list">
-                            <?php wp_nav_menu(array('ParrotsLanding' => 'header-menu', 'menu_class' => 'left'));?>
+                            <?php wp_nav_menu(array('ParrotsLanding' => 'header-menu', 'menu_class' => ''));?>
                         </ul>
                         <div class="vcard">
                             <h2 class="fn org"><?php bloginfo('name');?></h2>

diff --git a/style.css b/style.css
index 18db960..9977c6f 100644 (file)
--- a/style.css
+++ b/style.css
@@ -206,3 +206,55 @@ ul ul a#current {
     clear:  none;
     background-repeat: no-repeat;
 }
+
+/* menu stuff */
+aside.left-off-canvas-menu {
+  background: transparent;
+  background-color: rgba(255, 255, 255, 0.8);
+}
+aside.left-off-canvas-menu ul.off-canvas-list li {
+  display: block;
+  overflow: hidden;
+  position: relative;
+}
+aside.left-off-canvas-menu ul.off-canvas-list li a {
+  font-family: "Arial";
+  font-size: 18px;
+  line-height: 20px;
+  color: black;
+  border-bottom: 1px solid #b1b3b6;
+  background-repeat: no-repeat;
+  background-position: 3px 50%;
+  padding-left: 0;
+  /*padding-right: 55px;*/
+}
+aside.left-off-canvas-menu ul.off-canvas-list li a:hover {
+  background-color: transparent;
+  color: #f27225;
+}
+aside.left-off-canvas-menu ul.off-canvas-list li a.toggle {
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABUCAYAAADwHnXXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NEIxREJCRjkxOTc3MTFFNEExMUU4NDJENjA5NTYyNEEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEIxREJCRkExOTc3MTFFNEExMUU4NDJENjA5NTYyNEEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0QjFEQkJGNzE5NzcxMUU0QTExRTg0MkQ2MDk1NjI0QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0QjFEQkJGODE5NzcxMUU0QTExRTg0MkQ2MDk1NjI0QSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmLH3EUAAAKASURBVHja7FpNKERRFH7jJ7KQkiKllGRBSRY2ViR2io2yUpSUhiLJb4QQg7KwsLJQNnZKysJWslB+RokSJdEkURjfae5imsa8d9+777lyTn3d3pt77/veOe+cc++54wuHw4bOkmRoLkyQCTLBv04wxekExQd3jsZfVOf9Aw1CSzto6iXmDQGfJn32gSZVJu4BaiX6Z5r8/gGMKnMSfCdnaFYVWm4NOFHtxWPAowJyNMeI8jADLT7JTJxAhmVeNMkt0/wgx2IOdwI1tPghHMaO0MKz24J3O4uDILmHZtsGwU3gwKtU1w+8S/R/BQY8y8XQYhDNssSQGeDG68XCJHBvod8VMOf5agZaDImQYSa9wNtvLbfWgaMEv+/adCg1BKHFLzT+BPnWr8OClULHVpz7lLtPdVlR98V8Zw9WVyteEbyO8dRB4Fm3PckscAscCufRY08SJS8iW1wCXzoSJNlQvSfxcXWLCTJBJsgEmSATZIJMkAkyQSb4i8InTbqZuApo1crEMS+7ApDNtsVGXisNtgGVQL4RqWFrZeIsYCrqmqpdBToRpFJbTtR1OjCvC8ESoCvO/WagWgeCS0BqnPs+IOD0GY4GI0g3oqlL0KVCOI/3BEGOvrMFC10nDPMDblc0SJ5aaKFfLjBk9yG26oPQHoUQquBnWBxC53plQNCrXDwtQY4kzYjUsN03MbRHoaPFxrPIoWpcJQhyyUbklNNnU/MB2fwvq8EOoNyBY5UC7a44CbSXjeYcyHYY2OkPFUWGOOhR6SQTCsgZYo5xpSaG9kqFeVVJp8jhyhas9MYhkz7JEhmDcvci0OBKoOZNk0oNcmWBCTJBJsgEmaDe8i3AAABaiPID+002AAAAAElFTkSuQmCC');
+  background-repeat: no-repeat;
+  background-position: 50% 3px;
+  width: 40px;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: none;
+}
+aside.left-off-canvas-menu ul.off-canvas-list li a.toggle.open {
+  background-position: 50% -40px;
+}
+aside.left-off-canvas-menu ul.off-canvas-list li > ul {
+  display: none;
+}
+aside.left-off-canvas-menu ul.off-canvas-list li > ul li > a {
+  padding-right: 10px;
+  margin-right: 25px;
+  font-size: 16px;
+  line-height: 18px;
+}
+aside.left-off-canvas-menu ul.off-canvas-list li > ul.open {
+  display: block;
+}