|
|||
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> |
Sponsored Links |
|
|||
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%; } |
Sponsored Links |
|
|||
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; } |
|
|||
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. |
|
|||
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; } Mach erst mal das jetzt fertig und wenn es dann weiterhin bei Smartphone Darstellung Probleme gibt, dann ist das eine andere Baustelle. |
|
|||
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. |
|
|||
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; } |
|
|||
Wie wärs mit der Holzhammer Methode:
HTML-Code:
* { margin:0; padding:0; } 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) |
Sponsored Links |
|
|||
Zitat:
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. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |