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:'fast'}); $(".leftNav").animate({ left : 0},{duration:'fast'}); }else{ $(".main").animate({marginLeft:0},{duration:'fast'}); $(".leftNav").animate({left:-403},{duration:'fast'}); } })
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!