純粋な CSS はドロップダウンメニューとドロップダウンコンテナーを実装します (純粋な CSS はナビゲーションバーとナビゲーションドロップダウンコンテナーを実装します)_html/css

純粋な CSS はドロップダウンメニューとドロップダウンコンテナーを実装します (純粋な CSS はナビゲーションバーとナビゲーションドロップダウンコンテナーを実装します)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:51:56

オリジナル

1165 人が閲覧しました

インターネット上には同様の、あるいは同一のケースがたくさんありますが、それでもメモを取るためとみんなの参考のために書き留めました

みんなが指導し批判できることを願っています~~

まず第一に、メニューを始めましょう。 list ul li ナビゲーションバーの作成:

ページでは、まず次の XHTML 構造を構築します:

<body>  <ul id="navWrapper">    <li>      <a href="#">Menu A</a>      <ul>        <li><a href="#">Menu A, Item 1</a></li>        <li><a href="#">Menu A, Item 2</a></li>        <li><a href="#">Menu A, Item 3</a></li>        <li><a href="#">Menu A, Item 4</a></li>        <li><a href="#">Menu A, Item 5</a></li>        <li><a href="#">Menu A, Item 6</a></li>      </ul>    </li>    <li>      <a href="#">Menu B</a>      <div id="test"><a href="#">Menu B, Item 1</a></div>    </li>  </ul>  <div id="banner"></div>  <div id="content">    <p>Page content here.</p>  </div></body>

ログイン後にコピー

コードを表示

効果:

その後、スタイルと機能を段階的に説明します (最初に各要素を指定します。その後のスタイルデザインを区別するために境界線を追加します):

スタイルコード:

<style>    ul{        border:1px solid red;    }    li{        border:1px solid lightgreen;    }    div{        border:1px solid black;    }</style>

ログイン後にコピー

コードを表示

効果:

このようにして、簡単に区別することができます。デザイン~~

下の行のリンクのスライドとリストの「.」「.」を削除し、親リストを横に、子リストを縦に配置して、ドロップダウンメニューのようにします~~(これは 2 レベルのネストされたリスト、1 つの親と 1 つの子です)

スタイルコード:

<style>    ul{        border:1px solid red;    }    li{        border:1px solid lightgreen;    }    div{        border:1px solid black;    }        a{        text-decoration:none;    }    ul#navWrapper li{        float:left;        list-style:none;    }    ul#navWrapper li ul li{        float:none;    }    div#banner{        clear:both;    }</style>

ログイン後にコピー

コードの表示

効果:

子リストと子コンテナを非表示にしましょう (ここで、子コンテナはid test を持つ div コンテナ）、マウスが親に移動すると、対応する子リストがリストの作成時に表示されます。これは、「:hover」によって実現されます。非表示の表示は、表示の「none」および「block」によって実現されます。ここでは可視性の「非表示」と「可視」が使用されていないことに注意してください。違いとしては、対応する属性を可視性に変更することができますが、ここでは実装されていません

スタイルコード:

<style>    ul{        border:1px solid red;    }    li{        border:1px solid lightgreen;    }    div{        border:1px solid black;    }        a{        text-decoration:none;    }    ul#navWrapper li{        float:left;        list-style:none;    }    ul#navWrapper li ul li{        float:none;    }    div#banner{        clear:both;    }        ul#navWrapper ul,ul#navWrapper div#test{        display:none;        position:absolute;    }    ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{        display:block;    }</style>

ログイン後にコピー

コードを表示

効果:

ここで注意すべき点が 1 つあります。子レベルが設定されていない場合です。位置が「絶対」の場合、マウスが親に移動すると、表示される子は特定の位置を占めます。ページ上の位置が変更されると、「ページのコンテンツはここにあります」が移動しますが、これは非常に悪いことです。そこで、後続のコンテンツの位置に影響を与えることなく、子を通常のプロセスから分離できるように、子を「position:absolute;」に設定します。

次に、親の位置をわずかに移動し、最初の親の下にある独自のリストを左に移動して親の境界線に合わせ、2 番目の親の下の div コンテナに特定の「ボリューム」を与えます

スタイルコード:

<style>    ul{        border:1px solid red;    }    li{        border:1px solid lightgreen;    }    div{        border:1px solid black;    }        a{        text-decoration:none;    }    ul#navWrapper li{        float:left;        list-style:none;    }    ul#navWrapper li ul li{        float:none;                margin-left:-41px;    }    div#banner{        clear:both;                height:50px;        margin-top:30px;    }        ul#navWrapper ul,ul#navWrapper div#test{        display:none;        position:absolute;    }    ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{        display:block;    }        ul#navWrapper{        margin-left:-41px;    }    ul#navWrapper div#test{        height:200px;        width:600px;        background:lightgray;    }</style>

ログイン後にコピー

コードを表示

効果:

すべての境界線を削除した後、ここで最も基本的な構造が設計されています~~

例:

すべての境界線を削除した後、全体をデザインする

スタイルコード:

<style>    body,div,ul,li{        padding:0;        margin:0;    }     a{        text-decoration:none;    }    ul#navWrapper li{        float:left;        list-style:none;                height:45px;        line-height:45px;    }    ul#navWrapper li ul li{        float:none;    }    div#banner{        clear:both;                height:50px;        margin-top:50px;        margin-left:50px;    }    div#content{        margin-left:50px;    }    ul#navWrapper ul{        display:none;        position:absolute;        background:#CCC;    }    ul#navWrapper div#test{        display:none;        position:absolute;        height:200px;        width:600px;        background:#cde6c7;    }    ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{        display:block;    }        ul#navWrapper{        background:#CCC;        height:45px;        width:960px;        margin:0 auto;        margin-top:30px;    }        li a{        font-size:24px;        color:#333;        display:block;        height:45px;        padding:0 20px;    }    li a:hover{        color:#fff;        background:#000;    }</style>

ログイン後にコピー

ビューコード

効果:

写真 1:

写真 2:

OK!上記の基本構造をもとに設計した例です。まだデザインする必要がある場合は、上記の最も基本的な構造に基づいてデザインするだけです~~

参考: Microsoft 公式ドキュメント「CSS ドロップダウンメニューの作成方法」