Commit dfd39646 authored by Karl Hasselbring's avatar Karl Hasselbring
Browse files

Die Animation der Dropdown-Menus läuft jetzt wieder flüssig und sauber ab.
parent 18b5e9e3
...@@ -111,11 +111,11 @@ ul.metager-dropdown-menu { ...@@ -111,11 +111,11 @@ ul.metager-dropdown-menu {
-ms-transition: max-height 1s ease, padding 1s ease; -ms-transition: max-height 1s ease, padding 1s ease;
-o-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; transition: max-height 1s ease, padding 1s ease;
-webkit-transition-delay:.2s; -webkit-transition-delay: .2s;
-moz-transition-delay:.2s; -moz-transition-delay: .2s;
-ms-transition-delay:.2s; -ms-transition-delay: .2s;
-o-transition-delay:.2s; -o-transition-delay: .2s;
transition-delay:.2s; transition-delay: .2s;
&>li>a { &>li>a {
display: block; display: block;
padding: 3px 20px; padding: 3px 20px;
...@@ -168,13 +168,32 @@ ul.metager-dropdown-menu { ...@@ -168,13 +168,32 @@ ul.metager-dropdown-menu {
} }
} }
a.metager-dropdown-toggle:hover+ul.metager-dropdown-menu, @keyframes dropdown-animation {
a.metager-dropdown-toggle:focus+ul.metager-dropdown-menu, 0% {
ul.metager-dropdown-menu:hover, max-height: 0px;
#gutscheine>a:first-child:hover+a+ul.metager-dropdown-menu { padding: 0px 0;
border: none
}
1% {
padding: 5px 0;
border: 1px solid @metager-dropdown-toggle-hover-or-focus-color;
}
100% {
max-height: 1000px; max-height: 1000px;
padding: 5px 0; padding: 5px 0;
border: 1px solid @metager-dropdown-toggle-hover-or-focus-color; 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 { .metager-navbar-toggle {
...@@ -190,9 +209,6 @@ ul.metager-dropdown-menu:hover, ...@@ -190,9 +209,6 @@ ul.metager-dropdown-menu:hover,
&:visited { &:visited {
color: @metager-navbar-toggle-visited-color; color: @metager-navbar-toggle-visited-color;
} }
&:hover {
background-color: @metager-navbar-toggle-hover-background-color;
}
} }
#toggle-nav-hide .metager-navbar-toggle { #toggle-nav-hide .metager-navbar-toggle {
......
...@@ -28,7 +28,7 @@ return [ ...@@ -28,7 +28,7 @@ return [
'nav23' => 'Beitrittsformular SUMA-EV', 'nav23' => 'Beitrittsformular SUMA-EV',
'nav24' => 'MetaGer Quellcode', 'nav24' => 'MetaGer Quellcode',
'nav25' => 'MetaGer App', 'nav25' => 'MetaGer App',
'gutscheineToggle' => '<a href="https://metager.de/gutscheine/">Gutscheine</a>', 'gutscheineToggle' => 'Gutscheine',
'gutscheine.1' => 'Gutscheine', 'gutscheine.1' => 'Gutscheine',
'gutscheine.2' => 'Congstar Gutschein', 'gutscheine.2' => 'Congstar Gutschein',
'gutscheine.3' => 'Check24 Gutschein', 'gutscheine.3' => 'Check24 Gutschein',
......
...@@ -27,7 +27,7 @@ return [ ...@@ -27,7 +27,7 @@ return [
"nav23" => "Admitting formular SUMA-EV", "nav23" => "Admitting formular SUMA-EV",
"nav24" => "MetaGer source code", "nav24" => "MetaGer source code",
"nav25" => "MetaGer App", "nav25" => "MetaGer App",
"gutscheineToggle" => " \t<a href=\"https://metager.de/gutscheine/\">Coupons</a>", "gutscheineToggle" => "Coupons",
"gutscheine.1" => "Coupons", "gutscheine.1" => "Coupons",
"gutscheine.2" => "Congstar Coupons", "gutscheine.2" => "Congstar Coupons",
"gutscheine.3" => "Check 24 Coupons", "gutscheine.3" => "Check 24 Coupons",
......
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
</li> </li>
@if(LaravelLocalization::getCurrentLocale() === "de") @if(LaravelLocalization::getCurrentLocale() === "de")
<li id="gutscheine"@if (isset($navbarFocus) && $navbarFocus === 'gutscheine') class="metager-dropdown active" @else class="metager-dropdown" @endif > <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> <a class="metager-dropdown-toggle" data-role="button" aria-expanded="false" tabindex="205"><span class="caret"></span></a>
<ul class="metager-dropdown-menu"> <ul class="metager-dropdown-menu">
<li> <li>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment