Wie erstelle ich eine Navigation ?
Wie erstelle ich eine Navigation ?
Ich zeige euch jetzt ihn einigen Schritten, wie ihr euch eine Navigation selber erstellen könnt, ansatt sie euch von jemand anderen einfach zu kopieren.1. Anfangen machen wir mit dem Style der Navigation und dieser Teil kommt zwischen den Style-tags (also zwischen < style> und < /style>)
das ist der Code für dieses Navi(der Code ist länger als er sein müsste damit ihr alle möglichkeiten seht)
Die Erklärung:
A.navi:link, A.navi:active, A.navi:visited { so wird deine Navigation anzeigt wenn man nicht mit der Maus drüberfährt
A.navi:hover { so wird deine Navigation angezeigt wenn die Maus drüberfährt
display: block; macht das die Navigation untereinander gezeigt wird (also blockartig)
padding-left/right/bottom/top: 5px ; ist die Größe des Abstandes der Navigation von der Box in der es ist
margin-top: 1px; ist der Abstand der Navigationszeile zur anderen Navigationszeile
text-transform: uppercase; macht das der Text in Großbuchstaben angezeigt wird
text-align: left/right; gibt die Ausrichtung des Textes an
font-family: Arial; ist die Schriftart
font-weight: bold; der Text wird fett angezeigt
font-style: italic; macht den Text kursiv
font-size : 10px ; bestimmt die Schriftgröße des Textes
color: #B2B299; bestimmt die Textfarbe
letter-spacing: 2px; bestimmt den Buchstabenabstand des Textes
line-height: 10px; bestimmt die Höhe der Navigationszeile
text-shadow: #ffffff 0px 0px 6px; macht das der Text einen Schatten hat (Farbe des Schattens ist änderbar)
border-left/right/bottom/top: 2px solid #c0c0c0; ist der Rand den die Navigationszeile haben kann (dieser kann solid=normal , dotted=gepunktet oder dashed=gestrichelt sein und die Breite des Randes ist änderbar)
-moz-border-radius/-bottomright/-bottomleft/-topleft/-topright: 5px; ist die Abrundung der Navigationszeile (wird nicht bei Internetexplorer angezeigt)
background-color:#ececec; ist die Hintergrundfarbe
text-transform:capitalize; macht das der erste Buchstabe in der Navigation groß wird
background-image: url('xxx'); ist das Hintergrundbild (die URL des Bildes durch die drei x ersetzen)
Und die oben genannten Sachen könnt ihr bei A.navi:hover { verändern damit man einen unterschied sieht wenn man drüberfährt mit der Maus.
So und nachdem ihr den Style eures Navis bestimmt habt müsst ihr nun wissen wie ihr den jetzt einfügt.
Und das geht mit diesem Code:
http://URL hier fügt ihr die Url ein die verlinkt werden soll
Titel hier schreibt ihr den Text rein der in der Navi dann zusehen ist (z.B. Home, About, the Site)
class="navi" Ruft die Eigenschaften/Style auf (hier aufpassen das ihr beim Style und hier den Gleichen namen eingebt und es muss nicht unbedingt navi sein)
Ihr könnt auch eine Navigation mit mehreren Navigationszeilen machen, wie bei dem Beispiel oben (mit home, About, the Site, Outlet usw). Dafür müsst ihr einfach den Code mit dem ihr eure Navi einfügt so oft wie ihr es haben wollt untereinander kopieren.
und das wars dann auch schon.
Fall es noch Fragen gibt könnt ihr mich HIER fragen.
Tutorial by Bombastiic