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
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, […]
Excel Rechnungsvorlage für Etsy und Amazon – Zeitsparend & komfortabel für Freiberufler und Autoren
Als Freiberufler oder Autor auf Plattformen wie Etsy und Amazon stehen Sie täglich vor der Herausforderung, professionelle Rechnungen zu erstellen. Mit einer passenden Excel Rechnungsvorlage gestalten Sie diesen Prozess deutlich effizienter und rechtssicher. Die speziell für Kreative, Autoren und Selbstständige entwickelte Excel Rechnungsvorlage für Etsy und Amazon ist sofort einsetzbar und bietet zahlreiche Vorteile.
Amazon Prime Day 2025: Top-Deals für Technik, Büro & Home Office
Der Amazon Prime Day 2025 ist gestartet und begeistert wieder mit vielen exklusiven Schnäppchen. Als Prime-Mitglied erhalten Sie vor allen anderen Zugriff auf die besten Deals. Besonders Technikfans und Home-Office-Nutzer kommen in diesem Jahr voll auf ihre Kosten. In diesem Artikel stellen wir Ihnen die spannendsten Prime Day Angebote in den Kategorien höhenverstellbare Schreibtische, Router, […]
Virtuelles Büro in Stuttgart Innenstadt: Flexibel, professionell und kosteneffizient
Ein virtuelles Büro in der Stuttgart Innenstadt bietet Ihnen die ideale Gelegenheit, Ihre geschäftliche Präsenz zu stärken – ohne hohe Fixkosten. Die wirtschaftsstarke Hauptstadt Baden-Württembergs ist ein Hotspot für Innovation und Unternehmertum. Eine Geschäftsadresse in dieser zentralen Lage signalisiert Professionalität und schafft Vertrauen bei Kunden und Geschäftspartnern. Gleichzeitig profitieren Sie von der hervorragenden Infrastruktur und […]
Keine Kommentare vorhanden