Schlagwort-Archive: Horizontales Menü mit HTML und CSS

Horizontales Menü mit HTML und CSS erstellen

Um eine einfache horizontale Navigation in HTML und CSS zu erstellen gibt einen recht einfachen Weg. Man nimmt dazu die HTML Listen Tags, also eine „ul“ und „li“ Konstellation. Diese kann man mit CSS formatieren um ziemlich schnell ein schönes Ergebniss zu erzielen.
So sieht das ganze aus, zuerst der HTML Teil:
<!DOCTYPE html>
<html>
    <head>
        <title>Horizontale Navigation</title>
    </head>
<body>
<h2>Horizontale Navigation:</h2>
<ul>
    <li><a href="#">Button1</a></li>
    <li><a href="#">Button2</a></li>
    <li><a href="#">Button3</a></li>
    <li><a href="#">Button4</a></li>
    <li><a href="#">Button5</a></li>
</ul>
</body>
</html>

Und jetzt der CSS Teil, welcher am besten genau als letztes Element im HTML Head eingefügt wird:
<style type="text/css">
    body {
        color: #000000;
        font-family: verdana;
        font-size: 12px;
    }
    h2 {
        text-align: center;
        text-decoration: underline;
        width: 100%;
    }
    ul {
        float: none;
        list-style: none outside none;
        margin: 0 auto;
        padding: 0;
        position: relative;
        width: 50%;
    }
    li {
        background: none repeat scroll 0 0 #868686;
        border: 1px solid #464646;
        border-radius: 3px;
        float: left;
        margin: 0 0 10px 10px;
        padding: 0;
        position: relative;
        width: 60px;
    }
    li:first-child {
        margin: 0 0 10px 10px;
    }
    li:hover {
        background: none repeat scroll 0 0 #757575;
        border: 1px solid #464646;
    }
    a {
        color: #FFFFFF;
        float: left;
        margin: 0;
        padding: 0;
        position: relative;
        text-align: center;
        text-decoration: none;
        width: 100%;
    }
</style>

Ihr könnt euch das Ergebnis hier ansehen:
Wenn Ihr den Quelltext am Stück sehen wollt einfach einen Rechtsklick in den Iframe machen und auf „Frame-Quelltext anzeigen“ gehen. Dann seht Ihr auch genau wie der Stylesheet im Header eingebaut ist.

Ich hoffe Ihr könnt mit dieser Information etwas anfangen.
Viel Erfolg weiterhin bei eurer eigenen Seite.