sigmasternchen/mobmash.click
1
0
Fork 0
mirror of https://github.com/sigmasternchen/mobmash.click synced 2025-03-15 08:09:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Change hamburger menu to close button when menu open on mobile

Browse source
This commit is contained in:
overflowerror 2024-08-08 19:48:01 +02:00
parent 5bb3007f09
commit 44d0722cb6
2 changed files with 25 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
html/styles/main.css
View file

@ -328,9 +328,24 @@ h2 {
right: 0; right: 0;
display: block; display: block;
font-size: 40px; font-size: 40px;
padding: 10px;
margin: 0; margin: 0;
transition: color 0.3s; }
nav .hamburger i {
position: absolute;
top: 5px;
right: 10px;
transition: opacity 0.3s;
}
nav .hamburger .closed {
opacity: 1;
}
nav .hamburger .open {
opacity: 0;
right: 12px;
color: white;
} }
nav .hamburger .checkbox { nav .hamburger .checkbox {
@ -348,8 +363,12 @@ h2 {
background-color: black; background-color: black;
} }
nav:has(> .hamburger input[type="checkbox"]:checked) .hamburger { nav:has(> .hamburger input[type="checkbox"]:checked) .hamburger .open {
color: white; opacity: 1;
}
nav:has(> .hamburger input[type="checkbox"]:checked) .hamburger .closed {
opacity: 0;
} }
nav ul { nav ul {

3
view/layout.php
View file

@ -26,7 +26,8 @@
<body> <body>
<nav data-hx-boost="true"> <nav data-hx-boost="true">
<div class="hamburger"> <div class="hamburger">
<i class="fa fa-bars"></i> <i class="closed fa fa-bars"></i>
<i class="open fa fa-times"></i>
<input type="checkbox" class="checkbox" /> <input type="checkbox" class="checkbox" />
</div> </div>
<ul class="left"> <ul class="left">