Das Menü aus dem Basic Company Template wird als Control gebaut (noch nicht ganz fertig)

bin/DropDownMenu.js

@@ -187,4 +187,4 @@ define('package/quiqqer/menu/bin/DropDownMenu', [
             });
         }
     });
-});
\ No newline at end of file
+});

bin/SidebarDropDownMenu.js

+/**
+ * Sidebar menu control
+ *
+ * @module package/quiqqer/menu/bin/js/SidebarDropDownMenu
+ * @author www.pcsg.de (Michael Danielczok, Henning Leutz)
+ *
+ * @require qui/QUI
+ * @require qui/controls/Control
+ * @require URL_OPT_DIR +bin/js/snap.svg-min.js
+ * @require css!package/quiqqer/template-qui/bin/js/ElasticMenu.css
+ */
+
+require.config({
+
+    baseUrl: URL_BIN_DIR + "QUI",
+
+    paths: {
+        "qui"     : URL_OPT_DIR + "bin/qui/qui",
+        "locale"  : URL_VAR_DIR + "locale/bin",
+        "controls": URL_BIN_DIR + "QUI/controls"
+    },
+
+    waitSeconds: 0,
+    catchError : true,
+
+    map: {
+        "*": {
+            "css": URL_OPT_DIR + "bin/qui/qui/lib/css.js"
+        }
+    }
+});
+
+window.addEvent("domready", function () {
+    "use strict";
+
+    // Load QUI
+    require(["qui/QUI"], function (QUI) {
+        QUI.addEvent("onError", function (msg, url, linenumber) {
+            console.error(msg);
+            console.error(url);
+            console.error("LineNo: " + linenumber);
+        });
+    });
+
+    /*
+     * Left nav:
+     * open or close the sub nav
+     */
+
+    var ToggleButton = document.getElements(".quiqqer-fa-levels-icon");
+
+    ToggleButton.addEvent("click", function () {
+        var LiLeft = this.getParent().getParent();
+        var NavSubLeft = LiLeft.getElement("div");
+
+        /*
+         * Wenn menü ZU ist:
+         */
+        if (!NavSubLeft.getSize().y.toInt()) {
+
+            NavSubLeft.setStyles({
+                height  : 0,
+                opacity : 0,
+                overflow: "hidden",
+                display : "block"
+            });
+
+            moofx(NavSubLeft).animate({
+                height  : NavSubLeft.getElement("ul").getSize().y.toInt(),
+                opacity : 1
+            }, {
+                duration: 250,
+                callback: function () {
+                    moofx(NavSubLeft).animate({
+                        height: "100%"
+                    });
+                }
+            });
+            this.addClass("fa-nav-levels-rotate");
+            return;
+        }
+
+        /*
+         * Wenn menü AUF ist:
+         */
+        NavSubLeft.setStyle("overflow", "hidden");
+
+        moofx(NavSubLeft).animate({
+            height : 0,
+            opacity: 0
+        }, {
+            duration: 250,
+            callback: function () {
+                moofx(NavSubLeft).animate({
+                    height: 0
+                });
+            }
+        });
+        this.removeClass("fa-nav-levels-rotate");
+    });
+
+
+    /*
+     * Mobile nav:
+     * open or close the sub nav
+     */
+    var Nav = document.id("navigation");
+    var NavButton = document.getElement("nav.nav-box");
+    var NavButtonDropDown = document.getElements(".fa-chevron-down");
+
+    NavButtonDropDown.addEvent("click", function () {
+        var Li = this.getParent();
+        var NavSub = Li.getElement(".page-header-navigation-sub");
+        if (NavSub.getStyle("height").toInt() < 1) {
+            NavSub.addClass("nav-toggle-sub");
+            this.addClass("fa-chevron-down-rotate-mobile");
+        } else {
+            NavSub.removeClass("nav-toggle-sub");
+            this.removeClass("fa-chevron-down-rotate-mobile");
+        }
+    });
+
+    NavButton.addEvent("click", function () {
+        if (Nav.getStyle("height").toInt() < 1) {
+            Nav.addClass("nav-toggle");
+        } else {
+            Nav.removeClass("nav-toggle");
+        }
+
+    });
+
+});

bin/SlideOut.js

@@ -331,4 +331,4 @@ define('package/quiqqer/menu/bin/SlideOut', [
         }
     });
 
-});
\ No newline at end of file
+});

bin/slideout.min.js

-!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;"undefined"!=typeof window?e=window:"undefined"!=typeof global?e=global:"undefined"!=typeof self&&(e=self),e.Slideout=t()}}(function(){var t,e,n;return function i(t,e,n){function o(s,a){if(!e[s]){if(!t[s]){var u=typeof require=="function"&&require;if(!a&&u)return u(s,!0);if(r)return r(s,!0);var f=new Error("Cannot find module '"+s+"'");throw f.code="MODULE_NOT_FOUND",f}var l=e[s]={exports:{}};t[s][0].call(l.exports,function(e){var n=t[s][1][e];return o(n?n:e)},l,l.exports,i,t,e,n)}return e[s].exports}var r=typeof require=="function"&&require;for(var s=0;s<n.length;s++)o(n[s]);return o}({1:[function(t,e,n){"use strict";var i=t("decouple");var o=t("emitter");var r;var s=false;var a=window.document;var u=a.documentElement;var f=window.navigator.msPointerEnabled;var l={start:f?"MSPointerDown":"touchstart",move:f?"MSPointerMove":"touchmove",end:f?"MSPointerUp":"touchend"};var c=function _(){var t=/^(Webkit|Khtml|Moz|ms|O)(?=[A-Z])/;var e=a.getElementsByTagName("script")[0].style;for(var n in e){if(t.test(n)){return"-"+n.match(t)[0].toLowerCase()+"-"}}if("WebkitOpacity"in e){return"-webkit-"}if("KhtmlOpacity"in e){return"-khtml-"}return""}();function p(t,e){for(var n in e){if(e[n]){t[n]=e[n]}}return t}function h(t,e){t.prototype=p(t.prototype||{},e.prototype)}function d(t){t=t||{};this._startOffsetX=0;this._currentOffsetX=0;this._opening=false;this._moved=false;this._opened=false;this._preventOpen=false;this._touch=t.touch===undefined?true:t.touch&&true;this.panel=t.panel;this.menu=t.menu;this.panel.className+=" slideout-panel";this.menu.className+=" slideout-menu";this._fx=t.fx||"ease";this._duration=parseInt(t.duration,10)||300;this._tolerance=parseInt(t.tolerance,10)||70;this._padding=this._translateTo=parseInt(t.padding,10)||256;this._orientation=t.side==="right"?-1:1;this._translateTo*=this._orientation;if(this._touch){this._initTouchEvents()}}h(d,o);d.prototype.open=function(){var t=this;this.emit("beforeopen");if(u.className.search("slideout-open")===-1){u.className+=" slideout-open"}this._setTransition();this._translateXTo(this._translateTo);this._opened=true;setTimeout(function(){t.panel.style.transition=t.panel.style["-webkit-transition"]="";t.emit("open")},this._duration+50);return this};d.prototype.close=function(){var t=this;if(!this.isOpen()&&!this._opening){return this}this.emit("beforeclose");this._setTransition();this._translateXTo(0);this._opened=false;setTimeout(function(){u.className=u.className.replace(/ slideout-open/,"");t.panel.style.transition=t.panel.style["-webkit-transition"]=t.panel.style[c+"transform"]=t.panel.style.transform="";t.emit("close")},this._duration+50);return this};d.prototype.toggle=function(){return this.isOpen()?this.close():this.open()};d.prototype.isOpen=function(){return this._opened};d.prototype._translateXTo=function(t){this._currentOffsetX=t;this.panel.style[c+"transform"]=this.panel.style.transform="translate3d("+t+"px, 0, 0)"};d.prototype._setTransition=function(){this.panel.style[c+"transition"]=this.panel.style.transition=c+"transform "+this._duration+"ms "+this._fx};d.prototype._initTouchEvents=function(){var t=this;i(a,"scroll",function(){if(!t._moved){clearTimeout(r);s=true;r=setTimeout(function(){s=false},250)}});a.addEventListener(l.move,function(e){if(t._moved){e.preventDefault()}});this.panel.addEventListener(l.start,function(e){if(typeof e.touches==="undefined"){return}t._moved=false;t._opening=false;t._startOffsetX=e.touches[0].pageX;t._preventOpen=!t._touch||!t.isOpen()&&t.menu.clientWidth!==0});this.panel.addEventListener("touchcancel",function(){t._moved=false;t._opening=false});this.panel.addEventListener(l.end,function(){if(t._moved){t._opening&&Math.abs(t._currentOffsetX)>t._tolerance?t.open():t.close()}t._moved=false});this.panel.addEventListener(l.move,function(e){if(s||t._preventOpen||typeof e.touches==="undefined"){return}var n=e.touches[0].clientX-t._startOffsetX;var i=t._currentOffsetX=n;if(Math.abs(i)>t._padding){return}if(Math.abs(n)>20){t._opening=true;var o=n*t._orientation;if(t._opened&&o>0||!t._opened&&o<0){return}if(o<=0){i=n+t._padding*t._orientation;t._opening=false}if(!t._moved&&u.className.search("slideout-open")===-1){u.className+=" slideout-open"}t.panel.style[c+"transform"]=t.panel.style.transform="translate3d("+i+"px, 0, 0)";t.emit("translate",i);t._moved=true}})};d.prototype.enableTouch=function(){this._touch=true;return this};d.prototype.disableTouch=function(){this._touch=false;return this};e.exports=d},{decouple:2,emitter:3}],2:[function(t,e,n){"use strict";var i=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}();function o(t,e,n){var o,r=false;function s(t){o=t;a()}function a(){if(!r){i(u);r=true}}function u(){n.call(t,o);r=false}t.addEventListener(e,s,false)}e.exports=o},{}],3:[function(t,e,n){"use strict";var i=function(t,e){if(!(t instanceof e)){throw new TypeError("Cannot call a class as a function")}};n.__esModule=true;var o=function(){function t(){i(this,t)}t.prototype.on=function e(t,n){this._eventCollection=this._eventCollection||{};this._eventCollection[t]=this._eventCollection[t]||[];this._eventCollection[t].push(n);return this};t.prototype.once=function n(t,e){var n=this;function i(){n.off(t,i);e.apply(this,arguments)}i.listener=e;this.on(t,i);return this};t.prototype.off=function o(t,e){var n=undefined;if(!this._eventCollection||!(n=this._eventCollection[t])){return this}n.forEach(function(t,i){if(t===e||t.listener===e){n.splice(i,1)}});if(n.length===0){delete this._eventCollection[t]}return this};t.prototype.emit=function r(t){var e=this;for(var n=arguments.length,i=Array(n>1?n-1:0),o=1;o<n;o++){i[o-1]=arguments[o]}var r=undefined;if(!this._eventCollection||!(r=this._eventCollection[t])){return this}r=r.slice(0);r.forEach(function(t){return t.apply(e,i)});return this};return t}();n["default"]=o;e.exports=n["default"]},{}]},{},[1])(1)});
\ No newline at end of file
+!function (t) {
+    if ("object" == typeof exports && "undefined" != typeof module)module.exports = t();else if ("function" == typeof define && define.amd)define([], t);else {
+        var e;"undefined" != typeof window ? e = window : "undefined" != typeof global ? e = global : "undefined" != typeof self && (e = self),e.Slideout = t()
+    }
+}(function () {
+    var t,e,n;return function i(t,e,n) {
+        function o(s,a) {
+            if (!e[s]) {
+                if (!t[s]) {
+                    var u = typeof require == "function" && require;if (!a && u)return u(s, !0);if (r)return r(s, !0);var f = new Error("Cannot find module '" + s + "'");throw f.code = "MODULE_NOT_FOUND",f
+                }var l = e[s] = {exports: {}};t[s][0].call(l.exports, function (e) {
+                    var n = t[s][1][e];return o(n ? n : e)
+                }, l, l.exports, i, t, e, n)
+            }return e[s].exports
+        }var r = typeof require == "function" && require;for (var s = 0; s < n.length; s++)o(n[s]);return o
+    }({1: [function (t,e,n) {
+        "use strict";var i = t("decouple");var o = t("emitter");var r;var s = false;var a = window.document;var u = a.documentElement;var f = window.navigator.msPointerEnabled;var l = {start: f ? "MSPointerDown" : "touchstart",move: f ? "MSPointerMove" : "touchmove",end: f ? "MSPointerUp" : "touchend"};var c = function _() {
+            var t = /^(Webkit|Khtml|Moz|ms|O)(?=[A-Z])/;var e = a.getElementsByTagName("script")[0].style;for (var n in e) {
+                if (t.test(n)) {
+                    return "-" + n.match(t)[0].toLowerCase() + "-"
+                }
+            }if ("WebkitOpacity"in e) {
+                return "-webkit-"
+            }if ("KhtmlOpacity"in e) {
+                return "-khtml-"
+            }return ""
+        }();function p(t,e) {
+            for (var n in e) {
+                if (e[n]) {
+                    t[n] = e[n]
+                }
+            }return t
+        }function h(t,e) {
+            t.prototype = p(t.prototype || {}, e.prototype)
+        }function d(t) {
+            t = t || {};this._startOffsetX = 0;this._currentOffsetX = 0;this._opening = false;this._moved = false;this._opened = false;this._preventOpen = false;this._touch = t.touch === undefined ? true : t.touch && true;this.panel = t.panel;this.menu = t.menu;this.panel.className += " slideout-panel";this.menu.className += " slideout-menu";this._fx = t.fx || "ease";this._duration = parseInt(t.duration, 10) || 300;this._tolerance = parseInt(t.tolerance, 10) || 70;this._padding = this._translateTo = parseInt(t.padding, 10) || 256;this._orientation = t.side === "right" ? -1 : 1;this._translateTo *= this._orientation;if (this._touch) {
+                this._initTouchEvents()
+            }
+        }h(d, o);d.prototype.open = function () {
+            var t = this;this.emit("beforeopen");if (u.className.search("slideout-open") === -1) {
+                u.className += " slideout-open"
+            }this._setTransition();this._translateXTo(this._translateTo);this._opened = true;setTimeout(function () {
+                t.panel.style.transition = t.panel.style["-webkit-transition"] = "";t.emit("open")
+            }, this._duration + 50);return this
+        };d.prototype.close = function () {
+            var t = this;if (!this.isOpen() && !this._opening) {
+                return this
+            }this.emit("beforeclose");this._setTransition();this._translateXTo(0);this._opened = false;setTimeout(function () {
+                u.className = u.className.replace(/ slideout-open/, "");t.panel.style.transition = t.panel.style["-webkit-transition"] = t.panel.style[c + "transform"] = t.panel.style.transform = "";t.emit("close")
+            }, this._duration + 50);return this
+        };d.prototype.toggle = function () {
+            return this.isOpen() ? this.close() : this.open()
+        };d.prototype.isOpen = function () {
+            return this._opened
+        };d.prototype._translateXTo = function (t) {
+            this._currentOffsetX = t;this.panel.style[c + "transform"] = this.panel.style.transform = "translate3d(" + t + "px, 0, 0)"
+        };d.prototype._setTransition = function () {
+            this.panel.style[c + "transition"] = this.panel.style.transition = c + "transform " + this._duration + "ms " + this._fx
+        };d.prototype._initTouchEvents = function () {
+            var t = this;i(a, "scroll", function () {
+                if (!t._moved) {
+                    clearTimeout(r);s = true;r = setTimeout(function () {
+                        s = false
+                    }, 250)
+                }
+            });a.addEventListener(l.move, function (e) {
+                if (t._moved) {
+                    e.preventDefault()
+                }
+            });this.panel.addEventListener(l.start, function (e) {
+                if (typeof e.touches === "undefined") {
+                    return
+                }t._moved = false;t._opening = false;t._startOffsetX = e.touches[0].pageX;t._preventOpen = !t._touch || !t.isOpen() && t.menu.clientWidth !== 0
+            });this.panel.addEventListener("touchcancel", function () {
+                t._moved = false;t._opening = false
+            });this.panel.addEventListener(l.end, function () {
+                if (t._moved) {
+                    t._opening && Math.abs(t._currentOffsetX) > t._tolerance ? t.open() : t.close()
+                }t._moved = false
+            });this.panel.addEventListener(l.move, function (e) {
+                if (s || t._preventOpen || typeof e.touches === "undefined") {
+                    return
+                }var n = e.touches[0].clientX - t._startOffsetX;var i = t._currentOffsetX = n;if (Math.abs(i) > t._padding) {
+                    return
+                }if (Math.abs(n) > 20) {
+                    t._opening = true;var o = n * t._orientation;if (t._opened && o > 0 || !t._opened && o < 0) {
+                        return
+                    }if (o <= 0) {
+                        i = n + t._padding * t._orientation;t._opening = false
+                    }if (!t._moved && u.className.search("slideout-open") === -1) {
+                        u.className += " slideout-open"
+                    }t.panel.style[c + "transform"] = t.panel.style.transform = "translate3d(" + i + "px, 0, 0)";t.emit("translate", i);t._moved = true
+                }
+            })
+        };d.prototype.enableTouch = function () {
+            this._touch = true;return this
+        };d.prototype.disableTouch = function () {
+            this._touch = false;return this
+        };e.exports = d
+    },{decouple: 2,emitter: 3}],2: [function (t,e,n) {
+        "use strict";var i = function () {
+            return window.requestAnimationFrame || window.webkitRequestAnimationFrame || function (t) {
+                window.setTimeout(t, 1e3 / 60)
+            }
+        }();function o(t,e,n) {
+            var o,r = false;function s(t) {
+                o = t;a()
+            }function a() {
+                if (!r) {
+                    i(u);r = true
+                }
+            }function u() {
+                n.call(t, o);r = false
+            }t.addEventListener(e, s, false)
+        }e.exports = o
+    },{}],3: [function (t,e,n) {
+        "use strict";var i = function (t,e) {
+            if (!(t instanceof e)) {
+                throw new TypeError("Cannot call a class as a function")
+            }
+        };n.__esModule = true;var o = function () {
+            function t() {
+                i(this, t)
+            }t.prototype.on = function e(t,n) {
+                this._eventCollection = this._eventCollection || {};this._eventCollection[t] = this._eventCollection[t] || [];this._eventCollection[t].push(n);return this
+            };t.prototype.once = function n(t,e) {
+                var n = this;function i() {
+                    n.off(t, i);e.apply(this, arguments)
+                }i.listener = e;this.on(t, i);return this
+            };t.prototype.off = function o(t,e) {
+                var n = undefined;if (!this._eventCollection || !(n = this._eventCollection[t])) {
+                    return this
+                }n.forEach(function (t,i) {
+                    if (t === e || t.listener === e) {
+                        n.splice(i, 1)
+                    }
+                });if (n.length === 0) {
+                    delete this._eventCollection[t]
+                }return this
+            };t.prototype.emit = function r(t) {
+                var e = this;for (var n = arguments.length,i = Array(n > 1 ? n - 1 : 0),o = 1; o < n; o++) {
+                    i[o - 1] = arguments[o]
+                }var r = undefined;if (!this._eventCollection || !(r = this._eventCollection[t])) {
+                    return this
+                }r = r.slice(0);r.forEach(function (t) {
+                    return t.apply(e, i)
+                });return this
+            };return t
+        }();n["default"] = o;e.exports = n["default"]
+    },{}]}, {}, [1])(1)
+});

bricks.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<quiqqer>
+    <menu>
+
+        <!-- Nav (QUI) -->
+        <brick control="\QUI\Controls\Navigation">
+            <title>
+                <locale group="quiqqer/menu" var="brick.control.navigation.title"/>
+            </title>
+            <description>
+                <locale group="quiqqer/menu" var="brick.control.navigation.description"/>
+            </description>
+
+            <settings>
+                <setting name="startId" class="project-site">
+                    <locale group="quiqqer/menu" var="brick.control.navigation.setting.startId"/>
+                </setting>
+                <setting name="homeLink" type="checkbox">
+                    <locale group="quiqqer/menu" var="brick.control.navigation.setting.homelink"/>
+                </setting>
+                <setting name="levels" type="number">
+                    <locale group="quiqqer/menu" var="brick.control.navigation.setting.levels"/>
+                </setting>
+                <setting name="homeIcon" type="text">
+                    <locale group="quiqqer/menu" var="brick.control.navigation.setting.homeIcon"/>
+                </setting>
+                <description name="homeIconDescription">
+                    <locale group="quiqqer/menu" var="brick.control.navigation.setting.homeIcon.description"/>
+                </description>
+
+                <setting name="listIcon" type="text">
+                    <locale group="quiqqer/menu" var="brick.control.navigation.setting.listIcon"/>
+                </setting>
+                <setting name="levelIcon" type="text">
+                    <locale group="quiqqer/menu" var="brick.control.navigation.setting.levelIcon"/>
+                </setting>
+            </settings>
+        </brick>
+
+    </menu>
+</quiqqer>
\ No newline at end of file

locale.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<locales>
+    <groups name="quiqqer/menu" datatype="php,js">
+
+        <!-- Nav (QUI) -->
+        <locale name="menu.control.navigation.setting.startId">
+            <de><![CDATA[Start-ID]]></de>
+            <en><![CDATA[Start ID]]></en>
+        </locale>
+        <locale name="menu.control.navigation.setting.homelink">
+            <de><![CDATA[Home Link anzeigen]]></de>
+            <en><![CDATA[Show the homelink]]></en>
+        </locale>
+        <locale name="menu.control.navigation.setting.levels">
+            <de><![CDATA[Navigationstiefe]]></de>
+            <en><![CDATA[Navigation levels]]></en>
+        </locale>
+        <locale name="menu.control.navigation.setting.homeIcon">
+            <de><![CDATA[Home Icon<br/>Standard: fa-home]]></de>
+            <en><![CDATA[Home Icon<br/>Default: fa-home]]></en>
+        </locale>
+        <locale name="menu.control.navigation.setting.homeIcon.description">
+            <de><![CDATA[Sandart: fa-home]]></de>
+            <en><![CDATA[Default: fa-home]]></en>
+        </locale>
+        <locale name="menu.control.navigation.setting.listIcon">
+            <de><![CDATA[List Icon<br/>Standard: fa-angle-right]]></de>
+            <en><![CDATA[List Icon</br>Default: fa-angle-right]]></en>
+        </locale>
+        <locale name="menu.control.navigation.setting.levelIcon">
+            <de><![CDATA[Weitere Ebenen Icon</br>Standard: angle-double-right]]></de>
+            <en><![CDATA[Navigation levels icon<br/>Default: angle-double-right]]></en>
+        </locale>
+
+    </groups>
+</locales>
\ No newline at end of file

src/QUI/Menu/SidebarDropDownMenu.css

+.quiqqer-navigation li {
+    list-style: none !important;
+}
+
+.quiqqer-navigation-entry {
+    border-bottom: 1px solid #ddd;
+    display: flex !important;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    padding: 6px 0;
+}
+
+.quiqqer-navigation-link {
+    display: flex;
+    line-height: 2.3em;
+    width: 100%;
+}
+
+.quiqqer-fa-levels-icon {
+    cursor: pointer;
+    display: flex;
+    width:15%;
+    text-align: center;
+    transition: all 0.2s;
+    transition-timing-function: ease-in-out;
+}
+.quiqqer-fa-list-icon,
+.quiqqer-fa-levels-icon,
+.quiqqer-fa-list-icon::before,
+.quiqqer-fa-levels-icon::before {
+    margin: auto;
+}
+
+.quiqqer-fa-list-icon {
+    margin-left: 6px;
+    margin-right: 6px;
+}
+
+.fa-nav-levels-rotate {
+    transform: rotate(180deg);
+    transition: all 0.2s;
+    transition-timing-function: ease-in-out;
+}
+
+/* nav toggle */
+.quiqqer-navigation-close {
+    display: none;
+}
+
+
+
+/*
+ * ab hier soll Template liefern
+ */
+
+.quiqqer-navigation-li {
+    margin-bottom: 0 !important;
+}
+
+.active-bgcolor {
+    background: #eee;
+}
+
+ul.quiqqer-navigation-level-1,
+ul.quiqqer-navigation-level-2,
+ul.quiqqer-navigation-level-3,
+ul.quiqqer-navigation-level-4 {
+    padding-left: 0;
+    margin: 0 !important;
+}
+
+ul.quiqqer-navigation-level-2 .quiqqer-navigation-entry {
+    padding-left: 20px;
+}
+
+ul.quiqqer-navigation-level-3 .quiqqer-navigation-entry {
+    padding-left: 40px;
+}
+
+ul.quiqqer-navigation-level-4  .quiqqer-navigation-entry {
+    padding-left: 60px;
+}
+
+.quiqqer-navigation-brick {
+    margin-left: 0;
+    padding-left: 1.5em;
+}
+
+.quiqqer-navigation-level-1 a,
+a.quiqqer-navigation-home {
+    text-decoration: none;
+    color: #5d5d5d;
+}
+
+.quiqqer-navigation-level-1 a:hover,
+a.quiqqer-navigation-home:hover {
+    background: none;
+    box-shadow: none;
+}
+
+.quiqqer-navigation .fa {
+    line-height:2.3em;
+}
+
+.quiqqer-navigation-active {
+    font-weight: bold;
+}
+
+.quiqqer-navigation-open,
+.quiqqer-navigation-close {
+    position: relative;
+}
+
+.quiqqer-first-li-bg {
+    background: #d9d9d9;
+}
\ No newline at end of file

src/QUI/Menu/SidebarDropDownMenu.html

+{strip}
+{assign var=children value=$Site->getNavigation()}
+
+{if !isset($level)}
+{assign var=level value=1}
+{else}
+{assign var=level value=$level+1}
+{/if}
+
+
+
+{if count( $children )}
+<ul class="fa-ul quiqqer-navigation-level-{$level}">
+    {if $homeLink && $level == 1}
+    <li class="quiqqer-navigation-li">
+        <span class="quiqqer-navigation-entry">
+            {if $homeIcon}
+            <i class="fa quiqqer-fa-list-icon fa-fw {$homeIcon}"></i>
+            {/if}
+            <a href="{url site=$Site}" class="quiqqer-navigation-home quiqqer-navigation-link">
+                {$Site->getAttribute('title')}
+                {$this->getAttribute('homelink')}
+            </a>
+        </span>
+    </li>
+    {/if}
+    {foreach from=$children item=Child}
+    <li class="quiqqer-navigation-li {if $Rewrite->isIdInPath($Child->getId())} active-bgcolor {/if}">
+
+        <span class="quiqqer-navigation-entry
+            {if
+                $Rewrite->isIdInPath($Child->getId()) &&
+                $activeId != $Child->getId() &&
+                $level == 1
+            } quiqqer-first-li-bg{/if}
+            {if $activeId == $Child->getId()} quiqqer-navigation-active{/if}">
+            {assign var=subnavigation value=$Child->getNavigation()}
+            {if $listIcon}
+            <i class="fa quiqqer-fa-list-icon fa-fw {$listIcon}"></i>
+            {/if}
+            <a href="{url site=$Child}" class="quiqqer-navigation-link" {if !$listIcon}style="margin-left: 30px;"{/if}>
+                {$Child->getAttribute('title')}
+            </a>
+            {if count ( $subnavigation )}
+            <i class="fa quiqqer-fa-levels-icon {$levelIcon} {if $Rewrite->isIdInPath($Child->getId())} fa-nav-levels-rotate {/if} "></i>
+            {/if}
+        </span>
+
+        <div class="quiqqer-sub-nav-div {if !$Rewrite->isIdInPath($Child->getId())}quiqqer-navigation-close{/if}">
+            {if $levels === false || $levels-1 >= $level}
+            {include file=$navTemplate
+            Site=$Child
+            level=$level
+            levels=$levels
+            }
+            {/if}
+        </div>
+    </li>
+    {/foreach}
+</ul>
+{/if}
+{/strip}

src/QUI/Menu/SidebarDropDownMenu.php

+<?php
+
+/**
+ * This file contains \QUI\Menu\SidebarDropDownMenu
+ */
+
+namespace QUI\Menu;
+
+use QUI;
+use QUI\Projects\Site\Utils;
+
+/**
+ * Class SidebarDropDownMenu
+ * Creates on Sidebar Drop Down Menu
+ *
+ * @package QUI\Menu
+ * @author www.pcsg.de (Michael Danielczok, Henning Leutz)
+ */
+class SidebarDropDownMenu extends QUI\Control
+{
+    /**
+     * @param array $attributes
+     */
+    public function __construct($attributes = array())
+    {
+        // defaults values
+        $this->setAttributes(array(
+            'startId' => 1, // id or site link
+            'homeLink' => false,
+            'levels' => false,
+            'homeIcon' => 'fa-home',
+            'listIcon' => 'fa-angle-right',
+            'levelIcon' => 'fa-angle-double-down'
+        ));
+
+        parent::__construct($attributes);
+
+        $this->addCSSFile(
+            dirname(__FILE__) . '/SidebarDropDownMenu.css'
+        );
+
+        $this->setAttribute('class', 'quiqqer-sidebar-dropdown-navigation grid-100');
+    }
+
+    /**
+     * (non-PHPdoc)
+     *
+     * @see \QUI\Control::create()
+     */
+    public function getBody()
+    {
+        $Engine = QUI::getTemplateManager()->getEngine();
+        $Project = $this->getProject();
+        $activeId = false;
+
+        // start
+        try {
+            $startId = $this->getAttribute('startId');
+
+            if (Utils::isSiteLink($startId)) {
+                $Site = Utils::getSiteByLink($startId);
+
+            } else {
+                $Site = $Project->get((int)$startId);
+            }
+
+        } catch (QUI\Exception $Exception) {
+            QUI\System\Log::addWarning($Exception->getMessage());
+
+            return '';
+        }
+
+        // active site
+        $ActiveSite = QUI::getRewrite()->getSite();
+
+        if ($ActiveSite && $ActiveSite->getProject() == $Project) {
+            $activeId = $ActiveSite->getId();
+        }
+
+        // settings
+        $levels = (int)$this->getAttribute('levels');
+
+        if ($levels <= 0 || $this->getAttribute('levels') === false) {
+            $levels = false;
+        }
+
+        $Engine->assign(array(
+            'this' => $this,
+            'Project' => $this->getProject(),
+            'Site' => $Site,
+            'homeLink' => $homeLink = $this->getAttribute('homeLink'),
+            'activeId' => $activeId,
+            'navTemplate' => dirname(__FILE__) . '/Navigation.html',
+            'levels' => $levels,
+            'Rewrite' => QUI::getRewrite(),
+            'homeIcon' => $homeIcon = $this->getAttribute('homeIcon'),
+            'listIcon' => $listIcon = $this->getAttribute('listIcon'),
+            'levelIcon' => $levelIcon = $this->getAttribute('levelIcon')
+        ));
+
+        $html = $Engine->fetch(dirname(__FILE__) . '/Navigation.html');
+        $html = '<nav>' . $html . '</nav>';
+
+        return $html;
+    }
+}
\ No newline at end of file