zurck zur Startseite
  


Zurck XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Flexbox Dorpdown Menü, nicht funktionsfähig

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.02.2020, 11:43
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beitrge: 73
Iago2 befindet sich auf einem aufstrebenden Ast
Standard CSS Flexbox Dorpdown Menü, nicht funktionsfähig

Hallo,

Ich arbeite mich gerade in Flexbox ein und versuche mich an einem Drop-Down Menü.
Leider kann ich keine festen Breiten vergeben? Auch funktioniert die Steuerung nicht richtig. Hat hier jemand einen Tip? Vielen Dank.

display:flex sollte doch innerhalb <nav> sein, richtig?

Link zur Homepage: http://science-travel-com.stackstaging.com/

HTML-Code:
<style>

/** Navigation **/	
		
		
			.nav-area {
			    
		    
		   	display:flex;
		   	flex-direction:row;
			position:fixed; 
			justify-content:space-between;
			align-items:center;
			width:100%;
			
			}
		  
	    	.nav-area ul  {
			
		    flex-wrap:wrap;
			list-style:none;
			margin:0;
			padding:0;
		   

			}
			
		    .nav-area ul li a{
			
			background:#0e618a;
			
			
			}		
		
		.nav-area ul li > ul {
			
			display: none;	
			flex-direction: column;	
			
			}	
			
		.nav-area ul li > ul li {
		
			
			}	
					
		.nav-area ul li:hover > ul {			
		
			display:flex;
			flex-direction: column;	
			
			}			
			
		.nav-area a {
			
			text-transform:uppercase;
			display:block;
			background:#262626;
			padding:15px;
			color:#fff;
			text-decoration:none;
			text-align:center;
			
			}
			
		.nav-area a:hover {
			
			background:#d0dbe0;
			color:#000;		
			
			}			
		  
		@media(max-width: 600px)  {
			
			.nav-area ul li {
				
			width:100%;	
				
			
			}
		 } 

</style>

	<nav class="nav-area">
    
    <ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Space travel</a>
		
				<ul class="dropdown">
				<li><a href="#">Baikonur</a></li>
				<li><a href="#">KSC</a></li>
				<li><a href="#">Guiana Space Centre</a></li>
				</ul>
		</li>	   	
		<li><a href="#">Astronomy</a>
		
				<ul class="dropdown">
				<li><a href="#">Very Large Array</a</li>
				<li><a href="#"> Royal O., London</a></li>
				<li><a href="#">Cerro Paranal</a></li>
				<li><a href="#">Kitt Peak National O.</a></li>
				<li><a href="#">Griffith Observatory</a></li>
				<li><a href="#">SAAO</a></li>
				<li><a href="#">Griffith O.</a></li>
				<li><a href="#">Arcetri Astrophysical O.</a></li>
				<li><a href="#">Teide National Park</a></li>
				<li><a href="#">Hayden Planetarium</a></li>		
				</ul>
		</li>
			
		<li><a href="#">Biology</a></li>	
		<li><a href="#">Science & Arts</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
		
	</ul>
	</nav>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.02.2020, 20:59
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beitrge: 128
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Teste doch mal, ob diese Abnderung von vorhandenen Formaten dich weiter bringt:
HTML-Code:
.nav-area ul li:hover > ul {  
    display: flex;
    flex-direction: column;
    margin-left: 163px;
    position: absolute;
    margin-top: -50px;
}
.nav-area {
    display: flex;
    flex-direction: row;
    position: absolute;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.02.2020, 10:22
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beitrge: 73
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Danke Sailor56,

Das Men sollte eine horizontale Leiste oben sein mit Dropdown Men, aber fr ein Seitenmen funktioniert es.
Mit Zitat antworten
  #4 (permalink)  
Alt 22.02.2020, 13:43
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beitrge: 128
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Ach so... geht aber so aus deiner Frage im ersten Beitrag nicht hervor.
Aber wenn du es so haben mchtest, dann hilft dir vielleicht der folgende CSS Code:
HTML-Code:
.nav-area {
   display: flex;
   flex-direction: row;
   position: sticky;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   top: 0px;
}
.nav-area > ul {
  width: 100%;
  text-align: center;
  background-color: #fff;
}
.nav-area > ul > li {
  display: inline-block;
}
.nav-area ul li:hover > ul {
   display: flex;
   flex-direction: column;
   margin-left: 0px;
   position: absolute;
   margin-top: 0px;
}
Mit Zitat antworten
  #5 (permalink)  
Alt 22.02.2020, 17:00
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beitrge: 73
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Ok, danke Sailor56.

Position (nav-area) habe ich zu hier relative gemacht. .nav-area > ul habe ich auf margin:0px; padding:0px; um oben und unten keine Ränder zu haben.


Warum ersteckt sich <nav> nicht über die gesamte Breite des viewport, width ist ja 100%?

Auch sind die Untermenüpunkte bei <600px (media query für smarphones) nicht bünding, das war zumindes vorher gegeben.
Mit Zitat antworten
  #6 (permalink)  
Alt 22.02.2020, 18:44
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beitrge: 128
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Du hast den nav-Container auf 100% gesetzt und so breit ist er auch! Was du aber siehst, ist der Inhalt von diesem Container - das ist die List ul - und die ist eben nur so breit, wie sie selber Inhalt hat - das sind die li.
Um das seitenbreit zu bekommen, solltest du auf 'Flexbox' umstellen...
etwa so:
HTML-Code:
.nav-area > ul  {
	display: flex;		
  width:100%;
  text-align:center;
  background:#fff;
  justify-content:space-between;
	margin:0px;
	padding:0px;
}
.nav-area > ul > li {	
	flex: 1;
	display: inline-block;
  flex: 1;
}		
Hast du den List-Style bei den Untermenpunkten absichtlich hinzugefgt bzw nicht abgestellt? Das sieht 'besch...' aus.

Mach erst mal das jetzt fertig und wenn es dann weiterhin bei Smartphone Darstellung Probleme gibt, dann ist das eine andere Baustelle.
Mit Zitat antworten
  #7 (permalink)  
Alt 23.02.2020, 11:45
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beitrge: 73
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Aslo gut,
ich habe nun flex in der ersten <ul> nicht in <nav> und das Men wird ber den kompletten viewport dargestellt.
Bei .nav-area ul li:hover > ul habe ich position:absolute, dass sich die Elemente weiter unten nicht verschieben Ich habe keine Mglichkeit die Hover-Box nun zu positionieren.
Idealerweise sollte die Box bndig zu den Hauptmenpunkten sein.
Mit Zitat antworten
  #8 (permalink)  
Alt 23.02.2020, 12:16
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beitrge: 128
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Dann teste mal folgendes, um die Defaulteinstellung (Standardwert) fr das/die 'ul' im Untermen zu berschreiben:
HTML-Code:
.nav-area ul li > ul {
   display: none;	
   flex-direction: column;
   padding-left: 0px;
}	
Mit Zitat antworten
  #9 (permalink)  
Alt 23.02.2020, 16:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beitrge: 73
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Wie wrs mit der Holzhammer Methode:

HTML-Code:
* {
		margin:0;
		padding:0;
		}
Die Frage ist eben, wenn ich jetzt bei der Dropdown box irgednwie mit Breiten und positioning (top/ left) rummache, wie bekomme ich dann nachher eine gescheite responsivness hin ? Der Link im Hauptmen und die Dropdown-Box muss graphisch
aus EINEM GUSS sein!
********************************

Ich hab hier noch eine CSS-Alternative (HTML bleibt gleich), Die Dropdown-box passt sich schn den Hauptmen Listenpunkten an, alledings bekomme ich das nicht zugeklappt:

HTML-Code:
.nav-area a {
		
		display:flex;
		align-items:center;
		justify-content:center;
		color:#fff;
		background-color:#0e618a;
		height:50px;
		text-decoration:none;
		font-weight:bold;
		text-transform:uppercase;
		
		}	
		
	.nav-area a:hover {
		
		background:#d0dbe0;
		color:#000;
		}	
		

	.nav-area ul {
		list-style:none;
		display:flex;
		
		}
		
	.nav-area ul li {	
		position:relative;
		width:100%;
		text-align:center;
		
		}	
			
		
	.nav-area li:hover .dropdown > li {	
		top:0;
		display:block;
		
		}	
		
	
	.dropdown ul li > ul {
		display:none;
		poistion:relative;
		
		}	
		
		
	.dropdown {
		
		position:absolute;
		display:flex;
		flex-direction:column;
		width:100%;	
		
		}	

Gendert von Iago2 (23.02.2020 um 16:32 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.02.2020, 16:36
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beitrge: 128
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Wie wrs mit der Holzhammer Methode:
Das wre von allen Mglichkeiten die, die ich als letztes nutzen wrde. Gerade damit holst du dir Probleme ins Haus, da du dann jedes HTML Element extra behandeln und anpassen musst.
Die Defaultformte sind im groen und ganzen schon brauchbar und wenn was nicht passt... so wie jetzt bei deiner ul im Dropdownmen ... dann wird das gefixt.
Mit deiner Holzhammermethode sieht die Seite aus wie 'hingesch...' probier es doch einfach mal aus. Und in Sachen Resposivenes hast du gerade dann Probleme... meine Meinung!

Was verstehst du unter 'aus EINEM GUSS'? Hast du da noch was zu verbessern, dann stelle eine verstndliche Frage... dann wir dir hier sicher geholfen.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beitrge zu antworten.
Es ist Ihnen nicht erlaubt, Anhnge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beitrge 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
CSS Buchtipp Eric A. Meyer vistahr Ressourcen 2 01.11.2006 18:53
CSS Tips & Tricks Webnauts Ressourcen 0 25.08.2006 23:04
CSS Menue Browserkompatibel! ICH DREH DURCH! haSta CSS 24 02.03.2006 18:42
Eric Meyer's CSS Petty Ressourcen 0 21.11.2005 08:18
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 11:39


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