フレームのような固定サイドメニューの作り方

情報サイトなどで使われている、要素内でスクロールできるフレームのような固定サイドメニューの作り方を説明します。

完成品

See the Pen
sidemenu
by kura (@kuranopen)
on CodePen.

HTML

See the Pen
sidemenu
by kura (@kuranopen)
on CodePen.

CSS

See the Pen
sidemenu
by kura (@kuranopen)
on CodePen.

  1. 右側のメイン要素にmargin-left: 220px;を追加。サイドメニューの横幅分マージンをかけます。
  2. サイドメニューにposition: fixed;を追加。サイドメニューが画面に固定されます。
  3. サイドメニューにheight: 100%;を追加。高さを指定にしないとスクロールバーが表示されません。
  4. overflow: auto;をサイドメニューに追加。サイドメニュー内の要素が高さを超えても、スクロールが表示されます。
  5. width: 220px;を追加し、サイドメニューの横幅を指定。

※サイドバーにbox-sizing: border-box;を指定することで、スクロールバーを要素の幅内に収めることできます。

スポンサーリンク

スポンサーリンク

  • このエントリーをはてなブックマークに追加

【続き】 作り方を知るの便利な使い方

新しい記事はありません