Ergebnis 1 bis 5 von 5

Thema: Navigation mit Submenü

  1. #1
    Fortgeschrittene/r
    Registriert seit
    29.02.2008
    Beiträge
    172
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Navigation mit Submenü

    Ich habe mir von http://de.selfhtml.org/css/layouts/n...onsleisten.htm einen Code für eine Navgation mit Subnavigation übernommen und etwas abgeändert. Das problem ist jetzt das wenn ich auf den 2 Hauptmenüpunkt gehe (mit 3 untermenüpunkten!) verstecken sich die 2 ersten Submenüpunkte hinter den 2 letzten Hauptmenüpunkten. Da ich noch nie eine Navigation mit einem Submenü erstellt habe, habe ich etwas rumprobiert, allerdings konnte ich die 3 submenüpunkte nur unter den letzten Hauptmenüpunkt positionieren! Ich häte aber gerne das die letzten 2 Menüpunkte praktisch herunterfahren wenn ich auf den 2 Hauptmenüpunkt komme und für die 3 Submenüpunkte platz machen!

    Ich hoffe ich habe es so einiegermaßen verständlich beschrieben und hoffe auf schnelle Hilfe.
    Ach ja das ganze sollte natürlich auch noch funktionieren wenn ich anstatt 3, 5 Unterpunkte habe oder an den 1 Hauptmenüpunkt noch 3 Submenüpunkte anhängen möchte!

    MfG
    haillo
    Und hier natürlich der code noch:
    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Navigationsleiste mit mehreren Ebenen</title>
    <style type="text/css">
     body {
        font: normal 100.01% Helvetica, Arial, sans-serif;
        color: black; background-color: #ffffe0;
      }
    
      div#Rahmen {
        width: 47.1em;
        padding: 0.8em;
        border: 1px solid black;
        background-color: silver;
      }
      * html div#Rahmen {  /* Korrektur fuer IE 5.x */
        width: 48.7em;
        w\idth: 47.1em;
      }
      div#Rahmen div {
         clear: left;
      }
      ul#Navigation {
        margin: 0; padding: 0;
        text-align: center;
      }
    
      ul#Navigation li {
        list-style: none;
        /* ohne width - nach CSS 2.1 erlaubt */
        position: relative;
        margin: 1px; padding: 0;
      }
      * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
        margin-bottom: -0.4em;
      }
      *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
        margin-bottom: -0.1em;
      }
    
      ul#Navigation li ul {
        margin: 0px; padding: 0;
        position: absolute;
        top: 1.6em; left: -0.4em;
        display: none;  /* Unternavigation ausblenden */
      }
      * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
        left: -1.5em;
        lef\t: -0.4em;
      }
      *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
        background-color:silver; padding-bottom:0.4em;
      }
      ul#Navigation li:hover ul {
        display: block;  /* Unternavigation in modernen Browsern einblenden */
      }
      ul#Navigation li ul li {
        float: none;
        display: block;
        margin-bottom: 0,2em;
      }
    
      ul#Navigation a, ul#Navigation span {
        display: block;
        width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
        padding: 0.2em 1em;
        text-decoration: none; font-weight: bold;
        border: 1px solid black;
        border-left-color: white; border-top-color: white;
        color: maroon; background-color: #ccc;
      }
      * html ul#Navigation a, * html ul#Navigation span {
        width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */
        w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
      }
      ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
        border-color: white;
        border-left-color: black; border-top-color: black;
        color: white; background-color: gray;
      }
      li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
        color: maroon; background-color: silver;
      }
      ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
        background-color: maroon;
      }
    
    </style>
    </head>
    <body>
      <h1 id="Beispiel">Mehrere Navigationsebenen</h1>
    
      <ul id="Navigation">
        <li><a href="#Beispiel">Seite 1</a></li>
        <li><a href="#Beispiel">Seite 2</a>
          <ul>
            <li><a href="#Beispiel">Seite 2a</a></li>
            <li><a href="#Beispiel">Seite 2b</a></li>
            <li><a href="#Beispiel">Seite 2c</a></li>
          </ul>
        </li>
        <li><a href="#Beispiel">Seite 3</a></li>
        <li><a href="#Beispiel">Seite 4</a></li>
      </ul>
    
    </body>
    </html>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Das ist mir jetzt wirklich zuviel Mühe, mich da durchzuwursteln. Jedenfalls sind die vielen Spezialangaben für den IE6 sehr auffällig.
    Hat du es schonmal damit versucht? http://www.drweb.de/leseproben/klappmenu.shtml

  3. #3
    Fortgeschrittene/r
    Themenstarter

    Registriert seit
    29.02.2008
    Beiträge
    172
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Also ersteinmal Danke für den Link. Mir reicht es jetzt für den Anfang allerdings hätte ich schon gerne wie ich es oben beschrieben habe! Also falls sich jmd die Mühe machen würde würde ich mich sehr freuen!
    MfG
    haillo

  4. #4
    Fortgeschrittene/r
    Registriert seit
    23.02.2008
    Ort
    Graz
    Beiträge
    174
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    willst du ein vertikales oder horizontales?

  5. #5
    Fortgeschrittene/r
    Themenstarter

    Registriert seit
    29.02.2008
    Beiträge
    172
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ein vertikales!
    MfG
    haillo

Ähnliche Themen

  1. Navigation
    Von Billbos im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 02.09.2008, 18:29
  2. Navigation
    Von jaelle50 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 12.04.2008, 16:55
  3. Navigation
    Von im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 29.11.2005, 22:37
  4. Navigation
    Von micha01 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 14.11.2005, 14:04
  5. SubMenü
    Von mörchen im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 25.04.2005, 15:40

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •