diff --git a/src/QUI/Menu/Mega/Image.css b/src/QUI/Menu/Mega/Image.css index 291ca91bd5dccce24f6e6735ce98b3eaf5fa0fea..6c7fbe342dc8df1f1927f4f36bb20cf1472bb0ee 100644 --- a/src/QUI/Menu/Mega/Image.css +++ b/src/QUI/Menu/Mega/Image.css @@ -1,24 +1,41 @@ .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; - padding: 0 10px; - width: 25% + 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*/ + 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 diff --git a/src/QUI/Menu/Mega/Image.html b/src/QUI/Menu/Mega/Image.html index eb0a65ecf14f7feefc46f454bceda3dfed90e6ab..8e04a49367373163b4f71fb731846c594bf8d185 100644 --- a/src/QUI/Menu/Mega/Image.html +++ b/src/QUI/Menu/Mega/Image.html @@ -1,10 +1,16 @@ {foreach $children as $Child} <div class="quiqqer-menu-megaMenu-children-image-entry"> - <div class="quiqqer-menu-megaMenu-children-image-entry-img"> - {image src=$Child->getAttribute('image_site') width=300} - </div> - <a href="{url Site=$Child}" class="quiqqer-menu-megaMenu-children-image-entry-title"> - {$Child->getAttribute('title')} + <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}')" + > + + {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 diff --git a/src/QUI/Menu/MegaMenu.css b/src/QUI/Menu/MegaMenu.css index 48cf33d8e231afd8e39834dff3014b8ddb45e28b..c079cd323db01073b700c8a2da6e25f4a47f28ea 100644 --- a/src/QUI/Menu/MegaMenu.css +++ b/src/QUI/Menu/MegaMenu.css @@ -27,6 +27,7 @@ .quiqqer-menu-megaMenu-list-item-menu { align-content: stretch; + box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.35); display: none; left: 0; position: absolute;