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 Prime Deal Days: Günstige Hardware-Angebote für Technikfans
Amazon bietet während der Prime Deal Days besonders günstige Hardware an. Das beliebte Shopping-Event läuft vom 8. bis 9. Oktober. Prime-Mitglieder dürfen sich auf exklusive Rabatte und Angebote freuen. Besonders Technikfans kommen in diesen zwei Tagen voll auf ihre Kosten.
Amazon-Vergleichstabellen erhöhen die Affiliate-Einnahmen
Amazon-Vergleichstabellen: Wer im Internet kaufen will, vergleicht zunächst Preise und Produkteigenschaften. Hier ist bei vielen Interessenten Amazon die erste Wahl. Gleichzeitig bietet der Branchenriese ein interessantes Partnerprogramm für Empfehlungen an. Wer sich damit ein zusätzliches Einkommen sichern möchte, bietet seinen Besuchern spezielle Amazon-Vergleichstabellen auf seiner Webseite an. So findet der Kunde schneller die relevanten Informationen […]
Amazon startet den 10. Prime Day am 16. und 17. Juli
Prime Day 2024: Vom 16. bis 17. Juli haben Prime-Mitglieder exklusiven Zugang zu einer Vielzahl von Angeboten in verschiedenen Kategorien wie Bekleidung, Elektronik, Küche & Haushalt und Spielzeug. Neue Deals werden während des gesamten Zeitraums veröffentlicht, um Prime-Mitgliedern am zehnten Prime Day stets etwas Neues zu bieten. Die ersten Angebote sind bereits verfügbar. Weitere Produkte […]
Amazon Oster-Angebote – erste Angebote sind verfügbar
Amazon Oster-Angebote: Ostern steht vor der Tür. Eine gute Gelegenheit, um die Wohnung oder den Arbeitsplatz bunter zu gestalten. Auch der Frühjahrsputz steht vor der Tür. Die Amazon Osterangebote vom 20. bis 25. März bieten attraktive Rabatte auf Elektronik, Haus & Garten, Spielwaren und mehr. Schneller Versand inklusive! Die ersten Angebote sind bereits verfügbar – […]
Keine Kommentare vorhanden