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

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

完成品

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;を指定することで、スクロールバーを要素の幅内に収めることできます。