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
Home Office im Grünen: Warum ebenerdige Ferienhäuser der ideale Rückzugsort für digitale Nomaden sind
Ebenerdige Wochenendhäuser und Ferienhäuser. Das Internet hat die Art und Weise, wie wir kommunizieren, arbeiten und unsere Freizeit gestalten, grundlegend verändert. Es hat sich zu einem integralen Bestandteil unseres täglichen Lebens entwickelt und ermöglicht es uns, unsere Arbeit von nahezu jedem Ort aus zu erledigen. Für viele Webmaster, Programmierer und Online-Autoren ist der klassische Büroalltag […]
Aktuelle Desktop-Betriebssysteme im Vergleich für Webmaster
Aktuelle Desktop-Betriebssysteme unterscheiden sich für Webmaster vor allem bei Entwicklungs-Tools, Sicherheit, Automatisierung und Kosten. Entscheidend ist weniger das „schnellste“ System, sondern welches Betriebssystem den eigenen Web-Workflow am effizientesten unterstützt. Webmaster arbeiten typischerweise mit Code-Editoren, Browser-Developer-Tools, lokalen Webservern, Versionsverwaltung und Automatisierungsskripten. Betriebssysteme beeinflussen, wie reibungslos diese Werkzeuge zusammenspielen, wie stabil und sicher sie laufen und wie […]
Interaktiver Businessplaner 2026 für Kindle Scribe – Planen, Ziele erreichen, Erfolg steigern
Immer mehr Menschen möchten sich online ein nachhaltiges Einkommen aufbauen. Digitale Geschäftsmodelle bieten heute viele Chancen mit vergleichsweise geringem Startkapital. Etsy‑Shop‑Betreiber, digitale Nomaden und Online‑Autoren verfolgen dabei klare wirtschaftliche Ziele. Ohne strukturierte Planung bleibt langfristiger Erfolg jedoch meist dem Zufall überlassen. Ein digitaler Businessplaner auf dem Kindle Scribe bringt die gewünschte Lösung. Für eine minimale […]
Windows 11 Shortcuts: Die wichtigsten Tastaturbefehle für schnelleres Arbeiten
Profis kennen die wahre Stärke von Tastaturbefehlen unter Windows 11. Wer effizient arbeiten möchte, nutzt Shortcuts statt ausschließlich der Maus. Windows 11 bietet zahlreiche neue Funktionen mit passenden Tastenkombinationen. Microsoft setzt weiterhin konsequent auf bewährte und neue Shortcuts. Diese Befehle gehören fest zum Betriebssystem und steigern die Produktivität spürbar.
Keine Kommentare vorhanden