Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

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



Ranking: +3   Kommentare: 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
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
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>




Veröffentlicht von: phii
Veröffentlicht am: 13 Mar. 2011
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: CSS Dropdown HTML Menu Menü navi navigation


Themenverwandte Tutorials


Kommentar(e) (1)


Mr.TechnoDesing sagt:

Cool!
Genau sowas habe ich gesucht!

2 Jun. 2011 16:14:09 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder