スタックメニューを実装するためのjQueryプラグイン

jQueryプラグインの毎日の積み重ねメニュー、参考までに、具体的な内容は次のとおりです。

スタックメニュー

複数ページの特殊効果

効果は以下のとおりです

コードセクション

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <title>スタックメニュー</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <スタイル>
   * {
    マージン: 0px;
    パディング: 0px;
   }

   #ボックス {
    位置: 固定;
    上: 0px;
    下: 0px;
    左: 0px;
    右: 0px;
    背景色: ライトグレー;
   }

   。箱 {
    位置: 絶対;
    上: 0;
    左: 0;
    幅: 100%;
    高さ: 100%;
    パディング上部: 10px;
    左パディング: 70px;
    フォントの太さ: 太字;
    色: 白;
    遷移: すべて 0.5 秒の線形。
   }

   .box1 {
    背景色: #1abc9c;
    zインデックス: 1;
   }

   .box2 {
    背景色: #2ecc71;
    zインデックス: 2;
   }

   .box3 {
    背景色: #3498db;
    zインデックス: 3;
   }

   .box4 {
    背景色: #9b59b6;
    zインデックス: 4;
   }

   .box5 {
    背景色: #34495e;
    zインデックス: 5;
   }

   .box6 {
    背景色: #f1c40f;
    zインデックス: 6;
   }

   #ボタン{
    色: 黒;
    zインデックス: 9;
    位置: 固定;
    幅: 30ピクセル;
    高さ: 30px;
    /* 背景色:ライトグレー; */
    上: 5px;
    左: 10px;
    フォントサイズ: 30px;
    カーソル: ポインタ;
    遷移: すべて 0.3 秒線形。
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
   }

   #btn:ホバー{
    色: 白;
    フォントの太さ: 太字;
   }

   #btn.チェック{
    変換: 回転(135度);
    色: 白;
    フォントの太さ: 太字;
   }
   .box.check{
    zインデックス: 99;
   }
   .box スパン{
    カーソル: ポインタ;
   }
  </スタイル>
 </head>
 <本文>
  <div id="btn">×</div>
  <div id="ボックス">
   <div class="box box1" data-index="1"><span>ページ 1</span></div>
   <div class="box box2" data-index="2"><span>ページ 2</span></div>
   <div class="box box3" data-index="3"><span>ページ 3</span></div>
   <div class="box box4" data-index="4"><span>ページ 4</span></div>
   <div class="box box5" data-index="5"><span>ページ 5</span></div>
   <div class="box box6" data-index="6"><span>ページ 6</span></div>
  </div>
 </本文>
</html>
<スクリプト>
 $(ドキュメント).ready(関数() {
  $("#btn").click(関数() {
   $(this).toggleClass("チェック");
   if($(this).hasClass('check')){
    $(".box").removeClass('チェック');
    $(".box").arr().forEach(item=>{
     var index = parseInt(item.attr("データインデックス"));
     アイテム.css({
      'トップ':40*インデックス+'px',
      '左':40*インデックス+'ピクセル'
     })
    })
   }それ以外{
    $(".box").arr().forEach(item=>{
     var index = parseInt(item.attr("データインデックス"));
     アイテム.css({
      '上':'0px',
      '左':'0px'
     })
    })
   }
  })


  $(".box span").click(function(){
   $(".box").parent().removeClass('チェック');
   $(this).parent().addClass('チェック');
   $("#btn").click();
  })
  $.prototype.arr = 関数() {
   var that = this;
   var arr = [];
   (var i = 0; i < that.length; i++) の場合 {
    arr.push($(that[i]));
   }
   arr を返します。
  }
 })
</スクリプト>

アイデアの説明

レイアウトの効果はわかりやすい

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: