スタックメニューを実装するための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 のインストールと設定のチュートリアル

推薦する

Docker を使用した ElasticSearch:7.8.0 クラスターのインストールに関する詳細なチュートリアル

ElasticSearch クラスターは、クラスターを構築するための動態請求的方式と靜態配置文件をサ...

Linux のロード vmlinux デバッグ

gdb を使用してカーネル シンボルをロードする arm-eabi-gdb 出力/ターゲット/製品/...

CentOS のファイルと権限の基本操作チュートリアル

序文始める前に、ファイル属性とファイル属性を変更する方法について簡単に理解しておく必要があります。 ...

MySQL 8.0 の新機能 - 管理ポートの使用の概要

目次序文接続管理追加の接続管理ポート要約する序文皆さんの多くは、次のようなエラー メッセージに遭遇し...

Web ページの HTML コードの説明: 順序付きリストと順序なしリスト

このセクションでは、HTML のリスト要素について学習します。リストは、Web サイトのデザインにお...

MySQL データベースの基礎 SQL ウィンドウ関数の例の分析チュートリアル

目次導入導入集計関数 + over()ソート関数 + over() ntile() 関数 + ove...

Vueは単一ファイルコンポーネントの完全なプロセス記録を実装します

目次序文単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...

nginxリバースプロキシによるセッション障害の問題の解決策

同僚から助けを求められました。バックエンド システムへのログインは成功したものの、システムには正常に...

W3C チュートリアル (7): W3C XSL アクティビティ

スタイル シートは、ドキュメントの表示方法、発音方法、または入力方法を記述します。XSL 言語は、X...

NginxとLuaによるグレースケールリリースの実装

memcachedをインストールする yum インストール -y memcached #memcac...

Linux gzipコマンドの使用

1. コマンドの紹介gzip (GNU zip) コマンドは、ファイルの圧縮と解凍に使用されます。こ...

Mongodb の GUID 表示の問題の詳細な分析

問題を見つける最近、プログラムのストレージを Mongodb に移行したところ、Guid 型が書き込...

MySQLデータの重複チェックと重複排除の実装ステートメント

テーブル user があり、フィールドは id、nick_name、password、email、p...

Vueでjsonpを使用する方法

目次1. はじめに2. インストール3. 使用4. vueファイルの使用1. はじめに最近、手書き入...

mysql5.6.8 ソースコードのインストールプロセス

カーネル: [root@opop ~]# cat /etc/centos-release CentO...