jQuery は拡張アニメーションによるナビゲーションバー効果を実装します

展開アニメーション効果のあるナビゲーションバーを設計してカスタマイズし、デモを作成してみました。設計とデバッグを完了するのにほぼ 1 日かかりました。
ここでは、デザイン→レイアウトの記述→スタイルの記述→JS コードの記述まで、完全に自分でデザインしたナビゲーションバーを完成させる方法について説明します。

HTML はレイアウトの記述に使用され、CSS はスタイルの記述に使用され、JS はアニメーション効果やイベント応答の記述などに使用されます。DOM 操作における JQuery の利便性を考慮すると、ここで JQuery を使用することを選択すると、半分の労力で 2 倍の結果を達成できます。

デザイン：

ダウンロードしたナビゲーションバープラグインの一部が単調すぎると感じた場合は、好みのナビゲーションバーをデザインしてください。まず、一枚の紙を用意して、どのようなナビゲーションを希望し、最終的にどのような効果を実現したいかを描きます。
例えば、ここにナビゲーションバーを記述する場合、各章の上にマウスを移動すると、その下にある各ノードが水平方向に引き伸ばされ、ノードがジャンプする動作で表示されます。

書き込みレイアウト:

考えを整理したら、HTML を書き始めます。これは比較的簡単なステップです。一般的には、<div> <span> <a> のタグで十分です。上下関係を明確に記述することが重要です。

いくつかのポイントを述べます:

<div>はブロックレベルの要素です。つまり、その内容は自動的に新しい行で始まります。
<span>タグはそれ自体では行を占有せず、通常はコンテンツを囲むために使用されます。ブロックレベル要素ではないため、幅と高さの属性を設定することは無効です。
<a>タグは、もちろんリンクを配置するために使用されます。

書き方:

このスタイルはゆっくりとデバッグする必要があり、忍耐が必要です。色の組み合わせについては、いくつかの古典的な配色を参照することができます。下の各ノードを水平方向に引き伸ばす必要があるため、複数列レイアウトに似た効果が必要になります。<span> タグと <div> タグは、オブジェクトをインラインオブジェクトとしてレンダリングするためにdisplay:inline-blockでスタイル設定されていますが、オブジェクトのコンテンツはブロックオブジェクトとしてレンダリングされます。簡単に言えば、1 行を強制的に占有せずに幅と高さを設定することです。優れた CSS3 レイアウト属性display:flexを使用して、複数列レイアウトを実現することもできます。

JS を記述します:

レイアウトが記述されたら、機能を実装する必要があります。前述したように、ナビゲーションバーを使用すると、各章の上にマウスを移動して、その下の各ノードを水平に広げることができます。当然、ホバーイベントが使用されます。jQuery のホバーイベントを見てみましょう。

$(セレクタ).hover(inFunction,outFunction)

括弧内の最初の関数は必須であり、マウスオーバーイベントが発生したときに実行される関数を指定します。
2 番目の関数はオプションであり、マウスアウトイベントが発生したときに実行される関数を指定します。

jQuery ではアニメーション効果も簡単に実装できます。animate ()メソッドは、CSS スタイルを通じて要素をある状態から別の状態に変更します。
CSS プロパティの値を段階的に変更することでアニメーション効果を作成できますが、ここでは詳しく説明しません。

ノードを順番に表示したいのですが、アニメーションキューイングは使用したくないので、コールバック関数を記述し、コールバック関数に setTimeout delay を記述し、addClass を使用して対応するノードにアニメーションスタイルを追加しました。

コード：

<!--CC により 2017/10/14 に作成-->
 
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>~myNav~</title>
    <script type="text/javascript" src="jquery.js"></script>
    <!--スタイル-->
    <スタイル タイプ="text/css">
 
        .三角形右 {
            幅: 0;
            高さ: 0;
            左境界線: 20px 実線 #FF7800;
            border-bottom: 20px 透明の実線;
            border-top:2px 点線 #333333;
            表示: インラインブロック;
            上マージン:10px;
            垂直方向の位置合わせ: 上;
        }
        .mynav
        {
            フォント ファミリ: punctuation、"PingFangSC-Regular"、"Microsoft Yahei"、"sans-serif";
            -webkit-font-smoothing: サブピクセルアンチエイリアス;
            マージン:10px 2%;
            幅:90%;
            高さ:450px;
            ディスプレイ:フレックス;
        }
        .nav-left{
             flex:auto を設定します。
            高さ:200px;
            フォントサイズ:20px;
            フォントの太さ: 700;
            テキスト配置: 中央;
            背景色:#505050;
            色:#FF7800;
            右ボーダー:3px 実線 #FF7800;
            幅:80ピクセル;
            パディング上部:40px;
        }
        .nav-右
             flex:auto を設定します。
             幅:90%
        }
        .nav-right div{
            位置:相対;
        }
        。キャップ{
            表示:インラインブロック;
            幅:70px;
            高さ:30px;
            背景色: #FF7800;
            マージン:10px 0;
            border-bottom:2px 点線 #333333;
            border-top:2px 点線 #333333;
        }
 
        。子供{
            表示:インラインブロック;
            幅:0px;
            border-top:2px 点線 #333333;
            垂直方向の位置合わせ: 上;
            上マージン: 10px;
        }
        span.cap-child
        {
            位置:絶対;
            境界線:2px 実線 #333333;
            背景色: #505050;
            色: #ffffff;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            境界線の半径: 8px;
            /*上:5px;*/
            左:0px;
 
        }
        span.cap-child{
            フォントサイズ:15px;
            色：白;
        }
        span.cap-child a:hover{
            色: #ffc8aa;
        }
        .hr-over{
            位置:絶対;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            境界線の半径: 10px;
            背景色: #FF7800;
            幅:20px;
            高さ:20px;
            上マージン:-10px;
            境界線:1px 実線 #333333;
        }
        .showit{
            アニメーション: cho-show .5s;
        }
        @keyframes cho-show {
            0% {
                -webkit-transform-origin: 右下;
                transform-origin: 右下;
                -webkit-transform:rotate3d(0, 0, 1, 45度);
                変換: rotate3d(0, 0, 1, 45deg);
                不透明度:0;
            }
            100% {
                -webkit-transform-origin: 右下;
                transform-origin: 右下;
                -webkit-transform: なし;
                変換: なし;
                不透明度:1;
            }
        }
 
    </スタイル>
</head>
<本文>
<!--レイアウト-->
<div class="mynav">
    <div class="nav-left">
        コンテンツ
        <span style="font-size:6px">
            ccより
        </span>
    </div>
    <div class="nav-right">
        <div> 要素
            <span class="cap ">第1章</span><div class="triangle-right"></div>
            <div class="child">
            </div>
        </div>
        <div> 要素
            <span class="cap">第 2 章</span><div class="triangle-right"></div>
            <div class="child">
            </div>
        </div>
        <div> 要素
            <span class="cap">第3章</span><div class="triangle-right"></div>
            <div class="child">
            </div>
        </div>
    </div>
</div>
 
<script type="text/javascript">
    var アクティブ = '';
    var スペース = 80;
    var myNodes = [{ name:'Chapter1',
                    子: [{name:'キャラクターセット',url:'https://baike.baidu.com/item/%E5%AD%97%E7%AC%A6%E9%9B%86/946585?fr=aladdin'},
                    {name:'コメント',url:'cc/sd1/index'},
                    {name:'直接数量',url:'cc/sd2/index'}
        ]},
        {name:'第2章',
        子:[{name:'number',url:'#'},
        {名前:'テキスト',url:'#'},
        {name:'ブール値',url:'#'},
        {name:'グローバルオブジェクト',url:'#'},
        {name:'パッケージオブジェクト',url:'#'}
        ]},
        {
            名前:'第3章',
            子: [{name:'Cat',url:'#'},
            {name:'狗',url:'#'}
        ]}
    ];
 
    $('.cap').hover(関数(){
        var cap = これ;
        var mybox=$(cap.parentNode).find('.child');
        if(アクティブ!=this.innerHTML)
        {
            //色を変更する$(cap).css('background-color','#ffc8aa');
            $(cap).next().css('左境界線の色','#ffc8aa');
            // 元のコンテンツをクリーンアップします for(var j=0;j<$('.child').length;j++)
            {
                //コンソール.log($('.child')[j]);
                $($('.child')[j]).empty();
                $($('.child')[j]).css('width','0px');
            }
 
            アクティブ=this.innerHTML;
            myNodes.forEach(関数(アイテム){
                    if(アクティブ==アイテム名)
                    {
                        myAnimate(item.children,mybox);
 
                    }
                }
            );
        }
         // 順序の表示 orderShow($(mybox),$(mybox).children().length-1);
 
    }、 関数（）{
        //色を変更する$(this).css('background-color','#FF7800');
        $(this).next().css('左境界線の色','#FF7800');
 
    });
 
 
    関数 myAnimate(arr,ele)
    {
       // コンソールログ(ele);
        var $ele=$(ele);
        var 位置;
        arr.forEach(関数(項目,インデックス){
            位置=スペース*インデックス+20;
            addOne(アイテム、位置+'px');
        });
        $ele.animate({width:pos+100+'px'},200,'linear',function(){
            var left=pos+80+'px';
            $ele.append("<span class='hr-over' style='left:"+left+"'></span>");
        });
        関数 addOne(item,pos)
        {
            var mylink="<a href='"+item.url+"'>"+item.name+"</a>";
            $ele.append("<span class='cap-child' style='display:none;left:"+pos+"'>"+mylink+"</span>")
        }
    }
 
    関数 orderShow($it,times)
    {
        if(times>=0)
        {
            setTimeout(関数(){
                $($it.children()[times]).css('display','block')
                $($it.children()[times]).addClass('showit');
            orderShow($it,times-1)
        },100);
        }
        それ以外
            戻る;
 
    }
</スクリプト>
 
</本文>
</html>

効果：