diff --git a/bin/MegaMenu.js b/bin/MegaMenu.js index 33aeb88aabd41718ee8bf47531c723e32fc6a9d9..e8c18281eb39b08ca6c3ebcba4f7fce09b8580d0 100644 --- a/bin/MegaMenu.js +++ b/bin/MegaMenu.js @@ -137,23 +137,19 @@ define('package/quiqqer/menu/bin/MegaMenu', [ * @return {Promise} */ showMenuFor: function (liElement) { - var Menu = liElement.getElement('.quiqqer-menu-megaMenu-list-item-menu'), - leftOffset = 0; + var Menu = liElement.getElement('.quiqqer-menu-megaMenu-list-item-menu'), + isSimpleMenu = false, + leftOffset = 0; if (!Menu) { return this.$hide(); } - // todo michael es muss noch besser gemacht werden - // vor allem prüfen, warum "width auto" auch auf andere Elemente gesetzt wird + // only for simple menu if (Menu.getElement('.quiqqer-menu-megaMenu-children-simple')) { var megaMenu = document.getElement('.quiqqer-menu-megaMenu'); - leftOffset = liElement.getPosition(megaMenu).x; - - liElement.getParent('.quiqqer-menu-megaMenu'). - getElement('.quiqqer-menu-megaMenu-list-item-menu.control-background').setStyle( - 'width', 'auto' - ); + leftOffset = parseInt(liElement.getPosition(megaMenu).x); + isSimpleMenu = true; } this.$Menu.set('html', Menu.get('html')); @@ -182,19 +178,26 @@ define('package/quiqqer/menu/bin/MegaMenu', [ } }); - return this.$show(leftOffset); + return this.$show(leftOffset, isSimpleMenu); }, /** * Show the menu * @returns {Promise} */ - $show: function (leftOffset) { + $show: function (leftOffset, isSimpleMenu) { return new Promise(function (resolve) { + + var width = ''; + if (isSimpleMenu) { + width = 'auto'; + } + this.$Menu.setStyles({ display: 'flex', top : this.$liSize, // vorerst, sonst schauts doof aus - left : leftOffset + left : leftOffset, + width : width }); moofx(this.$Menu).animate({ diff --git a/src/QUI/Menu/Mega/Simple.css b/src/QUI/Menu/Mega/Simple.css index 955091f22e9c61a346c62cc4a6ffaca941bc9a93..e192b0e4c2af3450f8a53fe981bf4f063eb85cbb 100644 --- a/src/QUI/Menu/Mega/Simple.css +++ b/src/QUI/Menu/Mega/Simple.css @@ -1,46 +1,3 @@ -/* -.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%; -}*/ - .quiqqer-menu-megaMenu-children-simple { width: auto; background-color: rgba(0,0,0,0.1); @@ -49,13 +6,20 @@ .quiqqer-menu-megaMenu-children-simple-entry { display: block; + border-bottom: 1px solid rgba(255,255,255,0.1); + position: relative; + transition: 0.2s all ease-in-out; } -.quiqqer-menu-megaMenu-children-simple-entry a { - padding: 10px 20px; +.quiqqer-menu-megaMenu-children-simple-entry:hover { + background-color: rgba(0,0,0,0.15); } -/* -.quiqqer-menu-megaMenu-list-item-menu { - width: auto; -}*/ +.quiqqer-menu-megaMenu-children-simple-entry:last-child { + border-bottom: none; +} + +.quiqqer-menu-megaMenu-children-simple-entry a { + padding: 10px 25px; + display: block; +} \ No newline at end of file