(X)HTML / CSS Tutorial: Simple Dropdown-Navigation mit HTML/CSS

1 | Bewertung: Keine Berechtigung!

Heutzutage sieht man Dropdown-Navigationen überall. Doch wie lässt sich eine solche einfach umsetzen?

Die HTML-Struktur

Die Semantischste Methode, eine Navigation in HTML zu definieren sind Ungeordnete Listen (ul)

Zu allererst bauen wir daher einmal en HTML-Code, der die Navigation darstellen soll...

Code:






<ul id="navigation">


            <li>


               <a href="#">Home</a>


            </li>


            <li>


                <a href="#">&Uuml;ber mich</a>


                <ul>


                    <li><a href="#">Allgemein</a></li>


                    <li><a href="#">Lebenslauf</a></li>


                    <li><a href="#">Philosophie</a></li>


                </ul>


            </li>


            <li>


                <a href="#">Projekte</a>


                <ul>


                    <li><a href="#">Projekt 1</a></li>


                    <li><a href="#">Projekt 2</a></li>


                    <li><a href="#">Projekt 3</a></li>


                </ul>


            </li>


            <li>


                <a href="#">Kontakt</a>


            </li>


            <li>


                <a href="#">Impressum</a>


            </li>


        </ul>

In nur wenigen Zeilen haben wir jetzt also die Grundstruktur unserer Navigation fertiggestellt.
Da ganze sollte jetzt in etwa so aussehen:

HTML Grundgerüst
Die schaut noch nicht nach viel aus, daher muss man nun ein bisschen CSS hinzufügen:

Das CSS

Ziel ist es, eine Horizontale Navigation zu erreichen, von der in die Vertikale die Unternavigation herunterfährt.

1. Die erste Ebene Horizontal bringen

Zuerst kümmern wir uns um die erste (Horizontale) Ebene.
Um den List-Style und den ungewünschten Padding loszuwerden machen wir erstmal folgenden:

Code:






ul{


            list-style:none;


            margin:0;


            padding:0;


        }

Dann möchten wir die erste Ebene Horizontal bringen.

Code:






#navigation > li{


            display:inline-block;


        }

Noch ist uns die Zweite Ebene im Weg. Um diese vom rest herauszuheben und zu verstecken:

Code:






#navigation > li > ul{


            position:absolute;


            visibility:hidden;


        }

Sie soll nur sichtbar sein, wenn man über die Kategorie fährt. Das erreicht man so:

Code:






#navigation > li:hover > ul{


            visibility:visible;


        }

Die Dropdown-Navigation wäre mit diesem Schritt rein Funktionell fertig. Jetzt bleibt nur mehr ein bisschen Style fürs auge.
Die Finale version könnte zB so aussehen

FInal

hier ist nochmal der gesammte Code wie ich ihn für das beispiel geschrieben habe:

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=UTF-8">


        <title>Simple Dropdown-Navigation</title>


    </head>


    <style>


        a{


            color:inherit;


            text-decoration:inherit;


        }


        #navigation {


            margin: 0px 0 0 0px;


            padding: 0;


            display: block;


            list-style: none;


            color: hsl(200, 40%, 90%);


            font-size: 12px;


            background-color: hsl(200, 40%, 30%);


            background: -moz-linear-gradient(top, hsl(200,40%,35%) 0%, hsl(200,40%,34%) 49%, hsl(200,40%,32%) 51%,  hsl(200,40%,30%) 100%);


            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsl(200,40%,35%)), color-stop(49%,hsl(200,40%,34%)), color-stop(51%,hsl(200,40%,32%)), color-stop(100%,hsl(200,40%,30%))); 


            border:solid 1px hsl(200,40%,20%);


            border-radius:3px;


            -moz-border-radius:3px;


            -moz-box-shadow: hsl(200,40%,40%) 1px 1px inset, hsl(200,40%,40%) -1px -1px inset;


            -webkit-box-shadow: hsl(200,40%,40%) 1px 1px inset, hsl(200,40%,40%) -1px -1px inset;


            box-shadow: hsl(200,40%,40%) 1px 1px inset, hsl(200,40%,40%) -1px -1px inset;


        }


        


        #navigation > li {


            padding: 5px 10px 5px 10px;


            margin-left: 5px;


            display: inline-block;


            border: solid 1px;


            border-color: transparent;


        }


        


        #navigation > li > a {


            text-transform: uppercase;


        }


        


        #navigation > li:after {


        }


        


        #navigation > li:last-child:after {


            content: "";


        }


        


        #navigation > li:hover {


            background: hsl(0, 0%, 100%);


            border: solid 1px hsl(200, 40%, 40%);


            border-bottom-color: hsl(0, 0%, 100%);


            -webkit-border-top-left-radius: 3px;


            -webkit-border-top-right-radius: 3px;


            -moz-border-radius-topleft: 3px;


            -moz-border-radius-topright: 3px;


            border-top-left-radius: 3px;


            border-top-right-radius: 3px;


            color: hsl(200, 40%, 40%);


        }


        


        #navigation > li > ul {


            position: absolute;


            margin: 6px 0 0 -11px;


            padding: 0;


            z-index: 999;


            background: hsl(0, 0%, 100%);


            border: solid 1px hsl(200, 40%, 40%);


            border-top: none;


            -webkit-border-bottom-right-radius: 3px;


            -webkit-border-bottom-left-radius: 3px;


            -moz-border-radius-bottomright: 3px;


            -moz-border-radius-bottomleft: 3px;


            border-bottom-right-radius: 3px;


            border-bottom-left-radius: 3px;


            color: hsl(200, 40%, 40%);


            list-style: none;


            visibility: hidden;


        }


        


        #navigation > li:hover > ul {


            visibility: visible;


        }


        


        #navigation > li > ul > li {


            padding: 5px 10px 5px 10px;


            border-bottom: solid 1px hsl(200, 40%, 60%);


            font-size: 11px;


            cursor: pointer;


        }


        


        #navigation > li > ul > li:hover {


            background-color: hsl(200, 40%, 95%);


        }


        


        #navigation > li > ul > li:last-child {


            border: none;


        }


    </style>


    <body>


        <ul id="navigation">


            <li>


                <a href="#">Home</a>


            </li>


            <li>


                <a href="#">&Uuml;ber mich</a>


                <ul>


                    <li>


                        <a href="#">Allgemein</a>


                    </li>


                    <li>


                        <a href="#">Lebenslauf</a>


                    </li>


                    <li>


                        <a href="#">Philosophie</a>


                    </li>


                </ul>


            </li>


            <li>


                <a href="#">Projekte</a>


                <ul>


                    <li>


                        <a href="#">Projekt 1</a>


                    </li>


                    <li>


                        <a href="#">Projekt 2</a>


                    </li>


                    <li>


                        <a href="#">Projekt 3</a>


                    </li>


                </ul>


            </li>


            <li>


                <a href="#">Kontakt</a>


            </li>


            <li>


                <a href="#">Impressum</a>


            </li>


        </ul>


    </body>


</html>