著者:
Christy White
作成日:
10 5月 2021
更新日:
1 J 2024
コンテンツ
ドロップダウンメニューを使用して、ページ上のすべての重要な部分とページに含まれるサブセクションの明確で階層的な概要を作成します。サブセクションを表示するには、メインセクションの上にマウスを移動するだけです。 HTMLとCSSのみを使用してドロップダウンメニューを作成できます。
ステップに
パート1/2：HTMLの記述
ナビゲーションセクションを作成します。 通常、ウェブサイト全体のナビゲーションバーにはnav>を使用し、ページにバインドされている小さなリンクセクションにはheader>を使用し、他のオプションが当てはまらない場合はdiv>を使用します。これをdiv>要素に配置して、コンテナとメニュー自体の両方のスタイルを調整できるようにします。 - div>
- nav>
- / nav>
- / div>
各セクションにクラス属性を与えます。 後でclass属性を使用して、CSSでこれらの要素のスタイルを変更します。コンテナとメニューの両方に独自のクラス属性を与えます。 - div>
- nav>
- / nav>
- / div>
メニュー項目のリストを追加します。 順序付けられていないリスト（ul>）には、メインメニューの項目（リスト項目li>）が含まれています。ユーザーがその上にマウスを移動すると、ドロップダウンメニューが表示されます。クラス「clearfix」をリスト要素に追加します。これについては、CSSスプレッドシートの後半で説明します。 - div>
- nav>
- ul>
- li>ホーム/ li>
- li>従業員
- li>お問い合わせ
- / li>
- / ul>
- / nav>
- / div>
リンクを追加します。 これらのトップレベルのメニュー項目も独自のページにリンクしている場合は、リンクを挿入できるようになりました。存在しないアンカー（「＃！」など）にリンクします。何にもリンクしていなくても、ユーザーのカーソルは異なって見えます。この例では、連絡先はどこにもリードしていませんが、他の2つのメニュー項目はリードしています。 - div>
- nav>
- ul>
- li>a href = "/">ホームホーム/ a>/ li>
- li>a href = "/ Employees">スタッフ/ a>
- / li>
- li>a href = "＃！">連絡先/ a>
- / li>
- / ul>
- / nav>
- / div>
ドロップダウンアイテムのサブリストを作成します。 スタイルが作成されると、これらのリストがドロップダウンメニューを形成します。ユーザーがマウスオーバーするリストアイテムにリストを配置します。以前と同じように、クラス属性とリンクを追加します。 - div>
- nav>
- ul>
- li> a href = "/">ホーム/ a> / li>
- li> a href = "/従業員">従業員/ a>
- ul>
- li> a href = "/ borsato">マルコ・ボルサト/ a> / li>
- li> a href = "/ titulaer"> Chriet Titulaer / a> / li>
- / ul>
- / li>
- li> a href = "＃！">連絡先/ a>
- ul>
- li> a href = "mailto：[email protected]">問題を報告する/ a> / li>
- li> a href = "/ support">カスタマーサポート/ a> / li>
- / ul>
- / li>
- / ul>
- / nav>
- / div>
パート2/2：CSSの作成
CSSスタイルシートを開きます。 リンクがまだない場合は、HTMLドキュメントのheadセクションにCSSスタイルシートへのリンクを投稿してください。この記事では、フォントや背景色の設定など、CSSの基本については説明しません。 
clearfixコードを追加します。 メニューリストに「clearfix」クラスを追加したことを覚えていますか？通常、ドロップダウンメニューの要素の背景は透明であるため、他の要素を移動できます。 CSSに簡単に適応させることで、この問題を解決できます。 Internet Explorer 7以前では機能しませんが、これは素晴らしく迅速な修正です。 - .clearfix：後{
- コンテンツ： "";
- 表示：テーブル;
- }
基本設計を作成します。 このコードを使用すると、メニューをページの上部に配置し、ドロップダウン要素を非表示にできます。これは意図的に非常に単純なので、関連するコードに集中できます。パディングやマージンなどの追加のCSSコードを使用して、後で変更できます。 - .nav-wrapper {
- 幅：100％;
- 背景：＃008B8B;
- }
- .navメニュー{
- 位置：相対;
- 表示：インラインブロック;
- }
- .subメニュー{
- 位置：絶対;
- 表示：なし;
- 背景：＃555;
- }
ドロップダウンアイテムの上にマウスを置くと、ドロップダウンアイテムが表示されるようにします。 ドロップダウンリストの要素は、表示されないように設定されています。 「親」にカーソルを合わせるとすぐにサブリスト全体が表示されるようにする方法は次のとおりです。 - .nav-menu ul li：ホバー> ul {
- 表示ブロック;
- }
- 注-ドロップダウンメニューのメニュー項目で追加のメニューが非表示になっている場合、ここで追加されたプロパティはすべてのメニューに適用されます。ドロップダウンメニューの最初のレベルにのみスタイルを適用する場合は、代わりに「.nav-menu> ul」を使用してください。
ドロップダウンメニューがあることを矢印で示します。 Webデザイナーは通常、要素がドロップダウンメニューを開くことを下矢印で示します。このコードは、メニューのすべての要素にその矢印を追加します。 - .navメニュー> ul> li：後{
- 内容： " 25BC"; / *下矢印のエスケープされたUnicode * /
- フォントサイズ：.5em;
- 表示ブロック;
- 位置：絶対;
- }
- 注-プロパティtop、bottom、right、またはleftを使用して、矢印の位置を調整します。
- 注-すべてのメニュー項目にドロップダウンがない場合は、クラスのナビゲーションメニュー全体の外観を変更しないでください。代わりに、矢印が必要な各li要素に別のクラス（ドロップダウンなど）を追加します。上記のコードでそのクラスを参照してください。
パディング、背景、その他のプロパティを調整します。 メニューは今は機能するはずですが、まだあまり良くありません。 CSSのプロパティを使用すると、各クラスまたは要素の外観と場所をカスタマイズできます。
チップ
- ドロップダウンメニューをフォームに追加する場合、HTML5では要素select>を使用すると非常に簡単です。
- リンクahref = "＃">はページの一番上までスクロールし、href = "＃！">などの存在しないアンカーを指すリンクはスクロールしません。それがあまりにもずさんだと感じる場合は、CSSでカーソルの外観を変更できます。
- サンプルコードをコピーして貼り付けるときは、すべての箇条書きを削除してください。
