From: Steve Sutton Date: Fri, 13 Jun 2014 15:26:08 +0000 (-0400) Subject: work on mobile menu X-Git-Tag: v1.0^2~29^2~1^2~3 X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=e360c1f7c2bcf6422e0406a63a2fbb76d8c67aae;p=web%2FSooLocks.git 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 --- 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 = '%s'; + + if (empty($array)) { + return; + } + $tabs = str_repeat($tab, $level * 2); + $mainClass = ($level == 0) ? ' class="off-canvas-list"': ''; + $result = "{$tabs}\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}\n{$tabs}{$tab}{$tab}" + . "{$link}\n" + . $this->_arrayToListHTML($node['pages'], $level + 1) + . "{$tabs}{$tab}\n"; + } + $result .= "{$tabs}\n"; + return $result; } /** diff --git a/assets/dropper.gif b/assets/dropper.gif new file mode 100644 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 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 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 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 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(''); + } + }); +} + +$(function(){ + + setMobileNav(); +}) \ No newline at end of file diff --git a/templates/template.html b/templates/template.html index 7c50a8f..1fa66e7 100644 --- a/templates/template.html +++ b/templates/template.html @@ -8,6 +8,7 @@ + {styles:h} {topScripts:h} @@ -21,24 +22,8 @@ -