|
|||
Webseite responsiv (MenÜ)
Hallo mal wieder,
ich versuche aus meinem bisherigen Design ein Responisve Design zu machen damit die Webseite auch auf dem Smartphone nutzbar ist. Nun bin ich dabei die Menüleiste entsprechend zu erstellen. Leider komme ich bei zwei Punkten nicht weiter. Ich habe folgenden Code für eine Menüleiste die responsiv ist. Code:
<!DOCTYPE html> <html> <head> <style> body {margin:0;} .topnav { overflow: hidden; background-color: #ffd9f7; width:100%; align: middle; } .topnav a { float: left; color: #000000; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav .icon { display: none; } @media screen and (max-width: 600px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } </style> </head> <body> <div class="topnav" id="myTopnav"> <a href="https://xhtmlforum.de/../index.htm"><img src="https://xhtmlforum.de/../bilder/logo.svg"></img></a> <a href="info.htm">Über Mich</a> <a href="methode.htm">Methode</a> <a href="links.htm">Links</a> <a href="kontakt.htm">Kontakt</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </body> </html> Und in der Smartphone-Version so wie im obigen Code für kleine Bildschirme. Wie könnte ich das gestallten. Ich habe bis jetzt noch keine Lösung für mein Problem gefunden. Und ich denke das auch das momentan auf der Seite unter der Webadresse verwendete Flexbox Design nicht funktioniert. Vielleicht hat ja einer von euch einen Voschlag wie ich das umsetzten könnte. Vielen Dank schon mal |
Sponsored Links |
|
|||
Zitat:
Gibt man "responsive menu" in google ein findet man mehr als genug Beispiele. https://www.w3schools.com/howto/howt...responsive.asp Hier zB. Natürlich ist es kein Problem, das Menü rechtsbündig statt linksbündig auszurichten. Warum denkst du das? Natürlich kannst du Flexbox verwenden. |
Sponsored Links |
|
|||
Noch mals zu dem von mir oben reingestellten Code.
Damit kann ich ein resposives Menü erzeugen bei dem in der Desktopversion die Inhalte Horizontal nebeneinander dargestellt werden und bei kleinen Bildschirmen als Aufklappmenü unter einander. Was mir aber bis jetzt noch nicht gelungen ist, den Inhalt vertical zu centern und in der Desktopversion das Logo und den Text so wie auf oben im Link angegebenen Webseite darzustellten, d.h. das Logo links mit leichtem Abstand zum linken Rand die anderen Links auf dem restlichen Raum bezogen horizontal zu centern. Wenn jemand dazu eine Idee hat wäre mir sehr geholfen. Vielen Dank schon mal |
|
|||
Hallo
Für breite Fenster sehe ich bei folgendem HTML Code:
<nav class="navigation"> <a href=""> <img src="http://lorempixel.com/80/80/nature/6"> </a> <div> <a href="info.htm">Über Mich</a> <a href="methode.htm">Methode</a> <a href="links.htm">Links</a> <a href="kontakt.htm">Kontakt</a> </div> </nav> Code:
.navigation { display: flex; } .navigation img { padding: 0rem 0.5rem; } .navigation div { flex-grow: 1; display: flex; flex-wrap: wrap; justify-content: center; } .navigation div a { padding: 0.3rem 0.5rem; } Beispielseite Was bei schmalen Fenstern passieren soll habe ich noch nicht so recht verstanden. Gruss MrMurphy Geändert von MrMurphy (10.06.2017 um 21:46 Uhr) |
|
|||
Bei schmalem Fenster sollen die links nicht horizontal sondern vertikal, d.h. untereinander statt neben einander. Und das ganze in einem Aufklappmenu, d.h. bei schmalem Fenster erscheint auf der rechten Seite statt den Links ein Button und wenn auf ihn geklickt wird klappt das Menü mit den Links aus.
Und noch was. Wenn das Menü bei schmalem Fenster ausklappt soll der Div der den Inhalt der Seite trägt entsprechend nach unten wandern und beim zu Klappen wieder in Ausgangsposition kommen. Ich hoffe ihr versteht nun was ich möchte. Danke |
|
|||
Hallo
Dann würde ich folgendes CSS vorschlagen: Code:
@media all { .navigation a { display: block; padding: 0.5rem; } } @media only screen and (min-width: 300px) { .navigation { display: flex; } .navigation a { display: block; padding: 0rem; } .navigation img { margin: 0rem 2rem 0rem 0rem; } } @media only screen and (min-width: 600px) { .navigation img { padding: 0rem 0.5rem; margin: 0rem 0rem 0rem 0rem; } .navigation div { flex-grow: 1; display: flex; flex-wrap: wrap; justify-content: center; } .navigation div a { padding: 0.3rem 0.5rem; } } Da ich von versteckten Menüs überhaupt nichts halte habe ich das außen vor gelassen. Das sind nur überflüssige Barrieren. Du kannst dir aber eine dir zusagende Methode dafür aussuchen und das CSS damit erweitern. Du solltest aber darauf achten, dass das Aufklappmenü barrierefrei ist und auch auf Touchscreengeräten und mit der Tastatur bedienbar ist. Gruss MrMurphy |
Stichwörter |
flexibles layout, responsive menu |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Responsiv Menü | Loddarkwin | Javascript & Ajax | 2 | 15.07.2013 16:51 |
Aufbau Webseite mit DIV-Containern und CSS | Hubaer2006 | (X)HTML | 7 | 18.02.2011 16:30 |
CSS-Styles werden bei einem Linksprung von Webseite A auf Webseite B nicht geladen | Fools | (X)HTML | 3 | 13.09.2010 12:57 |
Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 09:55 |
Mein Menü klappt erst einige Sekunden beim Aufruf der Webseite wieder zu ! | macdesign | CSS | 15 | 10.10.2008 23:03 |