ナビゲーションメニューの作り方

どうも、シローです。

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の組み合わせが大事です。

今回は以上となります。


タグ:

ナビゲーションメニューの作り方

どうも、シローです。

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の組み合わせが大事です。

今回は以上となります。

タグ: