Breakpoint für mobile menu mit jQuery ?

fledi

Guten Tag,

auf meiner Seite wird das Menü mit einer jQuery(function($) aufgerufen.

Ich möchte vorher abfragen, ob: @media only screen and ( max-width: 768px )

> dann soll eine andere funktion aufgerufen werden.

Wie kann ich das schreiben ?

basti1012

Kannst du uns mal Code zeigen, was du hast?

Die Breite des Fensters kann man ja ganz einfach auslesen.

https://basti1012.bplaced.net/index.php?ordner=forum-hilfe&id=70

[Blockierte Grafik: https://basti1012.bplaced.net/siteimage/forum-hilfe-70.png]

Erst auslesen und dann den restlichen Code starten.

Willst du auf die Fensterbreite reagieren oder auf der Breite eines Elements?

Denk dran, dass nach dem Laden des Javascript es einige Elemente breiter sein können als wie ohne das JS , je nachdem was das JS so macht usw.

Deshalb wäre ein Code und Beispiel gut, was du davor hast?

fledi

Ich möchte auf die Fensterbreite reagieren. Wenn sie schmaler ist als 768px, dann soll das Menü als Burger-Icon starten. Sonst offen.

Das Menü offen:

jQuery(function($){

$('#slide-in-open').addClass('open');

$('.slide-in-menu-container').addClass('slide-in-menu');

$('#slide-in-open').click(function(){

$(this).toggleClass('open');

$('.slide-in-menu-container').toggleClass('slide-in-menu');

});

</script>

Das Menü zu:

jQuery(function($){

$('#slide-in-open').click(function(){

$(this).toggleClass('open');

$('.slide-in-menu-container').toggleClass('slide-in-menu');

});

</script>

basti1012

warum machst du das nicht mit css uns @media queries ?

Code

.burger{
     display:none;
}

@media only screen and (max-width:  768px) {
  .burger{
    display:block;
   }
}

so ungefähr , das könnte ich dir genanauer zeigen wenn ich das ganze Menü sehen .

Man kann es auch mit javascript machen .

Untgetesteter Code.

JavaScript

$(window).ready(function() {
  var sio=$('#slide-in-open');
  var simc=$('.slide-in-menu-container');
  if($(window).width()<=768){
      sio.addClass('open');
      simc.addClass('slide-in-menu');
  }else{}
      sio.click(function(){
          sio.toggleClass('open');
          simc.toggleClass('slide-in-menu');
      });
});

Alles anzeigen

Genauer könnte ich helfen wenn ich alles sehe. Wennn das nicht hilft kannst du ja bei codepen ein beispiel fertig machen oder so.

Ich glaube das es auch ohne JS funktionieren würde

fledi

Vielen Dank für Deine Antwort.

Das ist das Menü, ich habe es in einem Tutorial gebaut.

Es ist also kein richtiges .burger Menü. Es sieht nur so aus, die drei Striche sind animiert und werden zum Kreuz, wenn es offen ist.

Auf kleineren Seiten soll es geladen werden, daß die drei Striche parallel sind. In dem Container ist dann die eigentliche Navigation.

<style>

#slide-in-open{

cursor: pointer;

}

.line{

display: block;

position: absolute;

height: 3px;

width: 100%;

background: #ad9262;

border-radius: 9px;

opacity: 1;

-webkit-transition: .1s ease-in-out;

-moz-transition: .1s ease-in-out;

-o-transition: .1s ease-in-out;

transition: .1s ease-in-out;

}

.line-2 {

top: 10px;

}

.line-3 {

top: 20px;

}

#slide-in-open.open .line-1 {

top: 10px;

-webkit-transform: rotate(135deg);

-moz-transform: rotate(135deg);

-o-transform: rotate(135deg);

transform: rotate(135deg);

}

#slide-in-open.open .line-2 {

display: none;

}

#slide-in-open.open .line-3 {

top: 10px;

-webkit-transform: rotate(-135deg);

-moz-transform: rotate(-135deg);

-o-transform: rotate(-135deg);

transform: rotate(-135deg);

}

.slide-in-menu {

left: 0 !important;

opacity: 1 !important;

}

.slide-in-menu-container {

-webkit-transition: all 0.5s ease !important;

-moz-transition: all 0.5s ease !important;

-o-transition: all 0.5s ease !important;

-ms-transition: all 0.5s ease !important;

transition: all 0.5s ease !important;

}

</style>

fledi

Habe mich bei codepen angemeldet.
https://codepen.io/Fledi/pen/dypGENb

kannst du damit was anfangen ?

Ohne JS wäre toll, ich muss nur jeweils die passende Funktion ansprechen. Aber wie ?

fledi

Guten Tag,

hier der Code und eine Skizze, wie es sein soll.

<style>

#slide-in-open{

cursor: pointer;

}

.line{

display: block;

position: absolute;

height: 3px;

width: 100%;

background: #ad9262;

border-radius: 9px;

opacity: 1;

-webkit-transition: .1s ease-in-out;

-moz-transition: .1s ease-in-out;

-o-transition: .1s ease-in-out;

transition: .1s ease-in-out;

}

.line-2 {

top: 10px;

}

.line-3 {

top: 20px;

}

#slide-in-open.open .line-1 {

top: 10px;

-webkit-transform: rotate(135deg);

-moz-transform: rotate(135deg);

-o-transform: rotate(135deg);

transform: rotate(135deg);

}

#slide-in-open.open .line-2 {

display: none;

}

#slide-in-open.open .line-3 {

top: 10px;

-webkit-transform: rotate(-135deg);

-moz-transform: rotate(-135deg);

-o-transform: rotate(-135deg);

transform: rotate(-135deg);

}

.slide-in-menu {

left: 0 !important;

opacity: 1 !important;

}

.slide-in-menu-container {

-webkit-transition: all 0.5s ease !important;

-moz-transition: all 0.5s ease !important;

-o-transition: all 0.5s ease !important;

-ms-transition: all 0.5s ease !important;

transition: all 0.5s ease !important;

}

</style>

jQuery(function($){

$('#slide-in-open').addClass('open');

$('.slide-in-menu-container').addClass('slide-in-menu');

$('#slide-in-open').click(function(){

$(this).toggleClass('open');

$('.slide-in-menu-container').toggleClass('slide-in-menu');

});

</script>

basti1012

kannst du das html noch bei codepen mit rein kopieren

fledi

thank you basti 1012 ,

It's all done now

basti1012

kannst du mir mal das html dazu geben , wenn ich mir das selber dazu fummel könnte es sein das es nicht mit deines übereinstimmt.

EDIT:

Mit Css alleine könnte es so aussehen

https://basti1012.bplaced.net/index.php?ordn…um-hilfe&id=490

Wenn der Burger beim großen Menü auch funktionieren soll dann müßte man den mit Javascript auf checked setzen.

In den fall wüßte ich jetzt nicht wie man das mit Css alleine hinbekommen sollte ( Mit mehr Containern schon ).

Benutzer online in diesem Thema