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 @@
@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;
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 {
position: fixed;
display: block;
......@@ -57,10 +42,11 @@ label#openSidebar {
width: 100%;
padding-top: 3%;
padding-bottom: 3%;
border-top: 1px solid LightGray;
border-bottom: 1px solid LightGray;
&:hover {
background-color: @metager-navbar-toggle-hover-background-color;
/*
&>.metager-dropdown-menu {
animation-name: dropdown-animation;
animation-duration: 0.7s;
......@@ -68,6 +54,21 @@ label#openSidebar {
animation-fill-mode: forwards;
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 {
z-index: 1000;
float: left;
min-width: 160px;
font-size: 14px;
text-align: left;
max-height: 0px;
overflow: hidden;
......@@ -88,7 +88,7 @@ label#openSidebar {
clear: both;
font-weight: normal;
line-height: 1.42857143;
border-bottom: 1px solid LightGray;
border-top: 1px solid LightGray;
margin-left: 2px;
&:hover {
text-decoration: none;
......@@ -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 {
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;
}
}
......
<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>
<div class="sideBar">
<label id="closeSidebar" role="button" for="nav0"></label>
......@@ -9,9 +9,10 @@
{{ trans('staticPages.nav1') }}</a>
</li>
<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') }}
<span class="caret"></span></a>
<span class="caret"></span></label>
<ul class="metager-dropdown-menu">
<li>
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/spende/") }}" tabindex="202">{{ trans('staticPages.nav2') }}</a>
......@@ -29,9 +30,10 @@
{{ trans('staticPages.nav3') }}</a>
</li>
<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') }}
<span class="caret"></span></a>
<span class="caret"></span></label>
<ul class="metager-dropdown-menu">
<li>
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/hilfe/") }}" tabindex="217">{{ trans('staticPages.nav20') }}</a>
......@@ -42,9 +44,10 @@
</ul>
</li>
<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') }}
<span class="caret"></span></a>
<span class="caret"></span></label>
<ul class="metager-dropdown-menu">
<li>
<a href="http://forum.suma-ev.de/" tabindex="220">{{ trans('staticPages.nav4') }}</a>
......@@ -64,9 +67,10 @@
</ul>
</li>
<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') }}
<span class="caret"></span></a>
<span class="caret"></span></label>
<ul class="metager-dropdown-menu">
<li>
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/widget/") }}" tabindex="226">{{ trans('staticPages.nav10') }}</a>
......@@ -95,9 +99,10 @@
</ul>
</li>
<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'] }})
<span class="caret"></span></a>
<span class="caret"></span></label>
<ul class="metager-dropdown-menu">
@foreach(LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
<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