Merge branch 'dev'

README.md

@@ -13,6 +13,13 @@ Packetname:
 Features
 --------
 
+- Mega Menu (mobile fähig - wechsel auf SlideOut)
+    - besitzt verschiedenen Anzeigearten
+        - MegaMenu - mit Unterseiten
+        - MegaMenu - Unterseiten mit Icons
+        - MegaMenu - Unterseiten mit Icons, Bilder und Beschreibung
+        - MegaMenu - Grosse Seitenbilder
+        - MegaMenu - Big page images
 - Elastic Menu (mobile fähig)
 - SlideOut Menu (mobile fähig)
 
@@ -45,6 +52,34 @@ MIT
 Entwickler
 --------
 
+**MegaMenu Beispiel**
+
+
+```php
+<?php
+
+$Menu = new \QUI\Menu\MegaMenu(array(
+    'showStart' => true,
+    'Project'   => $Site->getProject()
+));
+
+// logo hinzufügen
+$Menu->appendHTML(
+    '<a href="{url id=1}" class="page-header-menu-logo" title="Zur Startseite">
+        <img src="' . $Engine->getTemplateVariable('URL_TPL_DIR') . 'bin/images/logo.png"/>
+    </a>'
+);
+
+```
+
+```
+    <div class="page-header-menu">
+        <div class="grid-container">
+            {$Menu->create()}
+        </div>
+    </div>
+```
+
 **Control Nutzung in Smarty**
 
 ```

bin/MegaMenu.js

+/**
+ * @module package/quiqqer/menu/bin/MegaMenu
+ * @author www.pcsg.de (Henning Leutz)
+ *
+ * @require qui/QUI
+ * @require qui/controls/Control
+ */
+define('package/quiqqer/menu/bin/MegaMenu', [
+
+    'qui/QUI',
+    'qui/controls/Control'
+
+], function (QUI, QUIControl) {
+    "use strict";
+
+    return new Class({
+
+        Extends: QUIControl,
+        Type   : 'package/quiqqer/menu/bin/MegaMenu',
+
+        Binds: [
+            '$onImport'
+        ],
+
+        initialize: function (options) {
+            this.parent(options);
+
+            this.addEvents({
+                onImport: this.$onImport
+            });
+
+            this.$liSize = 0;
+            this.$enter  = false;
+            this.$Nav    = null;
+        },
+
+        /**
+         * event: on import
+         */
+        $onImport: function () {
+            this.$Nav = this.getElm().getElement('nav');
+
+            this.$Menu = new Element('div', {
+                'class': 'quiqqer-menu-megaMenu-list-item-menu control-background',
+                styles : {
+                    opacity: 0,
+                    top    : 0
+                },
+                events : {
+                    mouseenter: function () {
+                        this.$enter = true;
+                    }.bind(this),
+                    mouseleave: function () {
+                        this.$enter = false;
+                        this.$hideCheck();
+                    }.bind(this)
+                }
+            }).inject(this.getElm());
+
+            this.$liSize = this.getElm().getSize().y;
+
+            this.$Nav.getElements('.quiqqer-menu-megaMenu-list-item').addEvents({
+                mouseenter: function (event) {
+                    var Target = event.target;
+
+                    if (Target.nodeName != 'LI') {
+                        Target = Target.getParent('li');
+                    }
+
+                    this.$enter = true;
+                    this.showMenuFor(Target);
+                }.bind(this),
+
+                mouseleave: function () {
+                    this.$enter = false;
+                    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();
+                    }
+                }
+            });
+        },
+
+        /**
+         * Shows the menu for the li element
+         *
+         * @param {HTMLLIElement} liElement
+         */
+        showMenuFor: function (liElement) {
+            var Menu = liElement.getElement('.quiqqer-menu-megaMenu-list-item-menu');
+
+            if (!Menu) {
+                return this.$hide();
+            }
+
+            this.$Menu.set('html', Menu.get('html'));
+
+            return this.$show();
+        },
+
+        /**
+         * Show the menu
+         * @returns {Promise}
+         */
+        $show: function () {
+            return new Promise(function (resolve) {
+                this.$Menu.setStyles({
+                    display: 'flex',
+                    top    : this.$liSize // vorerst, sonst schauts doof aus
+                });
+
+                moofx(this.$Menu).animate({
+                    opacity: 1,
+                    top    : this.$liSize
+                }, {
+                    duration: 200,
+                    callback: resolve
+                });
+            }.bind(this));
+        },
+
+        /**
+         * Show the menu
+         * @returns {Promise}
+         */
+        $hide: function () {
+            return new Promise(function (resolve) {
+                moofx(this.$Menu).animate({
+                    opacity: 0,
+                    top    : this.$liSize - 10
+                }, {
+                    duration: 200,
+                    callback: function () {
+                        this.$Menu.setStyles({
+                            display: 'none'
+                        });
+
+                        resolve();
+                    }.bind(this)
+                });
+            }.bind(this));
+        },
+
+        /**
+         * Checks, if the menu must closed or not
+         * the check is after 500ms
+         */
+        $hideCheck: function () {
+            (function () {
+                if (this.$enter === false) {
+                    this.$hide();
+                }
+            }).delay(500, this);
+        }
+    });
+});
\ No newline at end of file

bin/MenuBar.css

+.quiqqer-menu-menubar {
+    background: rgba(255, 255, 255, 0.9);
+    border-bottom: 2px solid rgba(0, 0, 0, 0.4);
+    box-sizing: content-box;
+    height: 60px;
+    left: 0;
+    position: fixed;
+    top: -100px;
+    width: 100%;
+    z-index: 900;
+}
+
+.quiqqer-menu-menubar-item {
+    border: none;
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    float: left;
+    padding: 0 20px;
+    position: relative;
+    line-height: 58px;
+}
+
+.quiqqer-menu-menubar-item-icon,
+.quiqqer-menu-menubar-item-title {
+    float: left;
+    line-height: 60px;
+}
+
+.quiqqer-menu-menubar-item-icon {
+    padding-right: 10px;
+}
\ No newline at end of file

bin/MenuBar.js

+/**
+ * @module package/quiqqer/menu/bin/MenuBar
+ * @author www.pcsg.de (Henning Leutz)
+ *
+ * @require qui/QUI
+ * @require qui/controls/Control
+ * @require css!package/quiqqer/menu/bin/MenuBar.css
+ */
+define('package/quiqqer/menu/bin/MenuBar', [
+    'qui/QUI',
+    'qui/controls/Control',
+
+    'css!package/quiqqer/menu/bin/MenuBar.css'
+], function (QUI, QUIControl) {
+    "use strict";
+
+    return new Class({
+        Type   : 'package/quiqqer/menu/bin/MenuBar',
+        Extends: QUIControl,
+
+        Binds: [
+            'trigger',
+            '$onInject'
+        ],
+
+        initialize: function (options) {
+            this.parent(options);
+
+            this.$children  = [];
+            this.$Container = null;
+            this.$show      = false;
+
+            this.addEvents({
+                onInject: this.$onInject
+            });
+        },
+
+        /**
+         * Create th DOMNode element of the menu
+         *
+         * @returns {HTMLDivElement}
+         */
+        create: function () {
+            this.$Elm = new Element('div', {
+                'class': 'quiqqer-menu-menubar',
+                html   : '<div class="grid-container"></div>',
+                styles : {
+                    opacity: 0,
+                    top    : -100
+                }
+            });
+
+            this.$Container = this.$Elm.getElement('.grid-container');
+
+            for (var i = 0, len = this.$children.length; i < len; i++) {
+                this.$createChild(this.$children[i]).inject(this.$Container);
+            }
+
+            return this.$Elm;
+        },
+
+        /**
+         * event: on inject
+         */
+        $onInject: function () {
+            window.addEvent('scroll', this.trigger);
+            this.trigger();
+        },
+
+        /**
+         * display methods
+         */
+
+        /**
+         * Trigger scroll event
+         */
+        trigger: function () {
+            var scroll = window.getScroll();
+
+            if (scroll.y <= 80) {
+                this.hide();
+                return;
+            }
+
+            this.show();
+        },
+
+        /**
+         * show the bar
+         */
+        show: function () {
+            if (this.$show) {
+                return;
+            }
+
+            this.$show = true;
+            this.fireEvent('show', [this]);
+
+            moofx(this.$Elm).animate({
+                opacity: 1,
+                top    : 0
+            });
+        },
+
+        /**
+         * hide the bar
+         */
+        hide: function () {
+            if (this.$show === false) {
+                return;
+            }
+
+            this.$show = false;
+            this.fireEvent('hide', [this]);
+
+            moofx(this.$Elm).animate({
+                opacity: 0,
+                top    : -100
+            });
+        },
+
+        /**
+         * Children methods
+         */
+
+        /**
+         * Add a children menu entry
+         *
+         * @param {Object} Child - {name:'', title: '', icon: ''} || QUI COntrol
+         */
+        appendChild: function (Child) {
+            this.$children.push(Child);
+
+            if (!this.$Elm) {
+                return;
+            }
+
+            this.$createChild(Child).inject(this.$Container);
+        },
+
+        /**
+         * Create the DOMNode of the menu item
+         *
+         * @param {Object} Child
+         * @returns {HTMLElement}
+         */
+        $createChild: function (Child) {
+            if ('getType' in Child) {
+                Child.addEvent('onInject', function (Child) {
+                    Child.getElm().addClass('quiqqer-menu-menubar-item');
+                });
+
+                return Child;
+            }
+
+            var Node = new Element('div', {
+                'class': 'quiqqer-menu-menubar-item button'
+            });
+
+            if ("styles" in Child) {
+                Node.setStyles(Child.styles);
+            }
+
+            if ("events" in Child) {
+                Node.addEvents(Child.events);
+            }
+
+
+            if ("icon" in Child) {
+                var Icon = new Element('span', {
+                    'class': Child.icon
+                });
+
+                Icon.addClass('quiqqer-menu-menubar-item-icon');
+                Icon.inject(Node);
+            }
+
+            if ("title" in Child) {
+                var Title = new Element('span', {
+                    'html': Child.title
+                });
+
+                Title.addClass('quiqqer-menu-menubar-item-title');
+                Title.inject(Node);
+            }
+
+            return Node;
+        }
+    });
+});
\ No newline at end of file

composer.json

-{
-    "name" : "quiqqer/menu",
-    "type" : "quiqqer-module",
-    "description" : "QUIQQER menus for projects",
-    "version" : "dev-master",
-    "license" : "GPL-3.0+",
-
-    "authors" : [{
-        "name": "Henning Leutz",
-        "email": "leutz@pcsg.de",
-        "homepage": "http://www.pcsg.de",
-        "role": "Developer"
-    }],
-
-    "support" : {
-        "email": "support@pcsg.de",
-        "url": "http://www.pcsg.de"
-    },
-
-    "require": {
-        "php" : ">=5.3",
-        "quiqqer/quiqqer" : "*@dev"
-    },
-
-    "autoload": {
-        "psr-0" : {
-            "QUI" : "src/"
-        }
-    }
-}
+{
+  "name": "quiqqer/menu",
+  "type": "quiqqer-module",
+  "description": "QUIQQER menus for projects",
+  "version": "dev-dev",
+  "license": "GPL-3.0+",
+  "authors": [
+    {
+      "name": "Henning Leutz",
+      "email": "leutz@pcsg.de",
+      "homepage": "http://www.pcsg.de",
+      "role": "Developer"
+    }
+  ],
+  "support": {
+    "email": "support@pcsg.de",
+    "url": "http://www.pcsg.de"
+  },
+  "require": {
+    "php": ">=5.3",
+    "quiqqer\/quiqqer": "*@dev"
+  },
+  "autoload": {
+    "psr-4": {
+      "QUI\\Menu\\": "src/QUI/Menu"
+    }
+  }
+}
\ No newline at end of file

locale.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <locales>
     <groups name="quiqqer/menu" datatype="php,js">
+        <locale name="menu.settings.category">
+            <de><![CDATA[Menü]]></de>
+            <en><![CDATA[Menu]]></en>
+        </locale>
+        <locale name="menu.settings.title">
+            <de><![CDATA[Menü]]></de>
+            <en><![CDATA[Menu]]></en>
+        </locale>
+        <locale name="menu.settings.type">
+            <de><![CDATA[Menü Art]]></de>
+            <en><![CDATA[Menu type]]></en>
+        </locale>
+        <locale name="menu.settings.Standard">
+            <de><![CDATA[MegaMenu - mit Unterseiten]]></de>
+            <en><![CDATA[MegaMenu - with sub pages]]></en>
+        </locale>
+        <locale name="menu.settings.Icons">
+            <de><![CDATA[MegaMenu - Unterseiten mit Icons]]></de>
+            <en><![CDATA[MegaMenu - Sub pages with icons]]></en>
+        </locale>
+        <locale name="menu.settings.IconsDescription">
+            <de><![CDATA[MegaMenu - Unterseiten mit Icons, Bilder und Beschreibung]]></de>
+            <en><![CDATA[MegaMenu - Sub pages with Icons, Images and Descriptions]]></en>
+        </locale>
+        <locale name="menu.settings.Image">
+            <de><![CDATA[MegaMenu - Grosse Seitenbilder]]></de>
+            <en><![CDATA[MegaMenu - Big page images]]></en>
+        </locale>
+
         <locale name="menu.control.navigation.setting.startId">
             <de><![CDATA[Start-ID]]></de>
             <en><![CDATA[Start ID]]></en>

settings.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<quiqqer>
+    <project>
+
+        <settings>
+            <config>
+                <section name="menu.settings">
+                    <conf name="type">
+                        <type><![CDATA[string]]></type>
+                    </conf>
+                </section>
+            </config>
+
+
+            <window>
+                <categories>
+                    <category name="menu">
+                        <text>
+                            <locale group="quiqqer/menu" var="menu.settings.category"/>
+                        </text>
+                        <icon>fa fa-bars</icon>
+
+                        <settings title="menu.settings" name="menu.settings">
+                            <title>
+                                <locale group="quiqqer/menu" var="menu.settings.title"/>
+                            </title>
+                            <select conf="menu.settings.type">
+                                <text>
+                                    <locale group="quiqqer/menu" var="menu.settings.type"/>
+                                </text>
+                                <option value="Standard">
+                                    <locale group="quiqqer/menu" var="menu.settings.Standard"/>
+                                </option>
+                                <option value="Icons">
+                                    <locale group="quiqqer/menu" var="menu.settings.Icons"/>
+                                </option>
+                                <option value="IconsDescription">
+                                    <locale group="quiqqer/menu" var="menu.settings.IconsDescription"/>
+                                </option>
+                                <option value="Image">
+                                    <locale group="quiqqer/menu" var="menu.settings.Image"/>
+                                </option>
+                            </select>
+                        </settings>
+                    </category>
+                </categories>
+
+            </window>
+        </settings>
+
+    </project>
+</quiqqer>
\ No newline at end of file

src/QUI/Menu/AbstractMenu.php

+<?php
+
+namespace QUI\Menu;
+
+use QUI;
+
+/**
+ * Class AbstractMenu
+ * Starting point for menu controls
+ *
+ * @package QUI\Menu
+ */
+abstract class AbstractMenu extends QUI\Control
+{
+    /**
+     * @var string
+     */
+    protected $append = '';
+
+    /**
+     * @var string
+     */
+    protected $prepend = '';
+
+    /**
+     * append html to the menu
+     * adds a html after the menu
+     *
+     * @param string $html
+     */
+    public function appendHTML($html)
+    {
+        $this->append = $html;
+    }
+
+    /**
+     * prepend html to the menu
+     * adds a html before the menu
+     *
+     * @param string $html
+     */
+    public function prependHTML($html)
+    {
+        $this->prepend = $html;
+    }
+}

src/QUI/Menu/DropDownMenu.php

@@ -42,9 +42,9 @@ public function getBody()
         $Engine = QUI::getTemplateManager()->getEngine();
 
         $Engine->assign(array(
-            'this' => $this,
-            'Site' => $this->getSite(),
-            'Project' => $this->getProject(),
+            'this'     => $this,
+            'Site'     => $this->getSite(),
+            'Project'  => $this->getProject(),
             'FileMenu' => dirname(__FILE__) . '/DropDownMenu.Children.html'
         ));
 

src/QUI/Menu/Elastic.php

@@ -34,10 +34,10 @@ public function getBody()
         $Engine = QUI::getTemplateManager()->getEngine();
 
         $Engine->assign(array(
-            'FileMenu' => dirname(__FILE__) . '/Menu.Children.html',
-            'this' => $this,
-            'Site' => $this->getSite(),
-            'Project' => $this->getProject(),
+            'FileMenu'  => dirname(__FILE__) . '/Menu.Children.html',
+            'this'      => $this,
+            'Site'      => $this->getSite(),
+            'Project'   => $this->getProject(),
             'jsControl' => 'package/quiqqer/menu/bin/ElasticMenu'
         ));
 

src/QUI/Menu/Mega/AbstractChild.php

+<?php
+
+namespace QUI\Menu\Mega;
+
+use QUI;
+
+/**
+ * Class AbstractMenu
+ * Starting point for menu controls
+ *
+ * @package QUI\Menu
+ */
+abstract class AbstractChild extends QUI\Control
+{
+    /**
+     * @var null|array
+     */
+    protected $children = null;
+
+    /**
+     * Return the current site
+     *
+     * @return mixed|QUI\Projects\Site
+     */
+    protected function getSite()
+    {
+        if ($this->getAttribute('Site')) {
+            return $this->getAttribute('Site');
+        }
+
+        return QUI::getRewrite()->getSite();
+    }
+
+    /**
+     * @return array
+     */
+    public function getChildren()
+    {
+        if (is_null($this->children)) {
+            $this->children = $this->getSite()->getNavigation();
+        }
+
+        return $this->children;
+    }
+
+    /**
+     * Returns the number of children
+     *
+     * @return int
+     */
+    public function count()
+    {
+        return count($this->getChildren());
+    }
+}

src/QUI/Menu/Mega/Icons.css

+.quiqqer-menu-megaMenu-children-icons {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+/* ul */
+.quiqqer-menu-megaMenu-children-icons-list {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+}
+
+/* li's */
+.quiqqer-menu-megaMenu-children-icons-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-icons-list-entry:hover {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.quiqqer-menu-megaMenu-children-icons-list-entry li {
+    list-style-type: none;
+}
+
+.quiqqer-menu-megaMenu-children-icons-list-entry-short {
+    clear: both;
+    float: left;
+    font-size: 12px;
+    font-weight: normal;
+    margin: 10px 0 0;
+    width: 100%;
+}
+
+.quiqqer-menu-megaMenu-children-icons-list-entry-short li {
+    float: left;
+    margin-bottom: 7px;
+    width: 100%;
+}
+
+.quiqqer-menu-megaMenu-children-icons-list-entry-short-link .quiqqer-icon {
+    float: left;
+    line-height: 18px;
+    width: 20px;
+}
+
+.quiqqer-menu-megaMenu-children-icons-list-entry-short-link-title {
+    float: left;
+    width: calc(100% - 20px);
+}
+
+.quiqqer-menu-megaMenu-children-icons-list-short-text {
+    color: rgba(0, 0, 0, 0.4);
+}
+
+.quiqqer-menu-megaMenu-children-icons-entry-short ul {
+    margin-left: 20px;
+}
+
+.quiqqer-menu-megaMenu-children-icons-list-entry:nth-child(3n+1) {
+    clear: both;
+}

src/QUI/Menu/Mega/Icons.html

+<ul class="quiqqer-menu-megaMenu-children-icons-list">
+    {foreach $children as $Child}
+    <li class="quiqqer-menu-megaMenu-children-icons-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-icons-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-icons-list-entry-short-link"
+                    >
+                        {image src=$SubChild->getAttribute('image_site') onlyicon=1}
+                        <span class="quiqqer-menu-megaMenu-children-icons-list-entry-short-link-title">
+                            {$SubChild->getAttribute('title')}
+                        </span>
+                    </a>
+                </li>
+                {/foreach}
+            </ul>
+        </div>
+        {else}
+        {if $Child->getAttribute('short')}
+        <div class="quiqqer-menu-megaMenu-children-icons-list-entry-short quiqqer-menu-megaMenu-children-icons-list-short-text">
+            {$Child->getAttribute('short')}
+        </div>
+        {/if}
+        {/if}
+    </li>
+    {/foreach}
+</ul>

src/QUI/Menu/Mega/Icons.php

+<?php
+
+/**
+ * This file contains QUI\Menu\Mega\Icons
+ */
+namespace QUI\Menu\Mega;
+
+use QUI;
+
+/**
+ * Class Icons
+ *
+ * @package QUI\Menu
+ */
+class Icons 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-icons');
+        $this->addCSSFile(dirname(__FILE__) . '/Icons.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__) . '/Icons.html');
+    }
+}

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/Mega/Image.css

+.quiqqer-menu-megaMenu-children-image {
+    display: flex;
+    flex-wrap: wrap;
+    float: left;
+    width: 100%;
+}
+
+.quiqqer-menu-megaMenu-children-image-entry {
+    /*flex-grow: 1;*/
+    float: left;
+    margin-bottom: 10px;
+    min-width: 25%;
+    padding: 10px;
+    width: 25%;
+}
+
+.quiqqer-menu-megaMenu-children-image-entry-img {
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    float: left;
+    padding-bottom: 56.25%; /* 16:9 */
+    position: relative;
+    width: 100%;
+}
+
+.quiqqer-menu-megaMenu-children-image-entry-img .quiqqer-icon {
+    font-size: 60px;
+    position: absolute;
+    top: calc(50% - 30px);
+    text-align: center;
+    width: 100%;
+}
+
+.quiqqer-menu-megaMenu-children-image-entry-title {
+    clear: both;
+    float: left;
+    padding: 5px 0;
+    width: 100%;
+}
\ No newline at end of file

src/QUI/Menu/Mega/Image.html

+{foreach $children as $Child}
+<div class="quiqqer-menu-megaMenu-children-image-entry">
+    <a href="{url Site=$Child}">
+        {image src=$Child->getAttribute('image_site') width=300 assign=bg onlysrc=1}
+        <div class="quiqqer-menu-megaMenu-children-image-entry-img"
+             style="background-image: url('{$bg}')"
+        >
+            &nbsp;
+            {image src=$Child->getAttribute('image_site') onlyicon=1}
+        </div>
+        <span class="quiqqer-menu-megaMenu-children-image-entry-title">
+            {$Child->getAttribute('title')}
+        </span>
+    </a>
+</div>
+{/foreach}
\ No newline at end of file

src/QUI/Menu/Mega/Image.php

+<?php
+
+/**
+ * This file contains QUI\Menu\Mega\Image
+ */
+namespace QUI\Menu\Mega;
+
+use QUI;
+
+/**
+ * Class MegaMenu
+ *
+ * @package QUI\Menu
+ */
+class Image 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-image');
+        $this->addCSSFile(dirname(__FILE__) . '/Image.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__) . '/Image.html');
+    }
+}