CSS Menüs
Hier finden Sie verschiedene Menüs die per CSS und HTML-Listen gestaltet sind. Alle vorgestellten Codebeispiele können Sie frei in Ihren Webseiten verwenden.
CSS Menübeispiel 1
Bei diesem CSS Menü können Sie verschiedene Kategorientrenner definieren (#menuebox li.trenner). Mit der Maus überfahrene Links werden mit einem Hover Effekt hellblau dargestellt, aktive Links können Sie mittels #menuebox a.aktuell hervorheben.
Komplettes Codebeispiel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>CSS Menü</title>
<style type="text/css">
/* - - - - - - - - - - - - - - - - - - - - */
/* BODY */
/* - - - - - - - - - - - - - - - - - - - - */
body, html {
background-color: #F5F6F8;
font-family: Verdana, Arial, sans-serif;
color: #000000;
}
/* - - - - - - - - - - - - - - - - - - - - */
/* MENUE CSS */
/* - - - - - - - - - - - - - - - - - - - - */
#menuebox {
margin: 0;
padding: 1px;
border: 1px solid #dddddd;
background-color: #ffffff;
font-size: 12px;
position: relative;
top: 0;
left: 0;
}
#menuebox ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#menuebox li {
margin: 0;
padding: 0;
text-align: left;
}
#menuebox li.trenner {
background-color: #495398;
color: #ffffff;
padding: 4px;
margin: 1px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
}
#menuebox a {
display: block;
background-color: #f5f5f5;
color: #990000;
padding: 3px 6px 3px 6px;
margin: 1px;
width: auto;
font-size: 11px;
text-decoration: none;
border-left: 4px solid #e8e8e8;
border-right: 4px solid #e8e8e8;
}
#menuebox a:hover {
background-color: #e9eaf3;
color: #000000;
border-left: 4px solid #ffcc00;
border-right: 4px solid #ffcc00;
}
#menuebox a.aktuell {
background-color: #ffcc00;
color: #000000;
border-left: 4px solid #495398;
border-right: 4px solid #495398;
}
</style>
<script type="text/javascript">
<!--
function no_linkborder() {
allelinks = document.getElementsByTagName('a');
for(i = 0; i < allelinks.length; i++) {
allelinks[i].onfocus = new Function("if (this.blur) this.blur()");
}
}
onload = no_linkborder;
-->
</script>
</head>
<body>
<!-- CODEBLOCK ANFANG -->
<div id="menuebox" style="width: 160px;">
<ul>
<li class="trenner">» Kategorie 1</li>
<li><a href="#">Homepage</a></li>
<li><a class="aktuell" href="#">Forum</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Impressum</a></li>
<li class="trenner">» Kategorie 2</li>
<li><a href="#">Google</a></li>
<li><a href="#">Yahoo</a></li>
<li><a href="#">Heise</a></li>
</ul>
</div>
<!-- CODEBLOCK ENDE -->
</body>
</html>
Das im Quellcode des CSS Menüs eingebaute Javascript dient hier dazu die gepunkteten Linien um angeklickte Links zu unterdrücken. Hierbei werden alle Links des Dokumentes erfasst (document.getElementsByTagName(‚a‘)) und automatisch auf blur() gesetzt.
Weitere Beiträge
Amazon Black Friday Woche 2025: Große Rabatte bei Audible, Kindle Unlimited, Paramount+ und Amazon Hardware
Die Amazon Black Friday Woche 2025 läuft vom 20. November bis 1. Dezember und bringt zahlreiche Sparmöglichkeiten in allen Kategorien. Neben klassischen Produktangeboten profitieren Sie in diesem Jahr besonders von vergünstigten digitalen Abos und Services. Amazon bietet exklusive Rabatte auf Audible, Kindle Unlimited, Paramount+ sowie auf viele hauseigene Amazon-Geräte. Damit wird die Vorweihnachtszeit ideal für Technik- und Medienfans, die kräftig […]
Amazon Black Friday Woche 2025: Top-Deals für iPads, Schreibtische und eReader entdecken
Die Amazon Black Friday Woche 2025 startet offiziell am 20. November und läuft bis zum 1. Dezember. In diesen zwölf Tagen profitieren Sie von Rabatten bis zu 45 Prozent auf über eine Million Artikel. Besonders beliebt sind in diesem Jahr Technik- und Home-Office-Produkte. Wer auf der Suche nach einem iPad, einem neuen Schreibtisch oder einem eReader ist, sollte diese […]
Amazon Prime Deal Days: Top-Rabatte am 7. und 8. Oktober nutzen
Am 7. und 8. Oktober ist es wieder soweit: Die Amazon Prime Deal Days 2025 laden Prime-Mitglieder zu einer exklusiven Schnäppchenjagd ein. Das Shopping-Event bietet hunderttausende Rabatte auf Produkte aus Kategorien wie Elektronik, Mode, Haushalt und Kosmetik. Bereits jetzt können sich Prime-Nutzer auf spannende Vorab-Deals freuen, die direkt über Amazon verfügbar sind. Natürlich wird es […]
Der neue Kalender 2026 für den Kindle Scribe ist da
Noch sind die Temperaturen angenehm, doch das Jahr 2026 steht bereits vor der Tür. Wer seine Pläne für das kommende Jahr effektiv organisieren möchte, sollte sich frühzeitig nach einem geeigneten Kalender umsehen. Für Nutzer des Kindle Scribe gibt es jetzt eine ideale Lösung: den interaktiven Kalender 2026. Dieser digitale Jahresplaner bietet eine Vielzahl von Funktionen, […]
Keine Kommentare vorhanden