• hallo,
    ich möchte gerne wissen, wie man aufklappbare listen erstellen kann, ungefähr so:

    Code
    <ul>Navigation
     <li>Item1</li>
     <li>Item2</li>
     ...
    </ul>
    <ul>Anderes
     <li>Item1</li>
     ...
    </ul>

    was ich hier möchte, ist dass wenn man auf Navigation klickt, dass alle unterelemente ein- bzw ausgeblendet werden.
    mit visibility:hidden/visible werden sie ja nur unsichtbar, brauchen aber noch ihren Platz.
    wie kann man das machen, das sie keinen platz mehr brauchen?

    vielen dank

  • danke, aber das war nicht gerade das was ich gesucht habe.
    aber ich denke mal, dass ich jetzt einen plan davon habe, wie ich es realisieren könnte :)

  • Zu erst einmal werden die Listen verschachtelt.

    Dann wird das Untermenu, der Barrierefreiheit halber, aus dem Bildbereich Positioniert. Es geht aber auch ein display: none;

    Mit hover wird dann das ganze einfach eingeblendet.

    Code
    li ul:hover {
    -anweisung-
    }

    Im Buch CSS-Praxis wird das wie folgt gelöst.
    Das zum ausblenden des Untermenüs:

    Code
    li ul {
    position: absolute;
    left: -999em;
    [COLOR=Silver]margin: left: 11.05em;/*individuelle angabe*/
    margin-top: -2.35em;[/COLOR][COLOR=Silver]/*individuelle angabe*/[/COLOR]
    }

    Und hier wird es wieder eingeblendet:

    Code
    li:hover ul, li.iehover ul { [COLOR=Silver]/*das iehover ist eine extra javascript hover-classe für den ie weil der das nich richtig kann*/[/COLOR]
    left: auto;
    }

    2 Mal editiert, zuletzt von thilda (19. April 2009 um 12:32)