diff --git a/bin/MegaMenu.js b/bin/MegaMenu.js index 5d117e1b34f6df3560c3c2e893eca94653168050..614b05748996cb9d0f7897dd6d57793a0c9c8355 100644 --- a/bin/MegaMenu.js +++ b/bin/MegaMenu.js @@ -76,6 +76,21 @@ define('package/quiqqer/menu/bin/MegaMenu', [ this.$hideCheck(); }.bind(this) }); + + var SlideNode = document.getElement('[data-qui="package/quiqqer/menu/bin/SlideOut"]'), + SlideOut = QUI.Controls.getById(SlideNode.get('data-quiid')); + + this.getElm().getElement('.quiqqer-menu-megaMenu-mobile').addEvents({ + click: function () { + if (!SlideOut) { + SlideOut = QUI.Controls.getById(SlideNode.get('data-quiid')) + } + + if (SlideOut) { + SlideOut.toggle(); + } + } + }); }, /** diff --git a/src/QUI/Menu/MegaMenu.css b/src/QUI/Menu/MegaMenu.css index c079cd323db01073b700c8a2da6e25f4a47f28ea..664d5a7b5e05ef9342fa62e2afd8d3eff84bab2b 100644 --- a/src/QUI/Menu/MegaMenu.css +++ b/src/QUI/Menu/MegaMenu.css @@ -34,3 +34,17 @@ max-width: 1200px; width: 100%; } + + + +/** sub menu data + ================================================= */ + +.quiqqer-menu-megaMenu-mobile { + cursor: pointer; + display: block; + float: right; + font-size: 20px; + line-height: 60px; + padding: 0 10px; +} \ No newline at end of file diff --git a/src/QUI/Menu/MegaMenu.html b/src/QUI/Menu/MegaMenu.html index 3a6edd7715c1cf0e6116320d77002ce62e25c6a8..b00b6dd957bf2acd3fb17c59aeb41c6772777cc9 100644 --- a/src/QUI/Menu/MegaMenu.html +++ b/src/QUI/Menu/MegaMenu.html @@ -1,4 +1,4 @@ -<nav> +<nav class="hide-on-mobile"> {$prepend} <ul class="quiqqer-menu-megaMenu-list"> @@ -36,4 +36,15 @@ </ul> {$append} -</nav> \ No newline at end of file +</nav> +<div class="hide-on-desktop"> + {$prepend} + + <div class="quiqqer-menu-megaMenu-mobile"> + <span class="fa fa-bars"></span> + <span>Menü</span> + </div> + + {$append} + {$Mobile->create()} +</div> \ No newline at end of file diff --git a/src/QUI/Menu/MegaMenu.php b/src/QUI/Menu/MegaMenu.php index ffc9790318aa9464703ca62e626031e9e22058f7..b84b4d628cb443e4f33a42f5456c4710b5ded502 100644 --- a/src/QUI/Menu/MegaMenu.php +++ b/src/QUI/Menu/MegaMenu.php @@ -14,6 +14,11 @@ */ class MegaMenu extends AbstractMenu { + /** + * @var SlideOut + */ + protected $Mobile; + /** * @param array $attributes */ @@ -30,6 +35,20 @@ public function __construct($attributes = array()) $this->addCSSClass('quiqqer-menu-megaMenu'); $this->addCSSFile(dirname(__FILE__) . '/MegaMenu.css'); + + $this->Mobile = new QUI\Menu\SlideOut(); + + // defaults + $this->Mobile->setAttribute('Project', $this->getProject()); + $this->Mobile->setAttribute('Site', $this->getSite()); + + $this->Mobile->setAttribute('data-menu-right', 10); + $this->Mobile->setAttribute('data-menu-top', 15); + $this->Mobile->setAttribute('data-show-button-on-desktop', 0); + $this->Mobile->setAttribute('data-qui-options-menu-width', 400); + $this->Mobile->setAttribute('data-qui-options-menu-button', 0); + $this->Mobile->setAttribute('data-qui-options-touch', 0); + $this->Mobile->setAttribute('data-qui-options-buttonids', 'mobileMenu'); } /** @@ -63,10 +82,22 @@ public function getBody() break; } + $this->Mobile->setAttribute('Project', $this->getProject()); + $this->Mobile->setAttribute('Site', $this->getSite()); + + $this->Mobile->setAttribute('data-menu-right', 10); + $this->Mobile->setAttribute('data-menu-top', 15); + $this->Mobile->setAttribute('data-show-button-on-desktop', 0); + $this->Mobile->setAttribute('data-qui-options-menu-width', 400); + $this->Mobile->setAttribute('data-qui-options-menu-button', 0); + $this->Mobile->setAttribute('data-qui-options-touch', 0); + $this->Mobile->setAttribute('data-qui-options-buttonids', 'mobileMenu'); + $Engine->assign(array( 'this' => $this, 'Site' => $this->getSite(), 'Project' => $this->getProject(), + 'Mobile' => $this->Mobile, 'Start' => $this->getStart(), 'children' => $this->getStart()->getNavigation(), 'Rewrite' => QUI::getRewrite(), diff --git a/src/QUI/Menu/Menu.html b/src/QUI/Menu/Menu.html index c64c8b44e132f7c90fc3b7e976daa4ce11fab1cf..37a636c36a7a51db066797c454fc1ac2c7d510c4 100644 --- a/src/QUI/Menu/Menu.html +++ b/src/QUI/Menu/Menu.html @@ -2,9 +2,9 @@ <div class="page-navigation"> - <a href="{url id=1}" class="page-navigation-home"> + <a href="{url site=$Project->firstChild()}" class="page-navigation-home"> <span class="fa fa-home"></span> - {site id=1 attribute="title"} + {$Project->firstChild()->getAttribute('title')} </a> {include file="`$FileMenu`"