zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Responsive Navigation mit Pseudo :target

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.09.2015, 14:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.09.2015
Beiträge: 4
starkheim befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.09.2015, 14:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.207
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

CSS ohne HTML ist relativ nutzlos.
Auch wäre hier ein Beispiellink sehr hilfreich.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.09.2015, 07:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.09.2015
Beiträge: 4
starkheim befindet sich auf einem aufstrebenden Ast
Standard

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;
}

Geändert von starkheim (25.09.2015 um 07:48 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 25.09.2015, 08:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.207
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 25.09.2015, 08:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.09.2015
Beiträge: 4
starkheim befindet sich auf einem aufstrebenden Ast
Standard

Gibt es eine andere Möglichkeit ein Responsives Menü ohne Javascript zu erstellen?
Oder kann man irgendwie das Elternelement ansprechen?
Mit Zitat antworten
  #6 (permalink)  
Alt 25.09.2015, 08:59
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 26.09.2015, 08:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.09.2015
Beiträge: 4
starkheim befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Ausrichtung Kalender greece4u CSS 20 14.05.2012 13:32
Navigation ist nicht mittig Schokokrapfen CSS 29 19.09.2011 23:19
Problem mit Navigation safari CSS 12 20.04.2011 11:11
Float-Problem? mischaef CSS 33 20.10.2010 16:20
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 15:29


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:52 Uhr.