Commit 0e1e31f6 authored by Aria Givi's avatar Aria Givi
Browse files

Dropdown klappt nun bei Clicks aus, nicht mehr beim hovern

parent 57e74f1d
...@@ -5,21 +5,6 @@ ...@@ -5,21 +5,6 @@
@metager-dropdown-menu-li-a-hover-color: @static-pages-color-strong-grey; @metager-dropdown-menu-li-a-hover-color: @static-pages-color-strong-grey;
@metager-dropdown-menu-li-a-hover-background-color: @static-pages-color-almost-white; @metager-dropdown-menu-li-a-hover-background-color: @static-pages-color-almost-white;
label#openSidebar {
z-index: 998;
font-size: 36px;
position: fixed;
top: 0px;
right: 20px;
color: grey;
&:after {
content: "≡";
}
&:hover {
color: rgb(255,128,0);
}
}
.sideBar { .sideBar {
position: fixed; position: fixed;
display: block; display: block;
...@@ -57,10 +42,11 @@ label#openSidebar { ...@@ -57,10 +42,11 @@ label#openSidebar {
width: 100%; width: 100%;
padding-top: 3%; padding-top: 3%;
padding-bottom: 3%; padding-bottom: 3%;
border-top: 1px solid LightGray; border-bottom: 1px solid LightGray;
&:hover { &:hover {
background-color: @metager-navbar-toggle-hover-background-color; background-color: @metager-navbar-toggle-hover-background-color;
/*
&>.metager-dropdown-menu { &>.metager-dropdown-menu {
animation-name: dropdown-animation; animation-name: dropdown-animation;
animation-duration: 0.7s; animation-duration: 0.7s;
...@@ -68,6 +54,21 @@ label#openSidebar { ...@@ -68,6 +54,21 @@ label#openSidebar {
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-delay: 0.1s; animation-delay: 0.1s;
} }
*/
}
&>label {
font-size: 16px;
line-height: 20px;
text-decoration: none;
text-indent: 12px;
display: inline-block;
width: 100%;
color: black;
font-weight: normal;
&:hover {
color: red;
}
} }
} }
...@@ -76,7 +77,6 @@ label#openSidebar { ...@@ -76,7 +77,6 @@ label#openSidebar {
z-index: 1000; z-index: 1000;
float: left; float: left;
min-width: 160px; min-width: 160px;
font-size: 14px;
text-align: left; text-align: left;
max-height: 0px; max-height: 0px;
overflow: hidden; overflow: hidden;
...@@ -88,7 +88,7 @@ label#openSidebar { ...@@ -88,7 +88,7 @@ label#openSidebar {
clear: both; clear: both;
font-weight: normal; font-weight: normal;
line-height: 1.42857143; line-height: 1.42857143;
border-bottom: 1px solid LightGray; border-top: 1px solid LightGray;
margin-left: 2px; margin-left: 2px;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
...@@ -134,20 +134,44 @@ label#openSidebar { ...@@ -134,20 +134,44 @@ label#openSidebar {
} }
} }
input.sideBarCheckbox {
display: none;
}
input.sideBarCheckbox:checked ~ .metager-dropdown-menu {
animation-name: dropdown-animation;
animation-duration: 0.7s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 0.1s;
}
label#openSidebar {
z-index: 998;
font-size: 36px;
position: fixed;
top: 0px;
right: 20px;
color: grey;
&:after {
content: "≡";
}
&:hover {
color: rgb(255,128,0);
}
}
@keyframes dropdown-animation { @keyframes dropdown-animation {
0% { 0% {
max-height: 0px; max-height: 0px;
padding: 0px 0; padding: 0px 0;
border: none
} }
1% { 1% {
padding: 5px 0; padding: 5px 0;
border: 1px solid @metager-dropdown-toggle-hover-or-focus-color;
} }
100% { 100% {
max-height: 1000px; max-height: 1000px;
padding: 5px 0; padding: 5px 0;
border: 1px solid @metager-dropdown-toggle-hover-or-focus-color;
} }
} }
......
<input name="nav" id="nav0" style="display: none;" type="checkbox"> <input id="nav0" style="display: none;" type="checkbox">
<label id="openSidebar" role="button" for="nav0"></label> <label id="openSidebar" role="button" for="nav0"></label>
<div class="sideBar"> <div class="sideBar">
<label id="closeSidebar" role="button" for="nav0"></label> <label id="closeSidebar" role="button" for="nav0"></label>
...@@ -9,9 +9,10 @@ ...@@ -9,9 +9,10 @@
{{ trans('staticPages.nav1') }}</a> {{ trans('staticPages.nav1') }}</a>
</li> </li>
<li @if (isset($navbarFocus) && $navbarFocus === 'foerdern') class="metager-dropdown active" @else class="metager-dropdown" @endif > <li @if (isset($navbarFocus) && $navbarFocus === 'foerdern') class="metager-dropdown active" @else class="metager-dropdown" @endif >
<a class="metager-dropdown-toggle" role="button" aria-expanded="false" tabindex="201"><i class="fa fa-money" aria-hidden="true"></i> <input id="donationToggle" class="sideBarCheckbox" type="checkbox">
<label for="donationToggle" class="metager-dropdown-toggle" role="button" aria-expanded="false" tabindex="201"><i class="fa fa-money" aria-hidden="true"></i>
&nbsp;{{ trans('staticPages.nav16') }} &nbsp;{{ trans('staticPages.nav16') }}
<span class="caret"></span></a> <span class="caret"></span></label>
<ul class="metager-dropdown-menu"> <ul class="metager-dropdown-menu">
<li> <li>
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/spende/") }}" tabindex="202">{{ trans('staticPages.nav2') }}</a> <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/spende/") }}" tabindex="202">{{ trans('staticPages.nav2') }}</a>
...@@ -29,9 +30,10 @@ ...@@ -29,9 +30,10 @@
{{ trans('staticPages.nav3') }}</a> {{ trans('staticPages.nav3') }}</a>
</li> </li>
<li @if (isset($navbarFocus) && $navbarFocus === 'hilfe') class="metager-dropdown active" @else class="metager-dropdown" @endif > <li @if (isset($navbarFocus) && $navbarFocus === 'hilfe') class="metager-dropdown active" @else class="metager-dropdown" @endif >
<a class="metager-dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" id="navigationHilfe" tabindex="216"><i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp; <input id="helpToggle" class="sideBarCheckbox" type="checkbox">
<label for="helpToggle" class="metager-dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" id="navigationHilfe" tabindex="216"><i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;
{{ trans('staticPages.nav20') }} {{ trans('staticPages.nav20') }}
<span class="caret"></span></a> <span class="caret"></span></label>
<ul class="metager-dropdown-menu"> <ul class="metager-dropdown-menu">
<li> <li>
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/hilfe/") }}" tabindex="217">{{ trans('staticPages.nav20') }}</a> <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/hilfe/") }}" tabindex="217">{{ trans('staticPages.nav20') }}</a>
...@@ -42,9 +44,10 @@ ...@@ -42,9 +44,10 @@
</ul> </ul>
</li> </li>
<li @if (isset($navbarFocus) && $navbarFocus === 'kontakt') class="metager-dropdown active" @else class="metager-dropdown" @endif > <li @if (isset($navbarFocus) && $navbarFocus === 'kontakt') class="metager-dropdown active" @else class="metager-dropdown" @endif >
<a class="metager-dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" id="navigationKontakt" tabindex="219"><i class="fa fa-comments-o" aria-hidden="true"></i>&nbsp; <input id="contactToggle" class="sideBarCheckbox" type="checkbox">
<label for="contactToggle" class="metager-dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" id="navigationKontakt" tabindex="219"><i class="fa fa-comments-o" aria-hidden="true"></i>&nbsp;
{{ trans('staticPages.nav18') }} {{ trans('staticPages.nav18') }}
<span class="caret"></span></a> <span class="caret"></span></label>
<ul class="metager-dropdown-menu"> <ul class="metager-dropdown-menu">
<li> <li>
<a href="http://forum.suma-ev.de/" tabindex="220">{{ trans('staticPages.nav4') }}</a> <a href="http://forum.suma-ev.de/" tabindex="220">{{ trans('staticPages.nav4') }}</a>
...@@ -64,9 +67,10 @@ ...@@ -64,9 +67,10 @@
</ul> </ul>
</li> </li>
<li @if (isset($navbarFocus) && $navbarFocus === 'dienste') class="metager-dropdown active" @else class="metager-dropdown" @endif > <li @if (isset($navbarFocus) && $navbarFocus === 'dienste') class="metager-dropdown active" @else class="metager-dropdown" @endif >
<a class="metager-dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" tabindex="225"><i class="fa fa-wrench" aria-hidden="true"></i> <input id="servicesToggle" class="sideBarCheckbox" type="checkbox">
<label for="servicesToggle" class="metager-dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" tabindex="225"><i class="fa fa-wrench" aria-hidden="true"></i>
&nbsp;{{ trans('staticPages.nav15') }} &nbsp;{{ trans('staticPages.nav15') }}
<span class="caret"></span></a> <span class="caret"></span></label>
<ul class="metager-dropdown-menu"> <ul class="metager-dropdown-menu">
<li> <li>
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/widget/") }}" tabindex="226">{{ trans('staticPages.nav10') }}</a> <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/widget/") }}" tabindex="226">{{ trans('staticPages.nav10') }}</a>
...@@ -95,9 +99,10 @@ ...@@ -95,9 +99,10 @@
</ul> </ul>
</li> </li>
<li class="metager-dropdown"> <li class="metager-dropdown">
<a class="metager-dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" id="navigationSprache" tabindex="235"><i class="fa fa-globe" aria-hidden="true"></i>&nbsp; <input id="languagesToggle" class="sideBarCheckbox" type="checkbox">
<label for="languagesToggle" class="metager-dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" id="navigationSprache" tabindex="235"><i class="fa fa-globe" aria-hidden="true"></i>&nbsp;
{{ trans('staticPages.nav19') }} ({{ LaravelLocalization::getSupportedLocales()[LaravelLocalization::getCurrentLocale()]['native'] }}) {{ trans('staticPages.nav19') }} ({{ LaravelLocalization::getSupportedLocales()[LaravelLocalization::getCurrentLocale()]['native'] }})
<span class="caret"></span></a> <span class="caret"></span></label>
<ul class="metager-dropdown-menu"> <ul class="metager-dropdown-menu">
@foreach(LaravelLocalization::getSupportedLocales() as $localeCode => $properties) @foreach(LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
<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