ferdi2go/Pigmento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Tab-Navigation als Hamburger-Menü

Browse Source 
3-Striche-Button öffnet Dropdown mit allen Kategorien.
Aktive Kategorie wird neben dem Button angezeigt.
Klick außerhalb schließt das Menü.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ferdinand
2026-04-03 17:04:02 +02:00
parent 6da431bf7e
commit f70d02d11d
3 changed files with 82 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
style.css
View File

@@ -42,21 +42,74 @@ main {
header h1 { font-size: 3rem; margin-bottom: 0; }
nav { display: flex; gap: 0.5rem; }
#main-nav {
position: relative;
display: flex;
align-items: center;
gap: 0.6rem;
}
.tab-btn {
padding: 0.4rem 1rem;
#menu-toggle {
background: none;
border: 1px solid #ccc;
border-radius: 6px;
cursor: pointer;
padding: 0.45rem 0.5rem;
display: flex;
flex-direction: column;
gap: 5px;
line-height: 0;
}
#menu-toggle span {
display: block;
width: 20px;
height: 2px;
background: #222;
border-radius: 2px;
}
#menu-toggle:hover { background: #f0f0f0; }
#menu-active-label {
font-size: 0.9rem;
color: #444;
}
#menu-dropdown {
display: none;
flex-direction: column;
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
background: #fff;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 6px 24px rgba(0,0,0,0.1);
padding: 0.4rem;
z-index: 50;
min-width: 170px;
}
#menu-dropdown.open { display: flex; }
.tab-btn {
padding: 0.55rem 0.9rem;
border: none;
border-radius: 6px;
background: none;
cursor: pointer;
font-size: 0.9rem;
font-family: 'Poppins', sans-serif;
text-align: left;
color: #222;
}
.tab-btn:hover { background: #f5f5f5; }
.tab-btn.active {
background: #222;
color: #fff;
border-color: #222;
}
main { padding: 1.5rem; max-width: 900px; margin: 0 auto; }