diff --git a/bin/SlideOut.css b/bin/SlideOut.css
index 7297b3be6559308378152077ab7d917b5b02babc..285bde899c43fad4f08fe8c29736dc23abf9bf77 100644
--- a/bin/SlideOut.css
+++ b/bin/SlideOut.css
@@ -11,48 +11,41 @@
z-index: 100;
}
+.page-menu li {
+ padding-left: 0;
+}
+
.page-menu-close,
.page-menu-opener {
- color: #fff;
- cursor: pointer;
- /*background: #dddddd;*/
border: none;
border-radius: 3px;
+ color: #fff;
+ cursor: pointer;
outline: none;
- /*padding: 0;*/
position: absolute;
right: 10px;
text-align: center;
top: 10px;
- z-index: 2000;
transition: all 0.3s ease-in-out;
+ z-index: 2000;
}
-/*.page-menu-close {
- top: 10px !important;
-}*/
-
.page-menu-close:hover,
.page-menu-close:focus {
- background: rgba(255,255,255,0.1);
+ background: rgba(255, 255, 255, 0.1);
}
-/* bis fontawesome keinen dünnen Closebutton hat wird das verwendet (×)*/
.fa-times-thin:before {
content: '\00d7';
}
.page-menu-opener .fa {
- clear: both;
- float: left;
font-size: 20px;
text-align: center;
width: 100%;
}
.page-menu-opener-text {
- clear: both;
- float: left;
font-size: 10px;
text-align: center;
width: 100%;
@@ -65,85 +58,65 @@
z-index: 100;
}
-/*
-.page-menu-morph {
- position: absolute;
- width: 120px;
- height: 99%;
- top: 0;
- right: 0;
-}
-*/
.page-navigation ul {
- clear: both;
+ margin-left: 1.5rem;
padding-left: 0;
}
.page-navigation li {
- clear: both;
- float: left;
list-style-type: none;
text-align: left;
width: 100%;
}
.page-navigation a {
- clear: both;
+ align-items: flex-start;
color: #fff;
- float: left;
+ display: flex;
text-decoration: none;
width: 100%;
}
-.page-navigation-home {
- float: left;
- font-size: 16px;
- padding: 10px !important;
- width: 100%;
+.page-navigation .page-navigation-home {
+ font-size: 18px;
+ padding: 10px 0 !important;
+ width: calc(100% - 40px);
}
-.page-navigation-home .fa {
+.page-navigation .fa {
+ flex-shrink: 0;
+ line-height: inherit;
+ margin-right: 0.5rem;
text-align: left;
- width: 30px;
+ width: 1.5rem;
+}
+
+.page-navigation ul.page-navigation-level-1 {
+ margin-left: 0;
}
.page-navigation-level-1 a {
border-top: 1px solid rgba(255, 255, 255, 0.2);
- font-size: 20px;
+ font-size: 1.125rem;
padding: 10px 0;
- text-transform: uppercase;
- vertical-align: bottom;
+}
+
+.page-navigation__noHomeLink .page-navigation-level-1 > li:first-child > a {
+ margin-top: 30px;
}
.page-navigation-level-1 .fa {
- font-size: 22px;
- float: left;
text-align: center;
- width: 40px;
}
.page-navigation-level-2 a {
border-top: none;
- font-size: 14px;
+ font-size: 1rem;
padding: 5px 0;
}
-.page-navigation-level-3 {
- margin-left: 40px;
-}
-
.page-navigation-level-3 a {
- font-size: 14px;
-}
-
-.page-navigation-level-3 .fa {
- font-size: 14px;
- width: 20px;
-}
-
-.page-navigation .left-menu-text {
- float: left;
- width: calc(100% - 40px);
+ font-size: 0.875rem;
}
/** page navigation -> mobile
@@ -158,8 +131,8 @@
bottom: 0;
display: none;
left: 0;
- overflow-y: auto;
-webkit-overflow-scrolling: touch;
+ overflow-y: auto;
position: fixed;
right: 0;
top: 0;
@@ -186,8 +159,8 @@
.page-menu-mobile {
background: #dddddd;
- cursor: pointer;
color: #333;
+ cursor: pointer;
left: 0;
padding: 10px;
position: fixed;
diff --git a/bin/SlideOut.js b/bin/SlideOut.js
index e51d0e1779086177d06681b3a3206fd1b96ccc69..ec1cc0902b530fa6c765769fc9a99bdf0224b153 100644
--- a/bin/SlideOut.js
+++ b/bin/SlideOut.js
@@ -268,13 +268,13 @@ define('package/quiqqer/menu/bin/SlideOut', [
'class': 'page-menu-close',
styles : {
fontSize : 40,
- height : 45,
- lineHeight: 45,
- right : -20,
+ height : 50,
+ lineHeight: 50,
+ right : -30,
position : 'absolute',
textAlign : 'center',
- top : 10,
- width : 45,
+ top : 0,
+ width : 50,
zIndex : 1000
},
events : {
diff --git a/src/QUI/Menu/MegaMenu.Independent.html b/src/QUI/Menu/MegaMenu.Independent.html
index d87f2ad306b9e07a94f5dff2d2a63d1f5b744fbb..dc25058c009e7c73b8d1f6fbfc499ac047902109 100644
--- a/src/QUI/Menu/MegaMenu.Independent.html
+++ b/src/QUI/Menu/MegaMenu.Independent.html
@@ -56,7 +56,7 @@
{$append}
</nav>
-{*if $Mobile}
+{if $Mobile}
<div class="hide-on-desktop">
{$prepend}
@@ -68,4 +68,4 @@
{$append}
{$Mobile->create()}
</div>
-{/if*}
+{/if}
diff --git a/src/QUI/Menu/MegaMenu.php b/src/QUI/Menu/MegaMenu.php
index f03b85279042ac9d41c28470a638f50136805720..2e3c8e78abc693bbdd3f60d223e4a7df92097529 100644
--- a/src/QUI/Menu/MegaMenu.php
+++ b/src/QUI/Menu/MegaMenu.php
@@ -54,7 +54,15 @@ public function __construct($attributes = [])
return;
}
- $this->Mobile = new QUI\Menu\SlideOut();
+ $slideOutParam = [
+ 'showHomeLink' => true
+ ];
+
+ if ($this->getAttribute('menuId')) {
+ $slideOutParam['menuId'] = $this->getAttribute('menuId');
+ }
+
+ $this->Mobile = new QUI\Menu\SlideOut($slideOutParam);
// defaults
$this->Mobile->setAttribute('Project', $this->getProject());
diff --git a/src/QUI/Menu/Menu.Children.Independent.html b/src/QUI/Menu/Menu.Children.Independent.html
new file mode 100644
index 0000000000000000000000000000000000000000..c66049221cc92bf6cccc86d4debebc98a1c998d5
--- /dev/null
+++ b/src/QUI/Menu/Menu.Children.Independent.html
@@ -0,0 +1,33 @@
+{if !isset($level)}
+ {assign var=level value=1}
+{else}
+ {assign var=level value=$level+1}
+{/if}
+
+{if count($children)}
+<ul class="page-navigation-level-{$level}">
+ {foreach from=$children item=Child}
+ <li>
+ <a href="{$Child->getUrl()}"
+ class="qui-menu-siteid-{$Child->getIdentifier()} left-menu-a"
+ title="{$Child->getTitleAttribute()|escape:'html'}"
+ {if $Child->getTarget()}target="{$Child->getTarget()}"{/if}
+ >
+ {if $this->getAttribute('showFirstLevelIcons') && $Child->getIcon() && $Child->getIcon()|strpos:'image' !== 'false' }
+ {image src=$Child->getIcon() onlyicon=1}
+ {/if}
+ <span class="fa fa-angle-right"></span>
+
+ <span class="left-menu-text">
+ {$Child->getTitle()}
+ </span>
+ </a>
+
+ {include file="`$FileMenu`"
+ children=$Child->getChildren()
+ level=$level
+ }
+ </li>
+ {/foreach}
+</ul>
+{/if}
diff --git a/src/QUI/Menu/Menu.Independent.html b/src/QUI/Menu/Menu.Independent.html
new file mode 100644
index 0000000000000000000000000000000000000000..a9026c5695cb275ef7ab882727e56b874b824f97
--- /dev/null
+++ b/src/QUI/Menu/Menu.Independent.html
@@ -0,0 +1,14 @@
+<nav class="page-menu" data-qui="{$jsControl}" style="display: none;">
+ <div class="page-navigation {if !$showHomeLink}page-navigation__noHomeLink{/if}">
+ {if $showHomeLink}
+ <a href="{url site=$Project->firstChild()}" class="page-navigation-home">
+ <span class="fa fa-home"></span>
+ {$Project->firstChild()->getAttribute('title')}
+ </a>
+ {/if}
+
+ {include file="`$FileMenu`"
+ children=$IndependentMenu->getChildren()
+ }
+ </div>
+</nav>
diff --git a/src/QUI/Menu/Menu.html b/src/QUI/Menu/Menu.html
index 084d852bf92dfa31b815c48c9291b5a681964e9a..09f1a4034587c42bbb74a791c8a594b21641cd6a 100644
--- a/src/QUI/Menu/Menu.html
+++ b/src/QUI/Menu/Menu.html
@@ -1,11 +1,12 @@
<nav class="page-menu" data-qui="{$jsControl}" style="display: none;">
- <div class="page-navigation">
-
+ <div class="page-navigation {if !$showHomeLink}page-navigation__noHomeLink{/if}">
+ {if $showHomeLink}
<a href="{url site=$Project->firstChild()}" class="page-navigation-home">
<span class="fa fa-home"></span>
{$Project->firstChild()->getAttribute('title')}
</a>
+ {/if}
{include file="`$FileMenu`"
Site=$Project->firstChild()
diff --git a/src/QUI/Menu/SlideOut.php b/src/QUI/Menu/SlideOut.php
index 64791175c5d746715e62da25087a9c4b6614987e..ed2dbe8b2c03f90a68af4e702793ead59f359587 100644
--- a/src/QUI/Menu/SlideOut.php
+++ b/src/QUI/Menu/SlideOut.php
@@ -17,6 +17,20 @@
*/
class SlideOut extends QUI\Control
{
+ /**
+ * @param array $attributes
+ */
+ public function __construct($attributes = [])
+ {
+ $this->setAttributes([
+ 'showHomeLink' => true,
+ 'menuId' => false, // if set independent menu template will be used
+ 'showFirstLevelIcons' => false // current it works only for independent menu
+ ]);
+
+ parent::__construct($attributes);
+ }
+
/**
* @return string
* @throws QUI\Exception
@@ -25,15 +39,29 @@ public function getBody()
{
$Engine = QUI::getTemplateManager()->getEngine();
- $Engine->assign(array(
- 'FileMenu' => dirname(__FILE__) . '/Menu.Children.html',
- 'this' => $this,
- 'Site' => $this->getSite(),
- 'Project' => $this->getProject(),
- 'jsControl' => 'package/quiqqer/menu/bin/SlideOut'
- ));
+ $params = [
+ 'this' => $this,
+ 'Project' => $this->getProject(),
+ 'jsControl' => 'package/quiqqer/menu/bin/SlideOut',
+ 'showHomeLink' => $this->getAttribute('showHomeLink')
+ ];
+
+ if ($this->getAttribute('menuId')) {
+ $IndependentMenu = Independent\Handler::getMenu($this->getAttribute('menuId'));
+
+ $template = dirname(__FILE__).'/Menu.Independent.html';
+ $params['FileMenu'] = dirname(__FILE__).'/Menu.Children.Independent.html';
+ $params['IndependentMenu'] = $IndependentMenu;
+ $params['showFirstLevelIcons'] = $this->getAttribute('showFirstLevelIcons');
+ } else {
+ $template = dirname(__FILE__).'/Menu.html';
+ $params['FileMenu'] = dirname(__FILE__).'/Menu.Children.html';
+ $params['Site'] = $this->getSite();
+ }
+
+ $Engine->assign($params);
- return $Engine->fetch(dirname(__FILE__) . '/Menu.html');
+ return $Engine->fetch($template);
}
/**