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 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 […]
Letzter Tag: Amazon Black Friday Deals für Technik-Liebhaber
Die Black Friday Woche bei Amazon endet heute, und Technik-Liebhaber sollten jetzt zugreifen. Für Betreiber von Webseiten oder Kreative gibt es viele spannende Angebote. Von leistungsstarken Laptops bis hin zu Software-Lizenzen finden Sie heute zahlreiche reduzierte Produkte. Auch Zubehör wie kabellose Tastaturen, externe Festplatten oder USB-Hubs sind oft günstiger erhältlich.
Meta Quest 3: Entdecken Sie das aktuelle VR-Headset
Die Meta Quest 3 ist das aktuelle Mixed-Reality-Headset von Meta, das innovative Technologien vereint, um ein einzigartiges VR-Erlebnis zu bieten. Diese VR-Brille stellt sowohl für Gelegenheitsnutzer als auch für Technikenthusiasten eine aufregende Möglichkeit dar, die Grenzen zwischen der physischen und digitalen Welt zu erkunden. Eine echte Alternative zur Apple Vison Pro. Wer etwas günstiger in […]
Keine Kommentare vorhanden