diff --git a/resources/assets/less/metager/static-pages.less b/resources/assets/less/metager/static-pages.less index 14f7a8ee7641fcba9bf9f435737c1ca75195d374..caf482d6924d3b56416301b3b835570426f7ee3c 100644 --- a/resources/assets/less/metager/static-pages.less +++ b/resources/assets/less/metager/static-pages.less @@ -111,11 +111,11 @@ ul.metager-dropdown-menu { -ms-transition: max-height 1s ease, padding 1s ease; -o-transition: max-height 1s ease, padding 1s ease; transition: max-height 1s ease, padding 1s ease; - -webkit-transition-delay:.2s; - -moz-transition-delay:.2s; - -ms-transition-delay:.2s; - -o-transition-delay:.2s; - transition-delay:.2s; + -webkit-transition-delay: .2s; + -moz-transition-delay: .2s; + -ms-transition-delay: .2s; + -o-transition-delay: .2s; + transition-delay: .2s; &>li>a { display: block; padding: 3px 20px; @@ -168,13 +168,32 @@ ul.metager-dropdown-menu { } } -a.metager-dropdown-toggle:hover+ul.metager-dropdown-menu, -a.metager-dropdown-toggle:focus+ul.metager-dropdown-menu, -ul.metager-dropdown-menu:hover, -#gutscheine>a:first-child:hover+a+ul.metager-dropdown-menu { - max-height: 1000px; - padding: 5px 0; - border: 1px solid @metager-dropdown-toggle-hover-or-focus-color; +@keyframes dropdown-animation { + 0% { + max-height: 0px; + padding: 0px 0; + border: none + } + 1% { + padding: 5px 0; + border: 1px solid @metager-dropdown-toggle-hover-or-focus-color; + } + 100% { + max-height: 1000px; + padding: 5px 0; + border: 1px solid @metager-dropdown-toggle-hover-or-focus-color; + } +} + +.metager-dropdown:hover { + background-color: @metager-navbar-toggle-hover-background-color; + &>.metager-dropdown-menu { + animation-name: dropdown-animation; + animation-duration: 0.7s; + animation-timing-function: ease-out; + animation-fill-mode: forwards; + animation-delay: 0.1s; + } } .metager-navbar-toggle { @@ -190,9 +209,6 @@ ul.metager-dropdown-menu:hover, &:visited { color: @metager-navbar-toggle-visited-color; } - &:hover { - background-color: @metager-navbar-toggle-hover-background-color; - } } #toggle-nav-hide .metager-navbar-toggle { diff --git a/resources/lang/de/staticPages.php b/resources/lang/de/staticPages.php index 680d5418f27ffc1046a150a01f0822064767530f..88a1d9328a099b485d8d1cbb2f1692250b5a8f7d 100644 --- a/resources/lang/de/staticPages.php +++ b/resources/lang/de/staticPages.php @@ -28,7 +28,7 @@ return [ 'nav23' => 'Beitrittsformular SUMA-EV', 'nav24' => 'MetaGer Quellcode', 'nav25' => 'MetaGer App', - 'gutscheineToggle' => '<a href="https://metager.de/gutscheine/">Gutscheine</a>', + 'gutscheineToggle' => 'Gutscheine', 'gutscheine.1' => 'Gutscheine', 'gutscheine.2' => 'Congstar Gutschein', 'gutscheine.3' => 'Check24 Gutschein', diff --git a/resources/lang/en/staticPages.php b/resources/lang/en/staticPages.php index 6b10a5e5298ba3a279582b8d9707782e40341591..ce67256ceb4de1fa41ef3f5b68bf17b665e373e1 100644 --- a/resources/lang/en/staticPages.php +++ b/resources/lang/en/staticPages.php @@ -27,7 +27,7 @@ return [ "nav23" => "Admitting formular SUMA-EV", "nav24" => "MetaGer source code", "nav25" => "MetaGer App", - "gutscheineToggle" => " \t<a href=\"https://metager.de/gutscheine/\">Coupons</a>", + "gutscheineToggle" => "Coupons", "gutscheine.1" => "Coupons", "gutscheine.2" => "Congstar Coupons", "gutscheine.3" => "Check 24 Coupons", diff --git a/resources/views/layouts/staticPages.blade.php b/resources/views/layouts/staticPages.blade.php index ca680b0cfad5f7fe68248a5d2fb4664dbde4ae6a..8fdc47747e5cd7e0493c62024cf2bbc1d24de999 100644 --- a/resources/views/layouts/staticPages.blade.php +++ b/resources/views/layouts/staticPages.blade.php @@ -69,7 +69,7 @@ </li> @if(LaravelLocalization::getCurrentLocale() === "de") <li id="gutscheine"@if (isset($navbarFocus) && $navbarFocus === 'gutscheine') class="metager-dropdown active" @else class="metager-dropdown" @endif > - {!! trans('staticPages.gutscheineToggle') !!} + <a href="https://metager.de/gutscheine/">{!! trans('staticPages.gutscheineToggle') !!}</a> <a class="metager-dropdown-toggle" data-role="button" aria-expanded="false" tabindex="205"><span class="caret"></span></a> <ul class="metager-dropdown-menu"> <li>