zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Webseite responsiv (MenÜ)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.06.2017, 17:57
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 33
crane befindet sich auf einem aufstrebenden Ast
Standard 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>
Was ich noch erreichen möchte ist das die Menüleiste im Desktopformat so aussieht wie auf dieser Webseite: Andrea Zinser | CranioSacrale Körper- und Energiearbeit

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.06.2017, 09:00
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
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

Zitat:
Zitat von crane Beitrag anzeigen
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.
Ich glaube dir nicht, dass du keine Lösung dafür gefunden hast, schließlich ist das die Standard-Anforderung an ein responsive Menü. Im Desktop-Bereich horizontal, ansonsten untereinandern.
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.

Zitat:
Zitat von crane Beitrag anzeigen
Und ich denke das auch das momentan auf der Seite unter der Webadresse verwendete Flexbox Design nicht funktioniert.
Warum denkst du das? Natürlich kannst du Flexbox verwenden.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.06.2017, 20:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 33
crane befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 10.06.2017, 21:40
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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>
das folgende CSS

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;
   }
Ich habe dazu mal eine Beispielseite erstellt:

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)
Mit Zitat antworten
  #5 (permalink)  
Alt 10.06.2017, 23:04
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.01.2017
Beiträge: 33
crane befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 11.06.2017, 00:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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;
   }
}
Ich habe das Beispiel entsprechend angepasst.

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

Stichwörter
flexibles layout, responsive menu

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:28 Uhr.