XHTMLforum - Responsive Navigation mit Pseudo :target

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Responsive Navigation mit Pseudo :target (http://xhtmlforum.de/showthread.php?t=72357)

starkheim

24.09.2015 14:20

Responsive Navigation mit Pseudo :target

Hallo

Ich möchte ein Responsives Listenmenü (NAV > UL > LI >NAV > UL > LI >NAV > UL > LI >) über drei Ebenen mit :target auf und zuklappen.

Das Klappt mit der 2. Ebene Wunderbar in dem ich der übergeordneten NAV eine ID verpasse und diese ID verlinke.

Code:

#topNav :target nav.ebene2 {

Display:block;}

}

Verwende ich nun zum ansteuern der 3. Ebene eine Andere ID Klappt das Menü zusammen.

Wie kann ich die 3. Ebene öffnen und die 2. Ebene Offen halten.

cloned

24.09.2015 14:25

CSS ohne HTML ist relativ nutzlos.
Auch wäre hier ein Beispiellink sehr hilfreich.

starkheim

25.09.2015 07:45

Hallo

hier vereinfacht das html

HTML-Code:

<nav>

        <ul id="topNav">

          <li><a href="#topNav">...</a>

           <nav>

                   <ul id="globalNav" class="ebene1">

                          <li id="seite1"><a href="#seite1">...</a>

                           <nav>

                                        <ul class="ebene2">

                                          <li><a href="useite1.html">...</a></li>

                                          <li><a href="useite1.html">News</a>...</li>

                                          </li>

                                        </ul>

                                </nav>

                                ......

Die CSS die das auf und zuklappen steuert sieht so aus:

Code:

.ebene1 {

height:0;

overflow:hidden;

}

.ebene2{

position:absolute;



left:-9999px;

border: 1px solid;



}



#topNav:not(:target) .ebene1{

height:0;





}

#topNav:target .ebene1 {

display:block;

height:auto;

overflow:100%;



}

#topNav :target .ebene2 {

left:0;

width:100%;

height:auto;

}

cloned

25.09.2015 08:24

Danke, jetzt versteh ich es. Dein Problem ist, dass immer nur ein Element target-Status haben kann. Das ist nichts, was du ändern kannst. Das heißt, wenn ein Unterelement von ausgewählt ist, verschwindet logischerweise das target von topNav und das CSS wirkt nicht mehr. Da würde mir auch nichts einfallen, wie man das ändern könnte.

starkheim

25.09.2015 08:31

Gibt es eine andere Möglichkeit ein Responsives Menü ohne Javascript zu erstellen?
Oder kann man irgendwie das Elternelement ansprechen?

dazzle89

25.09.2015 08:59

Falls ich dein Problem richtig verstehe, könntest du es mit dem Checkbox Hack versuchen.

Beispiel:

How To Create A Responsive Navigation Menu Using Only CSS : Medialoot

Damit kannst du sozusagen ohne Javascript ein Klick-Event realisieren.

starkheim

26.09.2015 08:33

Hallo dazzle89

das hat geklappt.

Ich nehme nun die Checked-Box zum einblenden des Menüs und steuere die Eintrage über :target.

Jetzt machte es das was ich wollte

Danke dazzle89
und auch danke an cloned. Dadurch wusste ich wenigstens, dass die Möglichkeiten mit :target begrenzt sind

Alle Zeitangaben in WEZ +2. Es ist jetzt 16:23 Uhr.