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

スタックメニューを実装するための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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jQueryベースのセカンダリリンクメニュー実装コード
  • jQuery を使用してドロップダウン メニュー効果を実装するコード
  • jQueryで実装された超シンプルなドロップダウンメニュー
  • 検索ボックス付きのJQueryドロップダウンメニュー
  • jQueryは、マウスを移動したときにセカンダリドロップダウンメニューを表示する効果を実装します。
  • ドロップダウンメニューをクリックするjQueryの小さな例
  • jQueryはクリック可能、格納可能、展開可能なメニュー効果コードを実装します
  • jQueryで書かれたメニューは左から右にスライドします
  • JQuery に基づく折りたたみメニューコードのシンプルな実装
  • 左右にスライドするメニュー効果を実現するjQueryコード

<<:  Ubuntu で中国語入力方法が使えない場合の解決策

>>:  CentOS6.9 での MySQL 5.7.17 のインストールと設定のチュートリアル

推薦する

React+Amapは緯度と経度をリアルタイムで取得し、住所を特定します

目次1. マップを初期化する2. マップポイント3. 位置決めを有効にする4. マップの変更を監視す...

レスポンシブ原則をシミュレートするための基礎コードの Vue 実装の例

目次1.Vue.js の機能: 2.Observer.js 関数 (データハイジャック): 3. C...

HTMLページ内の検索機能を完了する

最近、たくさんの人に改変してもらったフレームワークに取り組んでいます。毎日コードを見ていると目が回り...

mysqlとnavicat間の接続を確立する際の1251エラーを解決する

コンピュータを再インストールし、最新バージョンのMySQLデータベースをインストールしました。その結...

Vueデータ変更検出の基本的な実装の簡単な分析

目次1. オブジェクトの変更検出2. オブジェクトに関する質問配列変更検出3.1 背景3.2 実装I...

いくつかの重要なMySQL変数

MySQL 変数は数多くありますが、その中には注目に値するものもあります。ここでは、参考までに、注目...

DPlayer.js ビデオ再生プラグインの使い方

DPlayer.jsビデオプレーヤープラグインは使いやすい主な用途: ビデオの再生、監視の開始、終了...

Dockerfile に基づいて Tomcat イメージを構築する方法

Dockerfile は Docker イメージを構築するために使用されるファイルです。コマンドパラ...

Linux で so または実行可能プログラムの依存ライブラリを表示します

Linux で実行可能プログラムまたは so の依存ライブラリを表示します。 Linux の実行可能...

MySQL 5.7 における基本的な JSON 操作ガイド

序文プロジェクトのニーズにより、ストレージ フィールドは JSON 形式で保存されます。プロジェクト...

Nginxのアクセスボリューム制御の詳細な説明

目的リクエスト アクセス ボリュームを制御するための Nginx ngx_http_limit_co...

Vue ルーティング this.route.push ジャンプ ページが更新されない場合の解決策

Vue ルーティング this.route.push ジャンプ ページが更新されない1. 背景概要:...

mysql8でルートユーザーのパスワードをリセットする手順を完了します

序文最近、多くの新しい同僚がこの質問をしてきました。特に、homebrew を通じて自動的にインスト...

初心者向けMySQLインデックス

序文MySQL インデックスで最も重要なデータ構造は B+ ツリーなので、まずは B+ ツリーの原理...

Vue+Element+Springboot画像アップロードの実装例

最近、たまたま vue+springboot のフロントエンドとバックエンドの分離プロジェクトに触れ...