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

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

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

(1)ナビゲーションバーの機能

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

(2)垂直ナビゲーションバー

<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>効果図は以下のとおりです。

(3)水平ナビゲーションバー

<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. ドロップダウンメニュー

(1)ドロップダウンメニューの機能

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

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

<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>効果図は次の通りです

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  大きな MySQL テーブルに列を追加する方法

>>:  W3C チュートリアル (11): W3C DOM アクティビティ

推薦する

フロントエンドインタビューに必要なホモロジーとクロスドメインの詳細な説明

序文ご存知のとおり、ブラウザの相同性戦略とクロスドメイン方式も、フロントエンド面接で頻繁に遭遇する問...

MySQLクエリ条件のnot inとinの違いと理由

まずSQLを書く SELECT DISTINCT from_id タラから cod.from_id ...

calc() で全画面背景の固定幅コンテンツを実現

ここ数年、Web デザインには「全幅背景と固定幅コンテンツ」というトレンドが生まれています。このデザ...

jsフェッチ非同期リクエストの使用の詳細な例

目次非同期を理解するフェッチ(url)レスポンス.json() asyncとawaitを組み合わせる...

MySQL のデータの偶発的な削除の解決策と kill ステートメントの原則

mysql が誤ってデータを削除しました削除ステートメントを使用して誤ってデータ行を削除する誤ってデ...

Dockerでパラメータ変数を外部から指定する方法

この記事は主にDockerでパラメータ変数を外部から指定する方法を紹介します。この記事のサンプルコー...

マインスイーパゲームを実装するための jQuery プラグイン (3)

この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する方法に関する3番目の記事...

JavaScript モバイル H5 画像生成ソリューションの説明

現在、WeChatパブリックアカウントの運用活動が多く、写真を生成する必要があります。生成された写真...

docker compose の記述ルールについての簡単な説明

この記事ではクラスタの展開に関連する内容は紹介しませんバージョン制約Docker エンジン >...

Vue はブラウザのパスワード記憶機能を無効にするサンプル コードを実装します

情報を探すインターネットで見つかったいくつかの方法: autocomplete="off&...

JS 9 Promise 面接の質問

目次1. 複数の .catch 2. 複数の .catch 3. .then と .catch の連...

Linux で ARM 開発ボード用のファイルシステムを作成する

1. Busyboxのソースコードをオンラインでダウンロードしてください。コンパイル方法については、...

JavaScriptでシンプルなスクロールウィンドウを実装する

この記事では、スクロールウィンドウを実装するためのJavaScriptの具体的なコードを参考までに紹...

ボタンに醜い灰色の枠線が付いています。これを削除するにはどうすればよいですか?

ダイアログをクロージャで使用し、右上隅の向こう側に閉じるボタンがあるダイアログを描画しました。ボタン...

Vue3のdefineComponentの役割についての簡単な説明

目次defineComponent オーバーロード関数開発実務defineComponent 関数は...