Update!

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

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

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

目次

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

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

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

HTML

<div class="wrapper">
  <div class="subnav">
    <ul>
      <li><a href="#">メニュー1</a></li>
      <li><a href="#">メニュー2</a></li>
      <li><a href="#">メニュー3</a></li>
      <li><a href="#">メニュー4</a></li>
      <li><a href="#">メニュー5</a></li>
    </ul>
  </div>
  <div class="main">
    <div class="row">
      <div class="col">
        メインコンテンツエリア
      </div>
    </div>
  </div>
</div>

CSS

.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;
  }
}

まとめ

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

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

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents