Comment obtenir l'effet du menu coulissant côté page en js (avec code)

Le contenu de cet article explique comment obtenir l'effet du menu coulissant côté page en js (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Lors de la rédaction d'un site Web mobile, il y a souvent des menus coulissants latéraux. Voici une introduction :

Définissez d'abord un conteneur p le plus externe, qui est également la partie d'affichage de la page. débordement de style : caché ;

Ensuite, définissez un p dans le conteneur comme menu coulissant latéral, le style est : position : absolue;top : 0px;gauche :-largeur du menu ;

Vous avez également besoin pour écrire un p dans le conteneur main, ce p stocke la page principale

Ce qui suit est l'implémentation js

L'idée générale est la suivante : lorsque l'on clique sur le bouton de menu pour afficher le menu, main s'écarte de la largeur du menu, et le menu de gauche est 0 ; Lorsque le menu disparaît, restaurez-le dans son état d'origine

Le code est le suivant :

$(".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;});
       
    }
})

Connexe recommandations :

Menu coulissant latéral mobile CSS3 4 effets de menu coulissant _html/css_WEB-ITnose

jQuery+CSS implémente un menu de navigation coulissant code_jquery

Implémentation JS L'effet de menu coulissant vertical gauche Compétences code_javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!