So erzielen Sie den Effekt eines seitenseitigen Schiebemenüs in js (mit Code)

Der Inhalt dieses Artikels befasst sich damit, wie man den Effekt eines seitlichen Schiebemenüs in js erzielt (mit Code). Ich hoffe, dass er für Sie hilfreich ist.

Beim Schreiben einer mobilen Website gibt es häufig seitlich verschiebbare Menüs:

Definieren Sie zunächst einen äußersten p-Container, der auch der Anzeigeteil der Seite ist Stilüberlauf: versteckt ;

Dann definieren Sie ein p im Container als seitliches Schiebemenü. Der Stil lautet: Position: absolut;oben: 0px;links:-Menübreite;

Sie benötigen auch Um ein p in den Container main zu schreiben, speichert dieses p die Hauptseite

Das Folgende ist die js-Implementierung

Die allgemeine Idee ist wie folgt: Wenn Sie auf die Menüschaltfläche klicken, um das Menü anzuzeigen, main bewegt sich seitwärts um die Breite des Menüs und das linke Menü ist 0 ;Wenn das Menü verschwindet, stellen Sie es in seinen ursprünglichen Zustand zurück

Der Code lautet wie folgt:

$(".navBtn").click(function(){
    var left = $(".leftNav").css("left");
    left = parseInt(left);
    if(left<0){
        $(".main").animate({ marginLeft : 403},{duration:&#39;fast&#39;});
        $(".leftNav").animate({ left : 0},{duration:&#39;fast&#39;});
      
    }else{
        $(".main").animate({marginLeft:0},{duration:&#39;fast&#39;});
        $(".leftNav").animate({left:-403},{duration:&#39;fast&#39;});
       
    }
})

Verwandte Empfehlungen:

CSS3 mobiles seitliches Schiebemenü 4 Arten von Schiebemenüeffekten_html /css_WEB-ITnose

jQuery+CSS implementiert einen seitlich verschiebbaren Navigationsmenücode_jquery

JS-Implementierung des vertikalen Schiebemenüeffekts auf der linken Seite, Code_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonSo erzielen Sie den Effekt eines seitenseitigen Schiebemenüs in js (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!