• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Horizontale Navigationsleiste

P

phzu

Neues Mitglied
Hallo!

Ich bin gerade dran eine Navigationsleiste zu basteln. Natürlich weiß ich dass es hunderte Vorlagen und Beispiele gibt, allerdings sind die zum Teil sehr unvertändlich bzw. altmodisch gestaltet.

Jetzt als ersten Schritt möchte ich die Menüelemente mit ihren Submenüs anzeigen lassen, da ich später das Ganze mit JQuery animieren will.

So weit so gut, allerdings habe ich große Probleme beim Formatieren meiner Liste die das Menü werden soll. So sind meine Menüs aufgebaut.

HTML: 
   <body>
        <header id="page_header">
            <img src="images/header.png" id="header_img">
            <nav>
                <ul>
                    <li><a href="#">Parent 01</a>
                        <ul>
                            <li><a href="#">01 Item 01</a></li>
                            <li><a href="#">01 Item 02</a></li>
                            <li><a href="#">01 Item 03</a></li>
                            <li><a href="#">01 Item 04</a></li>
                        </ul> 
                    </li>
                    <li><a href="#">Parent 02</a>
                        <ul>
                            <li><a href="#">02 Item 01</a></li>
                            <li><a href="#">02 Item 02</a></li>
                        </ul> 
                    </li>
.. und so weiter

Weiter unten werden die restlichen Tags geschlossen. Mit CSS will ich nun die Submenüs unter den jeweiligen Menüs darstellen, was ich auch geschafft habe, allerdings sind es nicht die richtigen Submenüs. :?

Beispiel: Unter Parent 01 werden Submenüs von Parten 02 und Parent 03 dargestellt.

Mit CSS habe ich das so formatiert:

Code: 
header#page_header{
    width: 100%;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
}

header#page_header nav { 
    display:block;  
    position:relative;
}

header#page_header nav ul { 
    padding:0; 
    margin:0; 
}

header#page_header nav li { 
    float:left; 
    list-style-type:none; 
}

header#page_header nav ul:after { 
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden; 
}

header#page_header nav li a { 
    display:block; 
    padding:10px 20px;
}

header#page_header nav ul ul { 
    display:block; 
    position:absolute; 
    top: 39px;
    left: 0px;
}

header#page_header nav ul ul li { 
    float:none;
}

header#page_header nav ul ul a { 
    padding:10px 20px; 
    border-left:none; 
    border-right:none; 
    font-size:14px; 
    width: 150px;
    text-align: left;
}

Es ist alles in HTML5 programmiert, was allerdings nicht der Große unterschied sein sollte.

Eigentlich habe ich schon eine Menge mit CSS und HTML gemacht, allerdings tu ich mir mit solchen Dingen noch sehr schwer..

Würde mich über eine Korrektur freuen!

mfg
 
Werbung:
Hi versuche es einmal mit diesem Code. Ich weiß nicht wofür du absolut positionierst und die Pseudoklasse :after verstehe ich in diesem Zusammenhang auch nicht. Zur logischen Übersicht immer den gesamten Pfad der Tags angeben und keine Tags überspringen!

Hier der Code (nicht getestet, müsste aber funktionieren):

Code: 
header#page_header{    
    width: 100%;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
}


header#page_header nav ul { 
    list-style-type:none; 
}


header#page_header nav ul li { 
    float:left; 
}


header#page_header nav ul li a { 
    display:block; 
    padding:10px 20px;
}


header#page_header nav ul li ul { 
    display:block; 
}


header#page_header nav ul li ul li { 
    display:block;
    float:none;
}


header#page_header nav ul li ul li a { 
    display:block;
    float:none;
    padding:10px 20px; 
    border-left:none; 
    border-right:none; 
    font-size:14px; 
    width: 150px;
    text-align: left;
}

Entscheidend ist halt, dass die <li> Tags nach dem ersten <ul> gefloated werden. Der Rest muss als Blockelement formatiert sein. Habe das zur Verdeutlichung noch einmal im CSS angegeben, wobei <li> und <ul> natürlich automatisch als Block-Elemente formatiert werden. Das display:block; schadet allerdings nicht.

Sollte der Code nicht hinhauen, dann schaue ich mir das im Detail noch einmal an und teste das selber.

grüße
 
Vielen Dank für die schnelle Hilfe! Werde ich bei nächster Gelegenheit probieren. Melde mich dann wieder!
mfg
 
Werbung:
Gern geschehen! Allgemein gilt, dass absolute Positionierung meistens mehr Nachteile als Vorteile aufweisen und nur in Ausnahmefällen verwendet werden müssen. Der Browser positioniert die Elemente automatisch und über margin, padding, float und display wird der Rest geregelt.

grüße hokage
 
Damit ist das Untermenü aber ständig sichtbar. Hier wäre ein selbst erklärendes Grundgerüst für eine Dropdown-Navigation mit minimalem CSS. Das habe ich irgendwann mal für mich selbst geschrieben, nachdem ich feststellen musste, dass die entsprechenden Tutorials im Netz zumeist übermäßig aufgebläht sind.
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Horizontale CSS-Navigation</title>
        <style type="text/css">
            
          /* Generelle Angaben für Farbe, Schriftgröße, etc. */
          body {
            font-family: Verdana;
            font-size: 12px;
            color: black;
          }
          
          /* Zuerst die Listenformatierung aufheben */
          #menu ul {
            list-style: none;
            margin: 0;
            padding: 0;
          }
          
           /* Anschließend alle Listenelemente links nebeneinander anordnen */
          #menu ul li {
            display: block;
            float: left;
          }
          
          /* Die Linkformatierung entfernen */
          #menu ul li a {
            text-decoration: none;
            color: black;
          }
          
          /* Danach das Submenü im Normalzustand unsichtbar stellen */
          #menu ul li ul {
            visibility: hidden;
          }
          
          /* ... und beim Hovern wieder sichtbar machen */
          #menu ul li:hover ul {
            visibility: visible;
          }
          
          /* Zum Schluß die Listenelemente des Submenüs untereinander anordnen */
          #menu ul li ul li {
            clear: both;
          }
        </style>
    </head>
    <body>
        <div id="menu">
           <ul>
               <li>
                   <a href="#">Menüpunkt 1</a>
                  <ul>
                    <li><a href="#">Menüpunkt 1.1</a></li>
                    <li><a href="#">Menüpunkt 1.2</a></li>
                    <li><a href="#">Menüpunkt 1.3</a></li>
                  </ul>
               </li>
               <li>
                   <a href="#">Menüpunkt 2</a>
                 <ul>
                    <li><a href="#">Menüpunkt 2.1</a></li>
                    <li><a href="#">Menüpunkt 2.2</a></li>
                    <li><a href="#">Menüpunkt 2.3</a></li>
                 </ul>
               </li>
           </ul>
        </div>
    </body>
</html>
 
Zuletzt bearbeitet:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben