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 startet den 10. Prime Day am 16. und 17. Juli

prime day juli 2024

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


Ä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 *