zurück zur Startseite
  


Zurück 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, 12:43
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
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, 21:59
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Teste doch mal, ob diese Abänderung 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, 11:22
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Danke Sailor56,

Das Menü sollte eine horizontale Leiste oben sein mit Dropdown Menü, aber für ein Seitenmenü funktioniert es.
Mit Zitat antworten
  #4 (permalink)  
Alt 22.02.2020, 14:43
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
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 möchtest, 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, 18:00
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
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, 19:44
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
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 Untermenüpunkten absichtlich hinzugefügt 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, 12:45
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
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 Möglichkeit die Hover-Box nun zu positionieren.
Idealerweise sollte die Box bündig zu den Hauptmenüpunkten sein.
Mit Zitat antworten
  #8 (permalink)  
Alt 23.02.2020, 13:16
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Dann teste mal folgendes, um die Defaulteinstellung (Standardwert) für 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, 17:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Wie wärs 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 schön 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%;	
		
		}	

Geändert von Iago2 (23.02.2020 um 17:32 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.02.2020, 17:36
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Wie wärs mit der Holzhammer Methode:
Das wäre von allen Möglichkeiten die, die ich als letztes nutzen würde. Gerade damit holst du dir Probleme ins Haus, da du dann jedes HTML Element extra behandeln und anpassen musst.
Die Defaultformte sind im großen 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 verständliche 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 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
CSS Buchtipp Eric A. Meyer vistahr Ressourcen 2 01.11.2006 19:53
CSS Tips & Tricks Webnauts Ressourcen 0 26.08.2006 00:04
CSS Menue Browserkompatibel! ICH DREH DURCH! haSta CSS 24 02.03.2006 19:42
Eric Meyer's CSS Petty Ressourcen 0 21.11.2005 09:18
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 12:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:42 Uhr.