Added a Crude Responsive Menu
This commit is contained in:
parent
51df5547cb
commit
933942045f
2 changed files with 92 additions and 12 deletions
|
@ -44,13 +44,87 @@ body {
|
|||
.page-header .title {
|
||||
font-size: 2em;
|
||||
vertical-align: center;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.page-header .title .crumb{
|
||||
.page-header .crumb {
|
||||
font-size: 0.75em;
|
||||
vertical-align: center;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.page-header li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #404040;
|
||||
color: #fff;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.menu li:hover {
|
||||
background-color: #4c9e9e;
|
||||
border-radius: 5px;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
.menu li {
|
||||
padding: 2px 2px;
|
||||
}
|
||||
|
||||
input[type=checkbox]{
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*HAMBURGER MENU*/
|
||||
.hamburger {
|
||||
display: none;
|
||||
font-size: 2em;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* APPLYING MEDIA QUERIES */
|
||||
@media (max-width: 1000px) {
|
||||
|
||||
.menu {
|
||||
display:none;
|
||||
position: absolute;
|
||||
background-color: #404040;
|
||||
top: 1em;
|
||||
right: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
padding: 16px 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.menu li:hover {
|
||||
display: inline-block;
|
||||
background-color:#4c9e9e;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked ~ .menu{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
font-size: 0.9em;
|
||||
padding: 24px 24px 24px 0px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Search Form Styling */
|
||||
|
|
|
@ -5,14 +5,20 @@
|
|||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="page-header">
|
||||
<div class="title">
|
||||
<a href="{{ $startpage }}">{{ $galleryname }}</a>
|
||||
{% if (!empty($crumbs)): %}
|
||||
{% foreach($crumbs as $name => $path): %}
|
||||
<span class="crumb"> / </span><a class="crumb" href="index.php?d={{ $path }}&so={{ $sort }}&s={{ $slice }}&p=1">{{ $name }}</a>
|
||||
{% endforeach %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<nav class="title navbar">
|
||||
<ul class nav-links>
|
||||
<input type="checkbox" id="checkbox_toggle" />
|
||||
<label for="checkbox_toggle" class="hamburger">☰</label>
|
||||
<div class="menu">
|
||||
<li><a href="{{ $startpage }}">{{ $galleryname }}</a></li>
|
||||
{% if (!empty($crumbs)): %}
|
||||
{% foreach($crumbs as $name => $path): %}
|
||||
<li><a class="crumb" href="index.php?d={{ $path }}&so={{ $sort }}&s={{ $slice }}&p=1">/ {{ $name }}</a></li>
|
||||
{% endforeach %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="search">
|
||||
<form action="index.php" method="get">
|
||||
<input type="text" placeholder="Suche.." value="{{ $pretty_filter }}" name="f" />
|
||||
|
|
Loading…
Reference in a new issue