今回はnoteのWEBサイトのように、スマホの時にナビメニューを横スクロールさせる方法について紹介します。
【CSS】スマホの時にナビメニューを横スクロールさせる方法
完成形はこちらです。
ナビメニューが横にスクロールできることが分かるでしょう。
※ Google Chrome、Microsoft edge、Safariで確認済み
HTML
<div class="nav">
<ul>
<li><a href="">HTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">JavaScript</a></li>
<li><a href="">PHP</a></li>
<li><a href="">Puby</a></li>
<li><a href="">Python</a></li>
<li><a href="">Java</a></li>
<li><a href="">GO</a></li>
</ul>
</div>
親要素navを用意し、その中にulとliを使ってリストを作っていきます。
CSS
.nav {
background-color: #000;
overflow-x: auto;
ul {
display: flex;
width: max-content;
margin: 0 auto;
li {
a {
display: inline-block;
height: 50px;
padding: 0 25px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #fff;
text-decoration: none;
&:hover {
background-color: red;
}
}
}
}
}
親要素のnavに対して「overflow-x: auto;」を指定します。
そしてnavの1つ下の階層にあるulに対して「width: max-content;」を指定することで、横にスクロールするようになります。
まとめ
以上が、スマホの時にナビメニューを横スクロールさせる方法でした。
