どうも、シローです。
Webサイトで必ずといってあるナビゲーションメニューの作り方を今回はまとめようと思います。
ヘッダーナビゲーションの作り方
ヘッダーナビゲーションはサイトの上の方に横一列で配置されているナビゲーションメニューのことです。
実際のコードはこちらです。
See the Pen
header navigation menu by shirosmith1793 (@phantom1793)
on CodePen.
ポイントは<li>要素をfloatで横一列に並べて、親要素の<ul>にfloat解除用のcssを当て込むことです。
cssの.clearfixにそこら辺の処理が書いてあります。
サイドバーナビゲーションの作り方
サイドバーナビゲーションはサイドバーに設置されているナビゲーションメニューのことです。
実際のコードはこちら
See the Pen
sidebar-navigation-menu by shirosmith1793 (@phantom1793)
on CodePen.
block要素を横に並べたい時はfloatとclearfixの組み合わせが大事です。
今回は以上となります。