seiichiro/vsgallery
1
0
Fork 0
Code Pull requests Releases Activity

Added a Crude Responsive Menu

Browse source
This commit is contained in:
seiichiro 2022-07-10 21:30:25 +02:00
parent 51df5547cb
commit 933942045f
2 changed files with 92 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
css/style.css
View file

@ -44,13 +44,87 @@ body {
.page-header .title { .page-header .title {
font-size: 2em; font-size: 2em;
vertical-align: center; vertical-align: center;
padding-left: 8px;
} }
.page-header .title .crumb{ .page-header .crumb {
font-size: 0.75em; 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 */ /* Search Form Styling */

22
tpl/gallery.html
View file

@ -5,14 +5,20 @@
{% block content %} {% block content %}
<div class="container"> <div class="container">
<div class="page-header"> <div class="page-header">
<div class="title"> <nav class="title navbar">
<a href="{{ $startpage }}">{{ $galleryname }}</a> <ul class nav-links>
{% if (!empty($crumbs)): %} <input type="checkbox" id="checkbox_toggle" />
{% foreach($crumbs as $name => $path): %} <label for="checkbox_toggle" class="hamburger">&#9776;</label>
<span class="crumb"> / </span><a class="crumb" href="index.php?d={{ $path }}&so={{ $sort }}&s={{ $slice }}&p=1">{{ $name }}</a> <div class="menu">
{% endforeach %} <li><a href="{{ $startpage }}">{{ $galleryname }}</a></li>
{% endif %} {% if (!empty($crumbs)): %}
</div> {% 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"> <div class="search">
<form action="index.php" method="get"> <form action="index.php" method="get">
<input type="text" placeholder="Suche.." value="{{ $pretty_filter }}" name="f" /> <input type="text" placeholder="Suche.." value="{{ $pretty_filter }}" name="f" />