niklas.ortmann/webprogrammierung
0
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Seitenleiste mit Filteroptionen

Browse Source
This commit is contained in:
NOrtmann1
2026-05-28 22:16:55 +02:00
parent 5dbe7a99b9
commit c0d9949037
2 changed files with 181 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
content/search-results.php
+80 -37
View File
@@ -2,49 +2,92 @@
Seite: Suchergebnisse
Inhalt: Zeigt die Ergebnisse einer Suche an
-->
<div class="s-res-container">
<div class="s-res-layout-grid">
<!-- Kopfzeile der Suche -->
<div class="s-res-header">
<h1 class="s-res-main-title">Suchergebnisse</h1>
<p class="s-res-meta">3 Treffer für Ihre Suchanfrage</p>
</div>
<!-- Links: Seitenleiste für Filter und Suche -->
<aside class="s-res-sidebar">
<!-- Ergebnisliste (nach Titel sortiert) -->
<div class="s-res-list">
<!-- Beitrag A -->
<div class="s-res-item">
<div class="s-res-content">
<h2 class="s-res-item-title">
<a href="#" class="s-res-link">Anleitung zur Webentwicklung</a>
</h2>
<p class="s-res-author">Von: <span class="s-res-author-name">Max Mustermann</span></p>
</div>
<div class="s-res-arrow">&rarr;</div>
<!-- Suchleiste Box -->
<div class="s-res-sidebar-box">
<h3 class="s-res-sidebar-title">Suche anpassen</h3>
<form action="#" method="GET" class="s-res-search-form">
<!-- Deine Suchleiste -->
<input type="search" id="site-search" name="q" placeholder="Suchen..." class="nav__search">
<button type="submit" class="nav__search-button">Suchen</button>
</form>
</div>
<!-- Beitrag B -->
<div class="s-res-item">
<div class="s-res-content">
<h2 class="s-res-item-title">
<a href="#" class="s-res-link">CSS Flexbox verständlich erklärt</a>
</h2>
<p class="s-res-author">Von: <span class="s-res-author-name">Anna Schmidt</span></p>
<!-- Filteroptionen Box -->
<div class="s-res-sidebar-box">
<h3 class="s-res-sidebar-title">Sortierung</h3>
<div class="s-res-filter-group">
<label class="s-res-filter-option">
<input type="radio" name="sort" value="alphabet" checked>
<span>Alphabetisch</span>
</label>
<label class="s-res-filter-option">
<input type="radio" name="sort" value="likes">
<span>Beliebtheit (Likes)</span>
</label>
<label class="s-res-filter-option">
<input type="radio" name="sort" value="newest">
<span>Neueste Beiträge</span>
</label>
<label class="s-res-filter-option">
<input type="radio" name="sort" value="oldest">
<span>Älteste Beiträge</span>
</label>
</div>
<div class="s-res-arrow">&rarr;</div>
</div>
<!-- Beitrag C -->
<div class="s-res-item">
<div class="s-res-content">
<h2 class="s-res-item-title">
<a href="#" class="s-res-link">HTML5-Grundlagen für Einsteiger</a>
</h2>
<p class="s-res-author">Von: <span class="s-res-author-name">Lisa Meier</span></p>
</div>
<div class="s-res-arrow">&rarr;</div>
</aside>
<!-- Rechts: Hauptinhalt mit Ergebnissen -->
<main class="s-res-main-content">
<!-- Kopfzeile der Suche -->
<div class="s-res-header">
<h1 class="s-res-main-title">Suchergebnisse</h1>
<p class="s-res-meta">3 Treffer für Ihre Suchanfrage</p>
</div>
</div>
</div>
<!-- Ergebnisliste -->
<div class="s-res-list">
<!-- Beitrag A -->
<div class="s-res-item">
<div class="s-res-content">
<h2 class="s-res-item-title">
<a href="#" class="s-res-link">Anleitung zur Webentwicklung</a>
</h2>
<p class="s-res-author">Von: <span class="s-res-author-name">Max Mustermann</span></p>
</div>
<div class="s-res-arrow">&rarr;</div>
</div>
<!-- Beitrag B -->
<div class="s-res-item">
<div class="s-res-content">
<h2 class="s-res-item-title">
<a href="#" class="s-res-link">CSS Flexbox verständlich erklärt</a>
</h2>
<p class="s-res-author">Von: <span class="s-res-author-name">Anna Schmidt</span></p>
</div>
<div class="s-res-arrow">&rarr;</div>
</div>
<!-- Beitrag C -->
<div class="s-res-item">
<div class="s-res-content">
<h2 class="s-res-item-title">
<a href="#" class="s-res-link">HTML5-Grundlagen für Einsteiger</a>
</h2>
<p class="s-res-author">Von: <span class="s-res-author-name">Lisa Meier</span></p>
</div>
<div class="s-res-arrow">&rarr;</div>
</div>
</div>
</main>
</div>