Breakpoint für mobile menu mit jQuery ?

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

  • Kannst du uns mal Code zeigen was du hast ?

    Die Breite des Fensters kann man ja ganz einfach auslesen.

    https://codepen.io/basti1012/pen/eYdJKBL

    Erst auslesen und dann den restlichen Code starten.


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

    Denk dran das nach den laden des Javascriptes einige Elemente breiter sein können als wie ohne das JS , jenachdem was das JS so macht usw.

    Deshalb wäre ein Code und Beispiel gut was du da vorhast ?

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


    <script>

    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:


    <script>

    jQuery(function($){

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

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

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

    });

    });

    </script>

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

    Code
    1. .burger{
    2. display:none;
    3. }
    4. @media only screen and (max-width: 768px) {
    5. .burger{
    6. display:block;
    7. }
    8. }

    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.

    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

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

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


    <script>

    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>

  • 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://codepen.io/basti1012/pen/YzGqQdY

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