work on mobile menu

attempt at putting in mobile menu
from BayBluffs

diff --git a/Toolkit/Page.php b/Toolkit/Page.php
index 7a625f9..e75339f 100755 (executable)
--- a/Toolkit/Page.php
+++ b/Toolkit/Page.php
@@ -147,9 +147,11 @@ class Toolkit_Page
         $GLOBALS['styleSheets'] = array();
         $GLOBALS['styleSheets'][] = $this->mediaBaseURL . 'fancybox/jquery.fancybox.css';
         $GLOBALS['styleSheets'][] = $this->mediaBaseURL . 'css/normalize.css';
+        $GLOBALS['styleSheets'][] = $this->mediaBaseURL . 'css/arrows.css';
         // Resources needed for every page.
         $GLOBALS['topScripts'][] = JQUERY_CDN_JS;
-        $GLOBALS['bottomScripts'][] = $this->mediaBaseURL . "fancybox/jquery.fancybox.js";
+        $GLOBALS['bottomScripts'][] = $this->mediaBaseURL . 'fancybox/jquery.fancybox.js';
+        //$GLOBALS['bottomScripts'][] = $this->mediaBaseURL . 'libjs/arrowMenu.js';
     }
 
     private function _video()
@@ -569,10 +571,46 @@ class Toolkit_Page
      */
     private function _getMainNav($catid)
     {
-        $nav          = $this->_navigationFactory->createMainNav();
-        $mainNavArray = $nav->getNavStructure($this->_pageGateway, $catid);
+        $sideNav = new Toolkit_Template_Navigation_AllInOneSideNav(
+            $this->_pageGateway
+        );
+        $nav  = $sideNav->getNavigation();
+        $html = $this->_arrayToListHTML($nav);
+        return ($html) ? $html : '';
+    }
 
-        return $nav->renderPageNav($mainNavArray, 'tree');
+    private function _arrayToListHTML($array, $level = 0)
+    {
+        static $tab = "\t", $format = '<a href="%s"%s>%s</a>';
+
+        if (empty($array)) {
+            return;
+        }
+        $tabs = str_repeat($tab, $level * 2);
+        $mainClass = ($level == 0) ? ' class="off-canvas-list"': '';
+        $result = "{$tabs}<ul{$mainClass}>\n";
+        foreach ($array as $i => $node) {
+            $class
+                = ($node['class'] == 'current')
+                ? ' class="'.$node['class'].'"'
+                : '';
+            $parent
+                = ($node['class'] == 'parent')
+                ? ' class="'.$node['class'].'"'
+                : '';
+            $link = sprintf(
+                $format,
+                $node['uri'],
+                $class,
+                $node['label']
+            );
+            $result .= "{$tabs}{$tab}<li{$parent}>\n{$tabs}{$tab}{$tab}"
+                . "{$link}\n"
+                . $this->_arrayToListHTML($node['pages'], $level + 1)
+                . "{$tabs}{$tab}</li>\n";
+        }
+        $result .= "{$tabs}</ul>\n";
+        return $result;
     }
 
     /**

diff --git a/assets/dropper.gif b/assets/dropper.gif
new file mode 100644 (file)
index 0000000..2b65eac
Binary files /dev/null and b/assets/dropper.gif differ

diff --git a/assets/dropper_2.gif b/assets/dropper_2.gif
new file mode 100644 (file)
index 0000000..0f3fe26
Binary files /dev/null and b/assets/dropper_2.gif differ

diff --git a/assets/dropper_3.gif b/assets/dropper_3.gif
new file mode 100644 (file)
index 0000000..40a087b
Binary files /dev/null and b/assets/dropper_3.gif differ

diff --git a/css/arrows.css b/css/arrows.css
new file mode 100644 (file)
index 0000000..5a4c680
--- /dev/null
+++ b/css/arrows.css
@@ -0,0 +1,11 @@
+#mobilenav ul li a.dropper {
+    position: absolute;
+    z-index: 80;
+    right: 4px;
+    top: 6px;
+    width: 60px;
+    height: 40px;
+    background: url(../assets/dropper.gif) 0 0 no-repeat;
+    cursor: pointer;
+    border-radius: 8px 8px 0 0;
+}
\ No newline at end of file

diff --git a/libjs/arrowMenu.js b/libjs/arrowMenu.js
new file mode 100644 (file)
index 0000000..c56fba7
--- /dev/null
+++ b/libjs/arrowMenu.js
@@ -0,0 +1,58 @@
+var menuCounter = 0;
+function setMobileNav() {
+    /* Click handler for the menu button. */
+    $('.left-off-canvas-toggle').click(function() {
+        if(menuCounter % 2 == 0) {
+            // Open nav.
+            // Animate the logo so it fits in the topbar.
+             $('#logo').addClass('open');
+             // Toggle the menu button to a close button.
+             $(this).css('background', 'url(' + media_base_url + 'assets/close.png) 0 0 no-repeat');
+             // Show the menu.
+             $('#mobilenav').css("display", "block");
+        } else {
+            // Close nav.
+            // Animate the logo to its original size.
+             $('#logo').removeClass('open');
+             // Toggle the close button to a menu button.
+             $(this).css('background', 'url(' + media_base_url + 'assets/menu.png) 0 0 no-repeat');
+             // Show the menu.
+             $('#mobilenav').css("display", "none");
+        }
+        menuCounter++;
+    });
+    /* Add drop down arrows to any links that have children. */
+    setArrows();
+
+    /* Click handler for droppers */
+    $('#mobilenav a.dropper').click(function() {
+        /* Open or Close. */
+        if($(this).siblings('ul').eq(0).hasClass('open')) {
+            /* If child ul has class of open, close. */
+            $(this).siblings('ul').eq(0).removeClass('open');
+            $(this).css('backgroundPosition', '0 0');
+        } else {
+            /* If child ul has class of closed, open. */
+            $(this).siblings('ul').eq(0).addClass('open');
+            $(this).css('backgroundPosition', '0 -40px');
+        }
+    });
+}
+
+function setArrows() {
+    /* Iterate through the nav tree and add drop down arrows to any LI that has a child UL. */
+    $('#mobilenav ul li a.dropper').each(function(i) {
+        $(this).remove();
+    });
+    $('#mobilenav ul li a').each( function (i) {
+        $(this).addClass('link');
+        if($(this).parent('li').has('ul').length > 0) {
+            $(this).after('<a class="dropper"></a>');
+        }
+    });
+}
+
+$(function(){
+
+    setMobileNav();
+})
\ No newline at end of file

diff --git a/templates/template.html b/templates/template.html
index 7c50a8f..1fa66e7 100644 (file)
--- a/templates/template.html
+++ b/templates/template.html
@@ -8,6 +8,7 @@
 <script src="{mediaBaseURL:h}libjs/vendor/modernizr.js"></script>
 <link rel="stylesheet" href="{mediaBaseURL:h}css/foundation.css" />
 <link rel="stylesheet" href="{mediaBaseURL:h}styles.css" />
+<flexy:toJavascript flexy:prefix="" media_base_url="mediaBaseURL"></flexy:toJavascript>
 {styles:h}
 {topScripts:h}
 </head>
@@ -21,24 +22,8 @@
                 </section>
             </nav>
         </div>
-        <aside class="left-off-canvas-menu">
-            <ul class="off-canvas-list">
-                <li class="menu-icon">
-                    <a href="#">Home</a>
-                </li>
-                <li>
-                    <a href="#">Tours &amp; Cruises</a>
-                </li>
-                <li>
-                    <a href="#">Tickets, Packages &amp; Coupons</a>
-                </li>
-                <li>
-                    <a href="#">Groups &amp; School Rates</a>
-                </li>
-                <li>
-                    <a href="#">About</a>
-                </li>
-            </ul>
+        <aside class="left-off-canvas-menu" id="mobilenav">
+            {mainNav:h}
         </aside>
         <section class="main-section">
             <div class="row">