【レイアウト構成】番外編:ドロップダウンメニューの練習

レイアウト構成

サイト全体のレイアウト構成

コーディングのヒント!

全体をheaderタグで囲みます。

タイトル
h1タグで記述します。
ドロップダウンメニュー
全体をnavタグで囲み、メニュー部分をul、liのリストタグで横並びに配置します。
liタグの中に、さらにul、liタグでドロップダウン用のサブメニューを作ります。
サブメニューは、初期状態では表示しないため「visibility: hidden;」で非表示に設定しておき、ホバー時に「visibility: visible;」で表示します。
サブメニューの位置は、positionを使って設定します。シングルメニューはliタグを基準に、ワイドメニューはmenu全体のulタグを基準に設定します。

コーディング練習メニューに戻る

Codejump

著者:Codejump運営者

X
Webサイト制作を学んでいく人、将来Webに関わる仕事をしていく人のために、役に立つ情報や学習コンテンツを提供していきます。
運営者情報

おすすめの記事

関連記事

コーディング練習一覧

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】かんたんなHTML、CSSでできるシンプルな練習サイト

【中級編】かんたんなHTML、CSS、JavaScript(jQuery)を使用した複数ページの練習サイト

【上級編】少し複雑な HTML&CSS&JavaScript(jQuery)を使用した様々なレイアウトの練習サイト

【応用編】複雑なHTML&CSS&JavaScript(jQuery)を使用した動きのある練習サイト

【番外編】Webサイト制作でよく使うHTML、CSS、JavaScript(jQuery)を練習