CSS でのナビゲーションバーとドロップダウンメニューの実装

1. CSSナビゲーションバー

（１）ナビゲーションバーの機能

ナビゲーションバーを使いこなすことは、Web サイトのレイアウトにとって非常に重要です。CSS を使用すると、退屈な HTML メニューではなく、見栄えの良いナビゲーションバーに変換できます。

（２）垂直ナビゲーションバー

<1>コードは次のとおりです

<!doctypehtml>
<html>
    <ヘッド> 
        <メタ文字セット="utf-8"> 
        <title>垂直ナビゲーションバー</title> 
        <link rel="スタイルシート" href="daohanglan1.css"/>
    </head>
    <本文>
        <ul>
            <li><a class="active" href="#home">ホーム</a></li>
            <li><a href="#news">ニュース</a></li>
            <li><a href="#contact">お問い合わせ</a></li>
            <li><a href="#about">概要</a></li>
        </ul>
        <div>
          <h2>垂直ナビゲーションバー</h2>
          <h3>垂直ナビゲーション バー 垂直ナビゲーション バー 垂直ナビゲーション バー 垂直ナビゲーション バー 垂直ナビゲーション バー 垂直ナビゲーション バー 垂直ナビゲーション バー</p>
          <p>垂直ナビゲーション バー</p>
          <p>垂直ナビゲーションバー</p>
          <p>垂直ナビゲーションバー</p>
          <p>垂直ナビゲーション バー</p>
          <p>垂直ナビゲーション バー</p>
          <p>垂直ナビゲーション バー</p>
          <p>垂直ナビゲーション バー</p>
        </div>
    </本文>
</html>
体{
    マージン:0;
}
ul{
    パディング:0;
    マージン:0;
    リストスタイルタイプ:なし;
    
    幅:25%;
    背景色:#f1f1f1;
    
    位置:固定;
    高さ:100%;
    トップ:0;
    オーバーフロー:自動;
    
    /* 境界線:1px 実線 #000; */
}
/* ul>li:not(:最後の子){
    ボーダー下部:1px 実線 #000;
} */
ul a{
    表示:ブロック;
    
    テキスト装飾:なし;
    色:#000;
    パディング:8px 16px;
    
    テキスト配置:中央;
}
li a:hover:not(.active){
    背景色:#555;
    色：白;    
}
a.アクティブ{
    背景色:#4caf50;
    色：白;    
}
div{
    左マージン:25%;
    パディング:1px 16px;
    高さ:100px;
    
}

<2>効果図は以下のとおりです。

（３）水平ナビゲーションバー

<1>コードは次のとおりです。

<!doctypehtml>
<html>
    <ヘッド> 
        <メタ文字セット="utf-8"> 
        <title>水平ナビゲーション バー</title> 
        <link rel="スタイルシート" href="daohanglan2.css"/>
    </head>
    <本文>
        <ul>
            <li><a class="active" href="#home">ホーム</a></li>
            <li><a href="#news">ニュース</a></li>
            <li><a href="#contact">お問い合わせ</a></li>
            <li style="float:right"><a href="#about">概要</a></li>
        </ul>
        <div class="box">
            <h2>水平ナビゲーション バー</h2>
            <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p>
            <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p>
            <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p>
            <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p>
            <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p>
            <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p>
            <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p>
            <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p>
            <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p>
            <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p>
            <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p>
            <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p>
            <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p>
            <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p>
            <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p>
            <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p>
            <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p>
            <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p>
            <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p>
            <p>水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー; 水平ナビゲーション バー</p>
            </div>
    </本文>
</html>
体{
    マージン:0;
}
ul{
    パディング:0px;
    マージン:0px;
    リストスタイルタイプ:なし;
    背景色:#333;
    オーバーフロー:非表示;
    
    位置:固定;
    上:0px;
    幅:100%;
}
ul>li{
    フロート:左;
    右境界線:1px 実線 #fff;
    表示:インライン;
}
ul>li:最後の子{
    右境界線:なし;
    
}
{
    パディング:14px 16px;
    
    表示:ブロック;
    幅:60ピクセル;
    
    テキスト配置:中央;
    
    テキスト装飾:なし;
    色：白;
    
}

li a:hover:not(.active) {
    背景色: #111;
}
    
li a.アクティブ{
    色: 白;
    背景色: #4CAF50;
}
.box{パディング:20px;
上マージン:30px;
背景色:#1abc9c;
高さ:1500px;}

<2>効果図は以下のとおりです。

2. ドロップダウンメニュー

（１）ドロップダウンメニューの機能

ドロップダウンメニューを使用すると、Web ページが退屈にならないようになります。また、Web ページの組版に欠かせない CSS を通じて、Web ページの外観を変更することもできます。

（２）ドロップダウンメニュー

<1>コードは次のとおりです。

<!doctypehtml>
<html>
<ヘッド>
    <メタ文字セット="utf-8"/>
    <タイトル></タイトル>


    <link rel="スタイルシート" type="text/css" href="xialacaidan.css"/>


</head>
<本文>


    <div class="dropdown">
        <span>
            ドロップダウンメニュー
        <div class="di">
            <ul>
                <li>こんにちは！ </li>
                <li>大丈夫ですよ！ </li>
                <li>みなさんこんにちは！ </li>
            </ul>
        
        </div>
    </div>


</本文>
</html>
体{
    マージン:0;
    テキスト配置:中央;
}
。落ちる{
    
    背景色:緑;
    テキスト配置:中央;
    パディング:20px;
    表示:インラインブロック;
    カーソル:ポインタ;
    位置:相対;
}
.di{
    表示:なし;
    位置:絶対;
    上:61px;
    左:0;
}
.di ul{
    リストスタイル:なし;
    パディング:0;
    マージン:0;
    背景色: #f9f9f9;
    ボックスの影: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.di ul li{
    最小幅:104px;
    パディング:10px 15px;
    
}
.dropdown:hover{
    背景色:#3e8e41
}
.dropdown:hover .di{
    表示:ブロック;
    
}
.di ul li:hover{
    背景色: #f1f1f1
}

<2>効果図は次の通りです