Skip to main content

Alles für die Homepage... Scripte, Templates, Workshops und Support

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.

xx

Komplettes Codebeispiel

CODE:
<!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">&raquo; 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">&raquo; 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 Oster-Angebote – erste Angebote sind verfügbar

amazon oster-angebote maerz 2024

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 – […]

Das neue MacBook Air 2024 mit M3 Chip bei Amazon

macbook air 2024 m3 chip

MacBook Air 2024. Apple präsentierte überraschend die neuen MacBook Air Modelle mit dem leistungsstarken M3 Chip. Neben der besseren Hardware, die deutlich schneller ist als die Rechner der Konkurrenz, wurde vor allem die Tatsache begrüßt, dass das Macbook endlich mit zwei externen Monitoren funktioniert. Erfreulich ist, dass die neuen MacBooks bereits bei Amazon bestellt werden […]

Amazon Black Friday Woche startet

amazon black friday woche 2023

Auch in diesem Jahr präsentiert Amazon während der Black Friday Woche wieder erstklassige Schnäppchen in allen Kategorien. Kundinnen und Kunden können sich auf einzigartige Geschenkideen und interessante Angebote für die bevorstehende Weihnachtszeit freuen. Darüber hinaus gibt es eine Vielzahl weiterer Produkte mit attraktiven Preisnachlässen – und das elf Tage lang. Ab Freitag, den 17. November […]


Ähnliche Beiträge



Keine Kommentare vorhanden


Du hast eine Frage oder eine Meinung zum Artikel? Teile sie mit uns!

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *