position: fixed;を指定したハンバーガーメニューをスマホの時にスクロールさせる方法
今回は、「position: fixed;を指定したハンバーガーメニューをスマホの時にスクロールさせる方法」について紹介します。
position: fixed;を指定したハンバーガーメニューをスマホの時にスクロールさせる方法
例えば、ハンバーガーメニューが以下のように「position: fixed;」で固定されていたとします。
|
1 2 3 4 5 6 |
<nav id="gloval-nav"> <ul> <li>メニュー</li> <!-- 以下省略 --> </ul> </nav> |
|
1 2 3 4 5 6 7 |
#gloval-nav { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } |
このままだと縦にスクロールさせることが出来ません。
スクロールさせるには、以下のコードを追加しましょう。
|
1 2 3 4 |
#gloval-nav ul { height: 100%; overflow: auto; } |
スクロールさせたい箇所に対してoverflowを指定すると、「position: fixed;」を使ったとしてもスクロールさせることが出来ますよ！
今回紹介した実装は実務でもよく使うので、是非マスターしましょう！
