Close off-Leinwand nav wenn Menüpunkt

Question

http://darrenbachan.com/playground/diamond-hand-car-wash/index.html

ein paar Dinge geklickt Ich versuche, hier zu erreichen:

1. Wenn Sie überall mit Ausnahme der Artikel klicken Sie im Menü schließt er die nav
2. Wenn klicken Sie auf einem Menüpunkt den nav und beseelt zu einer ID

die off-Leinwand nav nur schließt erscheinen darin mobile Ansicht ist. Wenn Sie die Site auf Ihrem Desktop anzeigen, animiert das Nav Sie zu einer bestimmten ID, also habe ich ein paar js da, von denen ich vermute, dass sie für die Off-Canvas-Version verwendet werden könnten. Ich habe ein paar Artikel gelesen, in denen ich sage, dass ich Daten-Toggle verwenden soll, aber ich konnte das nicht zum Laufen bringen.

Answer 1

Also dachte ich mir, ich würde hier reinhören und ein paar Lösungen anbieten. Wenn Sie gerade versuchen, das gerade vorhandene Menü zu schließen, wenn jemand auf einen Link in Ihrem Menü klickt, können Sie entweder einfach eine Klickfunktion verwenden, um auf die Menüschaltfläche zu klicken:

$('.navbar-collapse li a').on('click', function(){ 
    $('input.checkbox-toggle').click(); 
}); 

Oder Sie könnten wahrscheinlich nur die aus dem Kontrollkästchen aktiviert entfernen etwa so:

$('.navbar-collapse li a').on('click', function(){ 
    $('input.checkbox-toggle').prop('checked', false); 
}); 

möglicherweise möchten Sie eine if-Anweisung hinzufügen, damit es Größen geschieht nur bei mobilen Bildschirm so etwas wie folgt aus:

$('.navbar-collapse li a').on('click', function(){ 
    if($(window).width() <= 767){ 
    $('input.checkbox-toggle').prop('checked', false); 
    } 
}); 

Oder andersherum mit der Klick-Funktion, die den obigen Klick ebenfalls umschaltet.

Und dann könnten Sie Ihr Scroll-Skript verwenden, das Sie bereits installiert haben und alles sollte so funktionieren, wie Sie es möchten.

Oder

Ich sehe, dass auf Ihrer Website bereits Bootstrap verwenden. Bootstrap hat ein eingebautes Plugin, das scrollspy genannt wird, das ein Seitendesign behandelt und es ermöglicht, zu Abschnitten und Dingen dieser Art zu blättern. Die Verwendung dieses Skripts anstelle des Skripts, das Sie bereits installiert haben, ist möglicherweise ein wenig minimaler und wird Ihnen besser dienen, da es auch das Ersetzen aktiver Klassen in Ihrer Navigationsleiste übernimmt. Es kann viel besser sein für das, was Sie mit Ihrer Website erreichen möchten.

Auch an der Unterseite habe ich einen Link zu einer jsfiddle Demo, die Scrollspy mit einem Off-Canvas-Menü, das ist im Wesentlichen die gleiche Sache, die Sie auf Ihrer Website oben, außer Sie nur ein Menü für beide große verwenden können und mobile Bildschirme anstelle von zwei Menüs auf Ihrer Website. Schau über diese Geigen-Demo, sie hat scrollspy an der richtigen Stelle und wie ich gesagt habe anstatt zwei Menüs zu verwenden, wird das Menü auf mobilen Bildschirmen einfach neugestaltet und jquery verwendet, um eine Klasse auf den Körper von .menu-open zu schalten, wenn die Menü-Taste gedrückt wird.

Ich war nicht ganz sicher, ob Sie die gleiche Art von Overlay-Stil des Menüs wollte, so dass ich es ähnlich der Website, die Sie oben verlinkt haben, aber wenn Sie wollen, dass es eine andere Art von Leinwand Stil dann Sie können nur die CSS ändern, um es von links oder rechts oder wo auch immer zu wechseln. Hier

ist ein Link auf die Geige JSFiddle Demo

Wie dem auch sei Hoffe, dass dies alles hilft und wenn Sie Fragen haben, zögern Sie nicht unten kommentieren.

P.S Ich habe festgestellt, wenn Sie auf Ihrer Seite Quelle, die Sie haben .container-Fluid Wrapping .containers auf Ihrer Seite. Dies ist überhaupt nicht notwendig und verursacht höchstwahrscheinlich die horizontale Bildlaufleiste am unteren Rand. Ich bin mir nicht sicher, aber ich habe mir gedacht, dass ich dir das zeigen würde.