Responsive Side Menu mit CSS und Javascript

son gohan

Erfahrenes Mitglied
Hallo,

ich moechte gerne ein Sidemenu bauen so wie bei disney.com

Das besondere an diesem Sidemenu ist, wenn man im Browser die Seite runter scroll, dann scroll nur das menu sich runter nicht der hintergrund.

Ich habe versucht was aehnliches zu bauen mit CSS position:fixed fuer das sidemenu, aber bekomme das nicht hin, ich habe das beispiel von w3school benutzt: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav

Mit dem Beispiel funktioniert das einblenden und ausblenden vom sidemenu schon, aber ich weis nicht wie ich das bauen muss, damit sich das sidemenu so ueber den Hintergrund legt und mit dem Scrollbalken vom Browser gescrollt werden kann.

Ich habe auch zwei Bild mit gesendet damit man besser sieht was ich meine.

Wuerde mich ueber Tipps freuen, falls jemand weis wie man das machen kann.
 

Anhänge

  • mein beispiel.png
    mein beispiel.png
    32,4 KB · Aufrufe: 5
  • disney beispiel.png
    disney beispiel.png
    237 KB · Aufrufe: 6
Das besondere an diesem Sidemenu ist, wenn man im Browser die Seite runter scroll, dann scroll nur das menu sich runter nicht der hintergrund.
Dies gilt aber nur bei mobilen Geräten u. kleinen Viewports. Ansonsten wird beides (Menü u. Seiteninhalt) parallel gescrollt.

Das "Disney"-Menü befindet sich in einem <div> mit der Klasse .goc-overlay, das über die Seite gelegt wird. Der übrige Seiteninhalt ist in <div class="goc-body"> eingebettet, das bei kleinen Viewports per "CSS Media Queries" (siehe https://wiki.selfhtml.org/wiki/CSS/Media_Queries) overflow:hidden erhält, womit dann lediglich das Menü scrollbar ist.

[edit]Tipp-Ex[/edit]
 
Zuletzt bearbeitet:
Ich habe noch eine Frage, ich habe ein Bild zu meiner Frage mit gesendet.
Es gibt ja diese Dropdownmenues welche sich nur oeffnen wenn man auf ein symbol klickt, ich frage mich jetzt ob man das mit CSS machen soll/kann oder ob man da nur Javascript benutzt.

Wenn man das mit CSS machen will dann muss das Dropwdown Menue, glaube ich, innerhalb des HTML Tags vom Symbols liegen, auf das man klickt, also beides muss miteinander verschachtelt sein. Ich weis es nicht genau, aber es sieht so aus, weil bei mein ersten Versuch eben hat es nicht geklappt das Dropdown Menue mit CSS zu oeffnen bei anklicken des Symbols und ich denke es liegt daran weil das Symbol wo drauf man klickt nicht mit dem Dropdown Menue verschachtelt ist. Bei einer anderen CSS Schreibweise wenn ich ein HTML Tag anspreche indem das Dropdown Menue drine liegt klappt es.

Also denke ich das man vielleicht dort nur mit Javascript das machen kann, dieses Symbol mit dem Dropwdown Menue verbinden, damit sich das Dropdown Menue oeffnet bei anklicken des Symbols oder?

In meinem Bild das ich mit gesendet habe ist das Symbol ein + Zeichen.
 

Anhänge

  • dropdownmenue.png
    dropdownmenue.png
    6,4 KB · Aufrufe: 3
Danke fuer dein Tipp.

Was ich meine ist aber etwas anderes. Weil dieses Symbol, also das + Zeichen wo man drauf klickt muss rechts am Rand vom Linkelement stehen.

Das ganze ist so aufgebaut, wenn der Link geklickt wird oefnet sich eine Seite mit dem das ganze verlinkt ist, wenn man aber ganz rechts auf dem + Zeichen klickt nur dann oeffnet sich das Dropdown Menue.

Man muss also ein HTML Tag klicken, in dem HTML Tag ist das + Zeichen und klickt man dadrauf soll sich ein Dropdown Menue oeffnen, welches aber nicht innerhalb des HTML Tags mit dem + Zeichen eingebaut ist.

Da sehe ich das Problem, wenn man das anders aufbaut beispielweise so:

Code:
<div class="Link">

   <div class="dropdownmenue">
      <a href="#"></a>
      <a href="#"></a>
      <a href="#"></a>
   </div>

</div>

Dann ist es einfach dann schreibt man einfach in CSS:
Code:
.Link:hover dropdownmenue {display:block}

aber wenn das so aufgebaut ist:

Code:
<div class="Link">
   <div class="pluszeichen">+Ziechen</div>
   <div class="dropdownmenue">
      <a href="#"></a>
      <a href="#"></a>
      <a href="#"></a>
   </div>

</div>

Dann klappt folgendes CSS nicht:

Code:
.pluszeichen:hover dropdownmenue {display:block}

Das haette ich wohl am besten mal direkt so ausfuehlich erklaeren sollen sonst weis man ja auch nciht genau was ich meine.
 
Was ich meine ist aber etwas anderes. Weil dieses Symbol, also das + Zeichen wo man drauf klickt muss rechts am Rand vom Linkelement stehen.
Funktionell macht es zunächst mal keinen Unterschied, ob sich das "+"-Icon links oder rechts vom Link befindet ;)

Daher hatte ich dieses kleine Detail bei der Auswahl der beiden Beispiele auch nicht berücksichtigt :)
Man muss also ein HTML Tag klicken, in dem HTML Tag ist das + Zeichen und klickt man dadrauf soll sich ein Dropdown Menue oeffnen, welches aber nicht innerhalb des HTML Tags mit dem + Zeichen eingebaut ist.
Nun verstehe ich Deine Frage auch im richtigen Kontext :cool:

Bei Deiner gezeigten HTML-Struktur ist der sogenannte "CSS Checkbox Hack" behilflich, ein allgemeines Geschwisterelement "dauerhaft" einzublenden, wenn hierfür nicht JavaScript / jQuery herangezogen werden soll.

"Allgemeine Geschwisterelemente" -in Deinem Fall das "+"-Icon und Submenü- befinden sich im HTML-Code auf derselben Strukturebene, müssen aber, im Gegensatz zu den "Nachbarelementen" oder "Angrenzenden Geschwisterelementen", nicht direkt/unmittelbar im Quelltext aufeinanderfolgen.
Weil aller guten Dinge drei sind, nenne ich mal diese Fallbeispiele aus meinem Bookmark-Archiv:
  1. http://www.mm-newmedia.de/2016/02/freaky-friday-css3-checkbox-hack/
  2. http://tutorialzine.com/2015/08/quick-tip-css-only-dropdowns-with-the-checkbox-hack/
  3. https://andywalpole.me/blog/141129/css-only-animated-mobile-menu
Für eine weitere / grundlegende Recherche siehe zum Beispiel:

[edit]Tipp-Ex[/edit]
 
Zuletzt bearbeitet:
Zurück