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

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

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