ページサイドのスライドメニューの効果をjsで実現する方法（コード付き）

この記事の内容は、jsでページサイドのスライドメニューの効果を実現する方法についてです（コード付き）。必要な友人が参考になれば幸いです。

モバイル サイトを作成する場合、横にスライドするメニューがよくあります。ここで紹介します:

まず、ページの表示部分でもある最も外側の p コンテナを定義します。スタイル オーバーフロー: hidden;

を設定してから定義します。コンテナ内の p はサイド スライド メニューで、スタイルは次のとおりです。

コンテナ内に p main を記述する必要があります。ページ

以下は js の実装です

一般的な考え方は次のとおりです: メニューボタンをクリックしてメニューを表示すると、main はメニューの幅だけ横に移動し、メニューが消えるとメニューの左側は 0 になります。 、元の状態に復元されます

コードは次のとおりです:

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

関連推奨事項:

CSS3 携帯電話のサイド スライド メニュー 4 種類のスライド メニュー特殊効果_html/css_WEB-ITnose

jQuery+ CSS は横スライド ナビゲーション メニューを実装します code_jquery

JS は左縦スライド メニュー効果 code_jquery を実装します_ JavaScript スキル

以上がページサイドのスライドメニューの効果をjsで実現する方法（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。