トップナビゲーションバー機能を実現するCSS+HTML

ナビゲーションバー、固定トップナビゲーションバー、およびセカンダリメニューの実装効果図の実装:

ここに画像の説明を挿入

2018/11/16更新:
最近このナビゲーションバーを使用していたところ、ページを拡大・縮小したときにナビゲーションバーのレイアウトや表示に若干の問題があることに気づいたので、CSS コードを再修正して再度投稿しました。

新しいコード実装（最適化されたレイアウト）：

<html>
   <ヘッド>
       <スタイル タイプ="text/css">
        。トップ{
    /* 幅、高さ、背景色を設定します */
    height: auto; /*高さを自動高さに変更*/
    幅:100%;
    左マージン: 0;
    背景:rgb(189, 181, 181);
    position: fixed; /*上部に固定*/
    top: 0;/*上からの距離は0です*/
    下部マージン: 5px;
}
.トップ ul{
    /* ul タグのデフォルトスタイルをクリアします */
    width: auto;/*幅も自動に変更されます*/
    リストスタイルタイプ: なし;
    空白:折り返しなし;
    オーバーフロー: 非表示;
    左マージン: 5%;
    /* 上マージン: 0; */
    パディング: 0;

}
.トップ li {
    float:left; /* li コンテンツを水平方向にフロートさせます。つまり、水平方向に配置します。*/
    margin-right:2%; /* 2つの線の間の距離*/
    位置: 相対的;
    オーバーフロー: 非表示;
}

.トップ li a{
   /* リンクコンテンツの表示形式を設定します */
    display: block; /* リンクをブロック要素として表示すると、リンク領域全体がクリック可能になります*/
    色：白;
    テキスト配置: 中央;
    パディング: 3px;
    オーバーフロー: 非表示;
    テキスト装飾: なし; /* 下線を削除 */
    
}
.top li a:hover{
    /* マウスを選択すると背景が黒くなります*/
    背景色: #111;
}
.トップ ul li ul{
    /* セカンダリメニューを設定する */
    左マージン: -0.2px;
    背景:rgb(189, 181, 181);
    位置: 相対的;
    display: none; /* デフォルトでセカンダリメニューの内容を非表示にする*/

}
.トップ ul li ul li{
    /* セカンダリメニューliコンテンツの表示*/
    
    フロート:なし;
    テキスト配置: 中央;
}
.トップ ul li:ホバー ul{
    /* マウスがセカンダリメニューコンテンツを選択した場合*/
    表示: ブロック;
}
体{
    背景:#eff3f5;
}

       </スタイル>
        <本文>
            <div class="top">
                   <中央> 
                    <ul>
                    <li><a href="#">第 1 レベル メニュー</a></li>
                    <li><a href="#">第 1 レベル メニュー</a></li>
                    <li><a href="#">第 1 レベル メニュー</a></li>
                    <li><a href="#"><b>第 1 レベル メニュー</b></a></li>
                    <li><a href="#">第 1 レベル メニュー</a></li>
                    <li>
                        <a href="#">第 1 レベルのメニュー</a>
                        <ul>
                            <li><a href="#">セカンダリメニュー</a></li>
                            <li><a href="#">セカンダリメニュー</a></li>
                        </ul>
                    </li>        
                      </ul>
                    </center>      
            </div>
        </本文>
    </head>
</html>

以下は元のコード実装です (ページを拡大および縮小すると、ナビゲーションページのレイアウトに問題が発生します)。

<html>
   <ヘッド>
       <スタイル タイプ="text/css">
        。トップ{
            /* 幅、高さ、背景色を設定します */
            高さ: 50px;
            幅:100%;
            背景:rgb(189, 181, 181);
            position: fixed; /*上部に固定*/
            top: 0;/*上からの距離は0です*/
        }
        .トップ ul{
            /* ul タグのデフォルトスタイルをクリアします */
            幅: 80%;
            リストスタイルタイプ: なし;
            マージン: 0;            
            パディング: 0;
            オーバーフロー: 非表示;

        }
        .トップ li {    
            float:left; /* li コンテンツを水平方向にフロートさせます。つまり、水平方向に配置します。*/
            margin-right:50px; /* 2つの線の間の距離*/
        }

        .トップ li a{
           /* リンクコンテンツの表示形式を設定します */
            display: block; /* リンクをブロック要素として表示すると、リンク領域全体がクリック可能になります*/
            色：白;
            テキスト配置: 中央;
            パディング: 14px 16px;
            テキスト装飾: なし; /* 下線を削除 */
        }
        .top li a:hover{
            /* マウスを選択すると背景が黒くなります*/
            背景色: #111;
        }
        .トップ ul li ul{
            /* セカンダリメニューを設定する */
            幅: 自動;
            背景:rgb(189, 181, 181);
            位置: 絶対;
            display: none; /* デフォルトでセカンダリメニューの内容を非表示にする*/

        }
        .トップ ul li ul li{
            /* セカンダリメニューliコンテンツの表示*/
            右マージン:0;
            フロート:なし;
            テキスト配置: 中央;
        }
        .トップ ul li:ホバー ul{
            /* マウスがセカンダリメニューコンテンツを選択した場合*/
            表示: ブロック;
        }
       </スタイル>
        <本文>
            <div class="top">
                   <中央> 
                    <ul>
                    <li><a href="#">第 1 レベル メニュー</a></li>
                    <li><a href="#">第 1 レベル メニュー</a></li>
                    <li><a href="#">エピソードメニュー</a></li>
                    <li><a href="#"><b>第 1 レベル メニュー</b></a></li>
                    <li><a href="#">第 1 レベル メニュー</a></li>
                    <li>
                        <a href="#">第 1 レベルのメニュー</a>
                        <ul>
                            <li><a href="#">セカンダリメニュー</a></li>
                            <li><a href="#">セカンダリメニュー</a></li>
                        </ul>
                    </li>        
                      </ul>
                    </center>      
            </div>
        </本文>
    </head>
</html>

CSS+HTML を使用してトップナビゲーションバー機能を実装する方法についての記事はこれで終わりです。CSS トップナビゲーションバーに関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: JavaScript 即時実行関数の使用状況分析

>>: 0.1秒の価値！フロントエンドのウェブページの高速化の問題について簡単に説明します