フレームのような固定サイドメニューの作り方
情報サイトなどで使われている、要素内でスクロールできるフレームのような固定サイドメニューの作り方を説明します。
完成品
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.
- 右側のメイン要素に
margin-left: 220px;
を追加。サイドメニューの横幅分マージンをかけます。 - サイドメニューに
position: fixed;
を追加。サイドメニューが画面に固定されます。 - サイドメニューに
height: 100%;
を追加。高さを指定にしないとスクロールバーが表示されません。 overflow: auto;
をサイドメニューに追加。サイドメニュー内の要素が高さを超えても、スクロールが表示されます。width: 220px;
を追加し、サイドメニューの横幅を指定。
※サイドバーにbox-sizing: border-box;
を指定することで、スクロールバーを要素の幅内に収めることできます。