CSS3: サイドメニューをボトムメニューに切り替えるサンプル

2019/08/26

PC サイトのサイドメニューをモバイルで表示すると、画面が横長から縦長になるため、サイドメニューの領域によりメインコンテンツのエリアが狭くなってしまいます。
画面上部のグローバルメニューは、ハンバーガーメニューへ変更するパターンが多いですが、サイドメニューの場合はどうするか悩みどころだと思います。

今回は、サイドメニューをモバイルではボトムメニューへメディアクエリで切り替えるサンプルをメモしておきたいと思います。

サイドメニューをボトムメニューに切り替えるサンプル

display: flex を使用し、メディアクエリで 768px 以下の場合はボトムメニューへ変更するサンプルとなります。

[code]

メインコンテンツエリア

[/code]

[code]
.wrapper {
display: flex;
}

.main {
width: 100%;
padding: 1em;
}

.subnav {
position: fixed;
bottom: 0;
width: 100%;
background: #EEE;
}

.subnav ul {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 0;
padding: 1em;
list-style: none;
}

@media(min-width: 768px) {
.subnav {
position: relative;
width: 200px;
}

.subnav ul {
flex-direction: column;
}
}
[/code]

ボトムナビゲーションにする場合、メニュー項目はユーザビリティを確保するため、最大6項目が限界かと思います。
アップデート時にメニュー項目が増える場合は、プライオリティの低い項目をまとめるための項目を新設し、ネストすることで解決しましょう。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

よかったらシェアしてね！