[CSS] [Tutorial] Horizontale und vertikale Navigation mit CSS

Dieses Thema im Forum "Webdesign" wurde erstellt von Flyde, 28. November 2008 .

  1. 28. November 2008
    [Tutorial] Horizontale und vertikale Navigation mit CSS

    Edit vorweg: Sorry, hatte das ganz vergessen durch meinen Schulkram (Wurde durch nen BW aufmerksam), werde es auf jedenfall noch beenden ! Spätestens bis diesen Sonntag

    Hi,

    in diesem Tutorial erkläre ich den Aufbau einer horizontalen und vertikalen Navigation mit <ul> und einem <div>.
    Es gibt bestimmt 1000 Wege das zu realisieren aber für mich ist das der momentan beste und effektivste.

    Voraussetzungen:
    - Umgang mit <ul>, <li> (Wobei das selbsterklärend sein sollte) - http://de.selfhtml.org/html/text/listen.htm
    - CSS Grundkenntnisse (Was es mit dem id=""-TAG in Verbindung mit CSS: #Klassenname auf sich hat) - http://www.css4you.de/wscss/index.html

    Mehr auch nicht, der Rest wird alles erklärt

    Schritt 1:

    1.1 Man legt sich 2 Datein an
    - menu.css
    - index.htm


    1.2 Man baut in der index.htm das Gerüst für die Navigation auf

    index.htm

    HTML:
    <html>
    <head>
    <title>Navigationstutorial</title>
    <!-- Damit bindet man die menu.css ein, diese muss im gleichen Verzeichnis liegen wie die index.htm -->
    <link rel="stylesheet" type="text/css" href="menu.css" /> 
    </head>
    <body>
    
    <!-- Der Klassenname ist jetzt nur als Beispiel für das Verständniss genommen -->
    <div id="meineNavigation">
    
     <!-- Die Listenpunkte werden wir gleich mittels CSS formatieren und zu einem gewünschten Navigationsergebniss bringen -->
     <ul>
     <li><a href="#">Erster Navigationspunkt</a></li>
     <li><a href="#">Zweiter</a></li>
     <li><a href="#">Dritter</a></li>
     <li><a href="#">Etc.</a></li>
     </ul>
     <!-- // -->
    
    </div>
    <!-- // -->
    </body>
    </html>
    
    Vertikale Methode
    Schritt 2: CSS Datei bearbeiten und die Navigation zum Leben erwecken

    menu.css
    (Am besten kopiert ihr euch das in einen Editor, damit das Syntax-Highlightning greift.)
    PHP:

    #meineNavigation {
        
    width 150px
    }


    #meineNavigation ul { 

        /* Mit diesem Befehl haben wir keinen Listenstyle mehr. D.h. keine Aufzählungspunkte o.ä. */
        
    list- style - type none
        
        

        
    margin 0
        
    padding 0 ;
        
        

        
    border - top 1px solid  #999999;
        /*einen für rechts auch noch, das kann aber jeder für sich entscheiden.. */
        
    border - right 1px solid  #999999;
    }



    #meineNavigation li { 

        /* Abstand oben und unten jeweils (X)px, wieder mal wie es jeder möchte... */
        
    padding - top 10px ;
        
    padding - bottom 10px
        

        
    padding - left 10px ;
        
        

        
    background - color #CCCCCC;
        
        /* Die beim ul erwähnten border-bottoms für den li-TAG, somit hat jeder Listenpunkt nun einen border-bottom und der letzte Punkt schließt die Box rein vom aussehen her */
        
    border - bottom 1px solid  #999999;
    }



    #meineNavigation a {
        
    color #000000; /* Textfarbe schwarz */
        
    text - decoration none
    }
    #meineNavigation a:hover { /* a:hover stellt den Hovereffekt ein, ein Hovereffekt ist der Effekt, der passiert, wenn man mit der Maus über den Link geht */
        
    color #666666; /* Eine wechselnde Farbe z.B. */
        
    text - decoration underline
    }



    Horizontale Methode
    Zurück zu Schritt 1

    index.htm
    HTML:
    <html>
    <head>
    <title>Navigationstutorial</title>
    <!-- Damit bindet man die menu.css ein, diese muss im gleichen Verzeichnis liegen wie die index.htm -->
    <link rel="stylesheet" type="text/css" href="menu.css" /> 
    </head>
    <body>
    
    <!-- ###############NEUER INHALT############### -->
    <!-- Ich habe nun ein Wrap um die Navigation gebaut, um die Navigation innerhalb des Wraps besser ausrichten bzw. designen zu können --> 
    <div id="wrap_navigation">
     <!-- Der Klassenname ist jetzt nur als Beispiel für das Verständniss genommen -->
     <div id="meineNavigation">
     
     <!-- Die Listenpunkte werden wir gleich mittels CSS formatieren und zu einem gewünschten Navigationsergebniss bringen -->
     <ul>
     <li><a href="#">Erster Navigationspunkt</a></li>
     <li><a href="#">Zweiter</a></li>
     <li><a href="#">Dritter</a></li>
     <li><a href="#">Etc.</a></li>
     <li><a href="#">Usw.</a></li>
     <li><a href="#">Noch ein Item</a></li>
     <li><a href="#">Beliebig...</a></li>
     </ul>
     <div class="clear"></div>
     <!-- // -->
     
     </div>
     <!-- // -->
    </div>
    </body>
    </html>
    Schritt 2

    menu.css
    PHP:


    . clear  {
        

        
    clear : both
    }


    #wrap_navigation {
        
    background - color #CCCCCC; /* Farbe für die ganze Navigationsleiste */
        /* Unten und oben einen Border, wieder fürs Auge */
        
    border - top 1px solid  #666666;
        
    border - bottom 1px solid  #666666;
    }


    #meineNavigation {
        /* ###############GEÄNDERTER INHALT############### */
        /* width: 150px; Breite wird nicht angegeben, da es individuell breit werden kann, neuer Navigationspunkt -> neue Breite */
    }


    #meineNavigation ul {

        /* Mit diesem Befehl haben wir keinen Listenstyle mehr. D.h. keine Aufzählungspunkte o.ä. */
        
    list- style - type none ;
        
        

        
    margin 0 ;
        
    padding 0 ;
    }



    #meineNavigation li {

        /* Abstand oben und unten jeweils (X)px, wieder mal wie es jeder möchte... */
        
    padding - top 10px ;
        
    padding - bottom 10px ;
        
        

        /* Ein wenig padding links und rechts, damit die einzelnen list-items nicht so eingequetscht sind :) */
        
    padding - right 25px ;
        
    padding - left 25px ;
        
        

        
    background - color #CCCCCC;
        
        /* ###############NEUER INHALT############### */
        /* Richtet die einzelnen Punkte nebeneinander aus, am Ende der Navigation muss ein 
        clear gemacht werden (Siehe .clear) Man könnte es auch mit display: inline; machen. */
        
    float left
    }



    #meineNavigation a {
        
    color #000000; /* Textfarbe schwarz */
        
    text - decoration none
    }
    #meineNavigation a:hover { /* a:hover stellt den Hovereffekt ein, ein Hovereffekt ist der Effekt, der passiert, wenn man mit der Maus über den Link geht */
        
    color #666666; /* Eine wechselnde Farbe z.B. */
        
    text - decoration underline

    Das ganze sieht relativ langweilig aus, also machen wir doch mal einen Hover dazu
    Hinweis: Es sieht ziemlich langweilig aus aber wenn ihr den Kommentaren folgt, dann könnt ihr das natürlich auch nach euren Vorstellungen gestalten.


    Vorschläge und Kritik sind erwünscht.
    Inhalte die noch kommen:
    - Hovereffekt für den kompletten li-Bereich
     
  2. 28. November 2008
    AW: [Tutorial] Horizontale und vertikale Navigation mit CSS

    Mach statt [noparse][html]...[/html] einfach [php]...[/php].[/noparse] Ich glaub, dann haste ein akzeptables Highlighting auch für CSS.
     
  3. 28. November 2008
    AW: [Tutorial] Horizontale und vertikale Navigation mit CSS

    Danke, ist besser, zwar sind die #HEX blöd dargestellt aber nun gut, jeder der das Tutorial macht, sollte auch einen HTML-Editor haben
     
  4. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.