Skip to content
GitLab
Commit 0e1e31f6 authored by Aria Givi's avatar Aria Givi
Browse files

Dropdown klappt nun bei Clicks aus, nicht mehr beim hovern

parent 57e74f1d
Hide whitespace changes
Inline Side-by-side
resources/assets/less/metager/sidebar.less
View file @ 0e1e31f6
......@@ -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;
}
}
......
resources/views/layouts/sidebar.blade.php
View file @ 0e1e31f6
<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>
......
Supports Markdown
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