Für den Smartphonescreen die Navigationsleiste mit einem Button öffnen

Schon festgestellt? Dem Forum sind gerade alle Interaktionsmöglichkeiten genommen. :(

Mehr dazu unter: Abstimmung über das Forum

  • Hallo Zusammen,


    ich komme bei folgendem Schritt leider nicht mehr weiter: Ich möchte bei einer responsive Webseite meine Navigationsleisten-punkte für einen Smartphonescreen mit einem Button öffnen. Dazu habe ich eine extra Menüleiste eingebaut, mit einem Bild als Button. Diese Leiste wird bei einem Desktop Bildschirm nicht, dafür aber bei einem Smartphone angezeigt. Jetzt sollen nun meine Ursprünglichen Punkte der Navigationsbar mit dem Button auf und zu gemacht werden können. Leider funktioniert es bei mir nicht so wie gewünscht. Ich freue mich, wenn sich das jemand mal anschauen kann.


    liebe Grüße



    Code
    1. Java-Script:
    2. <script>
    3. $(document).ready(function() {
    4. $('.menubutton').click(function(){
    5. $('.navbar-expand').slideToggle('slow');
    6. });
    7. });
    8. </script>
  • Hi, danke schon mal für die Antwort.

    Also muss ich in dem Fall nur mit Breakpoints arbeiten? Mir erschließt sich gerade nicht ganz wie ich den Toggle bekomme.


    viele Grüße

  • Bin nicht so der Experte für Bootstrap aber wenn ich das richtig erkenne, macht auch hier Bootstrap das alles automatisch, wenn man die richtigen Klassen verwendet, inkl. Umschaltung zwischen Desktop- und Mobile-Ansicht. Ich habe das vorhin mit einem Beispiel aus der Doku getestet und es hat funktioniert ohne dass ich eine Zeile Javascript zu schreiben brauchte.

  • Bin nicht so der Experte für Bootstrap aber wenn ich das richtig erkenne, macht auch hier Bootstrap das alles automatisch, wenn man die richtigen Klassen verwendet, inkl. Umschaltung zwischen Desktop- und Mobile-Ansicht. Ich habe das vorhin mit einem Beispiel aus der Doku getestet und es hat funktioniert ohne dass ich eine Zeile Javascript zu schreiben brauchte.

    Hi, danke fürs anschauen.


    Wie genau hast du das gelöst? Wenn ich die Klasse auf -sm setze, wird mir nur noch der "Gut zu wissen" Button beim Smartphone angezeigt.

  • BTW: In deinem Thread über das Modal erkenne ich, dass Du die Version 3 von BS verwendest. Vielleicht besser auf die aktuelle 4 übergehen?

    woran machst du das fest? Hätte eigentlich gedacht, dass ich Version 4 verwende?! 8|

  • Zitat


    Wie genau hast du das gelöst?


    Ich hatte nur das HTML gleich vom ersten Beispiel aus der Doku verwendet und es funktionierte auf Anhieb:

    https://getbootstrap.com/docs/4.0/components/navbar/


  • Ich hatte nur das HTML gleich vom ersten Beispiel aus der Doku verwendet und es funktionierte auf Anhieb:

    https://getbootstrap.com/docs/4.0/components/navbar/


    Super, Thanks again!