FSST/Geizkragen
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

catbar 1.0 Version

Browse Source
This commit is contained in:
Paul Eisenbock 2026-01-23 08:46:11 +01:00
parent 09be0057da
commit 90e4860f6f
3 changed files with 48 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
assets/css/catbar.css
View File

@ -1,9 +1,9 @@
.home-nav {
min-height: 16px;
width: 100%;
display: flex;
align-items: center;
background-color: #2d3b50; /* helleres Lapis-/Hellblau */
background-color: #2d3b50;
padding: 3px 0; /* nur minimal größer als Buttons */
}
/* Inner zentriert */
@ -24,15 +24,48 @@
padding: 0;
}
/* Kategorien */
/* LI nur als Container – KEINE Höhe hier */
.home-nav__list li {
flex: 1;
text-align: center;
position: relative;
}
/* =============================== */
/* HOME CATEGORY BUTTON */
/* =============================== */
.home-nav__list li button[type="categorybutton"] {
width: 100%;
padding: 12px 0; /* <-- HIER steuerst du die Höhe */
background-color: #2d3b50;
color: #ffffff;
font-weight: bold;
padding: 1rem 0;
position: relative;
font-size: 1rem;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
/* Hover */
.home-nav__list li button[type="categorybutton"]:hover {
background-color: #3b4f6b;
}
/* Active */
.home-nav__list li button[type="categorybutton"]:active {
background-color: #1f2a3a;
}
/* Fokus sichtbar aber clean */
.home-nav__list li button[type="categorybutton"]:focus-visible {
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}
/* Trennstriche */
@ -40,8 +73,8 @@
content: "";
position: absolute;
right: 0;
top: 20%;
height: 60%;
top: 15%;
height: 70%;
width: 1px;
background-color: rgba(255, 255, 255, 0.6);
background-color: rgba(255, 255, 255, 0.4);
}

10
catbar.php
View File

@ -12,23 +12,23 @@
<ul class="home-nav__list">
<li class="home-nav__item">
<button type="button">Click Me!</button>
<button type="categorybutton">Kategorie 0</button>
</li>
<li class="home-nav__item">
<p>Computer</p>
<button type="categorybutton">Kategorie 1</button>
</li>
<li class="home-nav__item">
<p>Smartphones</p>
<button type="categorybutton">Kategorie 2</button>
</li>
<li class="home-nav__item">
<p>Kopfhörer</p>
<button type="categorybutton">Kategorie 3</button>
</li>
<li class="home-nav__item">
<p>Laptop</p>
<button type="categorybutton">Kategorie 4</button>
</li>
</ul>
</div>

4
header.php
View File

@ -24,9 +24,7 @@
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">
<!-- button in bearbeitung -->
<!--<a href="home.php" class="nav__link">Home</a> -->
<p>Home</p>
<a href="index.php" class="nav__link">Home</a> -->
</li>
<li class="nav__item">