2017-06-30 1 views
1

Gibt es eine relativ einfache Methode, um das Bootstrap (v3) -Mobilmenü auf dem Bildschirm in voller Höhe erscheinen zu lassen (100%)?Bootstrap mobiles Menü Vollbild machen

Es scheint, als würde das Menü nur so viel überlagern wie der Menüinhalt, der darin enthalten ist (Standardverhalten in bootstrap.js). Ich möchte nur verhindern, dass Benutzer die zugrunde liegende Seite scrollen/sehen, wenn sie das Menü "Mobil" anzeigen.

+0

ist es ein Dropdown-Menü oder der Seitenleiste. Teilen Sie Code, was Sie versucht haben? – Manish

+0

Es ist das Hamburger Navbar-Menü. Ich nehme an, das ist ein Dropdown-Menü? Ich habe noch keinen Code angewendet, da ich denke, dass ich Standard-BS-Verhalten neu schreiben müsste, was ich zögere zu tun. Ich frage mich nur, ob es da draußen eine Workaround gibt. –

+0

ok, was Sie wollen, ist, dass das Menü die volle Breite sowie die Höhe des Gerätes beim Öffnen einnehmen sollte. Wäre gut, wenn Sie nur eine Demo Ihres vorhandenen Menüs erstellen können. – Manish

Antwort

1

Sie könnten dies stattdessen versuchen. Ich denke, es sieht besser aus als ein Menü, das die gesamte Seite einnimmt und das gewünschte Ergebnis erzielt.

https://jsfiddle.net/rjx3460f/4/

var mywindow = $('#window'); 
$('#navbar').on('show.bs.collapse', function(x) { 
     mywindow.css({visibility: 'hidden'});; 
     $('body').attr("scroll","no").attr("style", "overflow: hidden"); 
}); 
$('#navbar').on('hide.bs.collapse', function(x) { 
     mywindow.css({visibility: 'visible'}); 
     $('body').attr("scroll","yes").attr("style", ""); 
}); 

Die allgemeine Idee ist, dass Sie blättern auf der Seite zu deaktivieren, und den Inhalt auszublenden, wenn das Menü geöffnet ist. Sie können Scroll jedoch genauso einfach deaktivieren. Oder stellen Sie die Höhe des Menüs auf 100% ein, wenn sich die Dinge öffnen.

Hier ist das Menü, das die ganze Sache aufgreift. Sehr ähnliches Setup, aber hat einen Sprung Übergang ... Ich denke, Sie müssen möglicherweise Ihre eigenen offenen Übergang zu schaffen, um es nicht nervös zu machen, was nicht unmöglich ist, aber dann nicht mehr wirklich Bootstrap.

https://jsfiddle.net/rjx3460f/7/

+0

Das ist eine ziemlich kreative Lösung. Ja, ich werde es versuchen. –

+0

Dies funktionierte gut für mich mit ein paar kleinen Anpassungen und Modifikationen. Nämlich das gemeldete BTS v3.xx Problem hier - https://github.com/twbs/bootstrap/issues/12738 –

Verwandte Themen