From: Steve Sutton Date: Mon, 28 Jul 2014 17:43:19 +0000 (-0400) Subject: Adding mobile menu X-Git-Tag: VV1^2~59 X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=29cbdbc54cb1de32214196e8949d53c35b63edb9;p=web%2FCityofMI.git Adding mobile menu Adding the arrowMenu css and js file and update Toolkit_Page for the correct menu for mobile. --- diff --git a/Toolkit/Page.php b/Toolkit/Page.php index fbce20e..20f3b32 100755 --- a/Toolkit/Page.php +++ b/Toolkit/Page.php @@ -145,22 +145,17 @@ class Toolkit_Page // Resources needed for every page. $GLOBALS['styleSheets'] = array(); + $GLOBALS['styleSheets'][] = $this->mediaBaseURL . 'css/arrows.css'; // Resources needed for every page. $GLOBALS['topScripts'][] = JQUERY_CDN_JS; $GLOBALS['topScripts'][] = MEDIA_BASE_URL . 'js/vendor/modernizr.js'; $GLOBALS['bottomScripts'][] = MEDIA_BASE_URL . 'js/foundation.min.js'; $GLOBALS['bottomScripts'][] = MEDIA_BASE_URL . 'js/foundation/foundation.offcanvas.js'; - + $GLOBALS['bottomScripts'][] = $this->mediaBaseURL . 'libjs/arrowMenu.js'; } private function _video() { - //$GLOBALS['styleSheets'][] - // = GLM_APP_BASE_URL . 'gallery/colorbox/colorbox.css'; - //$GLOBALS['bottomScripts'][] - // = GLM_APP_BASE_URL . 'libjs/plugins/colorbox/1.3.15/jquery.colorbox-min.js'; - //$GLOBALS['bottomScripts'][] - // = BASE_URL . 'Toolkit/Videos/libjs/thickbox.js'; $GLOBALS['bottomScripts'][] = BASE_URL . 'Toolkit/Videos/libjs/videos.js'; $dbh = Toolkit_Database::getInstance(); @@ -621,30 +616,34 @@ class Toolkit_Page } /** - * Returns page main navigation + * Returns mobile page navigation * * @param type $catid page catid * * @return type */ private function _getMainNav($catid) - { - $nav = $this->_navigationFactory->createMainNav(); - $mainNavArray = $nav->getNavStructure($this->_pageGateway, $catid); - - return $nav->renderPageNav($mainNavArray, 'tree'); - } - - private function _getArrayToListNav($catid) { $sideNav = new Toolkit_Template_Navigation_AllInOneSideNav( $this->_pageGateway ); $nav = $sideNav->getNavigation(); - $html = $this->_arrayToListHTML($nav, 0, "mainNav"); + $html = $this->_arrayToListHTML($nav); return ($html) ? $html : ''; } + /** + * _arrayToListHTML + * + * _arrayToListHTML is used for generating the mobile navigation + * menu that only appears on mobile sizes. + * + * @param type $array Navigation Array + * @param type $level Level of Ul starts at 0 + * @param type $className Class name for the main Ul + * + * @return string + */ private function _arrayToListHTML($array, $level = 0, $className = null) { static $tab = "\t", $format = '%s'; 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..3c07fa1 --- /dev/null +++ b/css/arrows.css @@ -0,0 +1,112 @@ +a.current { + font-weight: bold; + background: #888; + } + +/* Mobilenav */ +#mobilenav { + display: block; + display: none; + background: #2A3940; + color: #FFF; + border-top: 1px solid #43555D; + padding-left: 0; + padding-right: 0; +} +#mobilenav ul { + display: block; + width: 100%; + overflow: hidden; + margin: 0; + padding: 0; + list-style-type: none; +} +#mobilenav ul li { + display: block; + width: 100%; + overflow: hidden; + margin: 0; + padding: 0; + position: relative; +} +#mobilenav ul li a.link { + display: block; + width: 100%; + overflow: hidden; + margin: 0; + padding: 9px 50px 9px 10px; + font-size: 16px; + color: #E0E0E0; + border-bottom: 1px solid #43555D; + text-decoration: none; +} +#mobilenav ul li a:hover { + color: #FFF; +} +#mobilenav ul li a.dropper { + position: absolute; + z-index: 80; + right: 4px; + top: 3px; + width: 60px; + height: 40px; + background: url(../assets/dropper.gif) 0 0 no-repeat; + cursor: pointer; + border-radius: 8px 8px 0 0; +} +#mobilenav ul lh { + display: none; +} +#mobilenav ul li ul { + display: none; +} +#mobilenav ul li ul.open { + display: block; + height: auto; + background: #43555D; + + /*-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6); + -moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6); + box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6);*/ +} +#mobilenav ul li ul li a.link { + padding-left: 30px; + border-bottom: 1px solid #526872; +} +#mobilenav ul li ul li a.dropper { + position: absolute; + z-index: 80; + right: 4px; + top: 6px; + width: 60px; + height: 40px; + background: url(../assets/dropper_3.gif) 0 0 no-repeat; + cursor: pointer; + border-radius: 8px 8px 0 0; +} +#mobilenav ul li ul li ul.open { + display: block; + height: auto; + background: #526872; +} +#mobilenav ul li ul li ul li a.link { + padding-left: 50px; + border-bottom: 1px solid #43555D; +} +#mobilenav ul li ul li ul li a.dropper { + position: absolute; + z-index: 80; + right: 4px; + top: 6px; + width: 60px; + height: 40px; + background: url(../assets/dropper_3.gif) 0 0 no-repeat; + cursor: pointer; + border-radius: 8px 8px 0 0; +} +#mobilenav ul li ul li ul li ul { + display: none; +} +#mobilenav .nav_img { + display: none; +} \ No newline at end of file diff --git a/libjs/arrowMenu.js b/libjs/arrowMenu.js new file mode 100644 index 0000000..ba628b9 --- /dev/null +++ b/libjs/arrowMenu.js @@ -0,0 +1,75 @@ +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 setNav() { + /* Close all. */ + $('#mobilenav ul ul').addClass('closed'); + + /* Find the current anchor. */ + var currentAnchor = $('#mobilenav ul').find('.current').eq(0); + /* Open all the current anchor's parents. */ + currentAnchor.parents('ul').removeClass('closed'); + currentAnchor.parents('ul').addClass('open'); + /* Open the current anchor's children. */ + if(currentAnchor.siblings('ul').length > 0) { + currentAnchor.siblings('ul').eq(0).removeClass('closed'); + currentAnchor.siblings('ul').eq(0).addClass('open'); + } +} + +$(function(){ + + setMobileNav(); + setNav(); +}) diff --git a/templates/template.html b/templates/template.html index 225f273..8838b1a 100755 --- a/templates/template.html +++ b/templates/template.html @@ -243,7 +243,7 @@ $(document).foundation({ offcanvas: { open_method: 'move', - close_on_click: true + close_on_click: false } });