feat: MegaMenu -> Icons / Images with Description

settings.xml

@@ -24,9 +24,18 @@
                             </title>
                             <select conf="menu.settings.type">
                                 <text>Header-Logo</text>
-                                <option value="Standard">MegaMenu - mit Unterseiten</option>
-                                <option value="Image">MegaMenu - Grosse Seitenbilder</option>
-                                <option value="Icons">MegaMenu - mit Icons</option>
+                                <option value="Standard">
+                                    MegaMenu - mit Unterseiten
+                                </option>
+                                <option value="Icons">
+                                    MegaMenu - Unterseiten mit Icons
+                                </option>
+                                <option value="IconsDescription">
+                                    MegaMenu - Unterseiten mit Icons, Bilder und Beschreibung
+                                </option>
+                                <option value="Image">
+                                    MegaMenu - Grosse Seitenbilder
+                                </option>
                             </select>
                         </settings>
                     </category>

src/QUI/Menu/Mega/IconsDescription.css

+.quiqqer-menu-megaMenu-children-iconsDesc {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+/* ul */
+.quiqqer-menu-megaMenu-children-iconsDesc-list {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+}
+
+/* li's */
+.quiqqer-menu-megaMenu-children-iconsDesc-list-entry {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    float: left;
+    font-size: 14px;
+    font-weight: bold;
+    list-style-type: none;
+    padding: 20px;
+    width: 33.3333%;
+}
+
+.quiqqer-menu-megaMenu-children-iconsDesc-list-entry:hover {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.quiqqer-menu-megaMenu-children-iconsDesc-list-entry li {
+    list-style-type: none;
+}
+
+.quiqqer-menu-megaMenu-children-iconsDesc-list-entry-short {
+    clear: both;
+    float: left;
+    font-size: 12px;
+    font-weight: normal;
+    margin: 10px 0 0;
+    width: 100%;
+}
+
+.quiqqer-menu-megaMenu-children-iconsDesc-list-entry-short li {
+    float: left;
+    margin-bottom: 7px;
+    width: 100%;
+}
+
+.quiqqer-menu-megaMenu-children-iconsDesc-list-entry-short-link .quiqqer-icon {
+    float: left;
+    font-size: 20px;
+    line-height: 30px;
+    width: 40px;
+}
+
+.quiqqer-menu-megaMenu-children-iconsDesc-list-entry-short-link img {
+    float: left;
+    padding-right: 10px;
+    width: 40px;
+}
+
+.quiqqer-menu-megaMenu-children-iconsDesc-list-entry-short-link-title {
+    float: left;
+    width: calc(100% - 40px);
+}
+
+.quiqqer-menu-megaMenu-children-iconsDesc-list-entry-short-link-title-description {
+    clear: both;
+    color: rgba(0, 0, 0, 0.4);
+    display: block;
+    padding: 5px 0;
+}
+
+.quiqqer-menu-megaMenu-children-iconsDesc-list-short-text {
+    color: rgba(0, 0, 0, 0.4);
+}
+
+.quiqqer-menu-megaMenu-children-iconsDesc-entry-short ul {
+    margin-left: 20px;
+}
+
+.quiqqer-menu-megaMenu-children-iconsDesc-list-entry:nth-child(3n+1) {
+    clear: both;
+}

src/QUI/Menu/Mega/IconsDescription.html

+<ul class="quiqqer-menu-megaMenu-children-iconsDesc-list">
+    {foreach $children as $Child}
+    <li class="quiqqer-menu-megaMenu-children-iconsDesc-list-entry">
+        <a href="{url site=$Child}"
+           title="{$Child->getAttribute('title')|escape:" html"}">
+        {$Child->getAttribute('title')}
+        </a>
+
+        {assign var=subchildren value=$Child->getNavigation()}
+
+        {if count($subchildren)}
+        <div class="quiqqer-menu-megaMenu-children-iconsDesc-list-entry-short">
+            <ul>
+                {foreach $subchildren as $SubChild}
+                <li>
+                    <a href="{url site=$SubChild}"
+                       title="{$SubChild->getAttribute('title')|escape:" html"}"
+                       class="quiqqer-menu-megaMenu-children-iconsDesc-list-entry-short-link"
+                    >
+                        {image src=$SubChild->getAttribute('image_site') width=40}
+                        <span class="quiqqer-menu-megaMenu-children-iconsDesc-list-entry-short-link-title">
+                            {$SubChild->getAttribute('title')}
+                            {if $SubChild->getAttribute('short') !== ''}
+                            <span class="quiqqer-menu-megaMenu-children-iconsDesc-list-entry-short-link-title-description">
+                                {$SubChild->getAttribute('short')}
+                            </span>
+                            {/if}
+                        </span>
+                    </a>
+                </li>
+                {/foreach}
+            </ul>
+        </div>
+        {else}
+        {if $Child->getAttribute('short')}
+        <div class="quiqqer-menu-megaMenu-children-iconsDesc-list-entry-short quiqqer-menu-megaMenu-children-iconsDesc-list-short-text">
+            {$Child->getAttribute('short')}
+        </div>
+        {/if}
+        {/if}
+    </li>
+    {/foreach}
+</ul>

src/QUI/Menu/Mega/IconsDescription.php

+<?php
+
+/**
+ * This file contains QUI\Menu\Mega\IconsDescription
+ */
+namespace QUI\Menu\Mega;
+
+use QUI;
+
+/**
+ * Class Icons
+ * Sub menu -> Icons / Images with Description
+ *
+ * @package QUI\Menu
+ */
+class IconsDescription extends AbstractChild
+{
+    /**
+     * @var null
+     */
+    protected $children = null;
+
+    /**
+     * Standard constructor.
+     *
+     * @param array $params
+     */
+    public function __construct(array $params = array())
+    {
+        parent::__construct($params);
+
+        $this->addCSSClass('quiqqer-menu-megaMenu-children-iconsDesc');
+        $this->addCSSFile(dirname(__FILE__) . '/IconsDescription.css');
+    }
+
+    /**
+     * Return the html body
+     *
+     * @return string
+     * @throws QUI\Exception
+     */
+    public function getBody()
+    {
+        $Engine = QUI::getTemplateManager()->getEngine();
+
+        $Engine->assign(array(
+            'this'     => $this,
+            'children' => $this->getChildren(),
+            'Site'     => $this->getSite()
+        ));
+
+        return $Engine->fetch(dirname(__FILE__) . '/IconsDescription.html');
+    }
+}

src/QUI/Menu/MegaMenu.php

@@ -51,6 +51,11 @@ public function getBody()
                 $childControl = QUI\Menu\Mega\Icons::class;
                 break;
 
+            case 'IconsDescription':
+            case QUI\Menu\Mega\IconsDescription::class:
+                $childControl = QUI\Menu\Mega\IconsDescription::class;
+                break;
+
             default:
             case 'Standard':
             case QUI\Menu\Mega\Standard::class: