目次
スマホ用スライドメニューとは
スマホ用スライドメニューとは、画面端からメニューがスライドして表示されるナビゲーションのことです。
ハンバーガーメニューとも呼ばれ、限られた画面スペースを有効活用できるため、多くのスマホサイトで採用されています。
主な特徴は以下の通りです。
- 初期表示ではメニューを非表示にできる
- タップ操作で直感的に開閉できる
- スマホ画面でもスッキリしたデザインを保てる
実装前に考えるポイント
スライドメニューを作成する前に、以下を意識しておくと失敗しにくくなります。
- JavaScriptを使うか使わないか
- 右から出すか左から出すか
- メニュー表示中の背景操作をどうするか
- 横スクロールが発生しないか
この記事では、初心者でも扱いやすい「HTML＋CSS中心」の方法を紹介します。
HTMLの基本構造
まずはスライドメニューの基本となるHTMLです。
<button class="menu-btn" aria-label="メニューを開く">
<span></span>
<span></span>
<span></span>
</button>
<nav class="slide-menu">
<ul>
<li><a href="/">トップ</a></li>
<li><a href="/about">会社概要</a></li>
<li><a href="/service">サービス</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>ポイントは以下です。
- button要素を使い、操作性とアクセシビリティを確保
- navタグでナビゲーションであることを明示
- メニュー内はシンプルなリスト構造にする
CSSでスライドメニューを作る
次にCSSでメニューを画面外に配置し、スライド表示させます。
/* メニュー本体 */
.slide-menu {
position: fixed;
top: 0;
right: -100%;
width: 80%;
height: 100vh;
background-color: #ffffff;
transition: right 0.3s ease;
z-index: 1000;
}
/* 表示時 */
.slide-menu.is-open {
right: 0;
}
/* メニューリスト */
.slide-menu ul {
list-style: none;
padding: 60px 20px;
margin: 0;
}
.slide-menu li {
margin-bottom: 20px;
}
.slide-menu a {
text-decoration: none;
color: #333;
font-size: 1.6rem;
}ここでは「right:-100% → right:0」の切り替えでスライドを実現しています。
ハンバーガーボタンのデザイン
次に、三本線のボタンをCSSで作ります。
.menu-btn {
position: fixed;
top: 20px;
right: 20px;
width: 40px;
height: 30px;
background: none;
border: none;
z-index: 1100;
}
.menu-btn span {
display: block;
width: 100%;
height: 4px;
background-color: #333;
margin-bottom: 6px;
}画像を使わず、CSSだけで表現することで管理が楽になります。
メニューを開閉する仕組み
JavaScriptを最小限だけ使い、クラスの付け外しで制御します。
<script>
const btn = document.querySelector('.menu-btn');
const menu = document.querySelector('.slide-menu');
btn.addEventListener('click', () => {
menu.classList.toggle('is-open');
});
</script>処理内容はとてもシンプルです。
- ボタンを押す
- is-open クラスを付け外し
- CSSのtransitionでアニメーション
背景のスクロールを防ぐ方法
メニュー表示中に背景がスクロールすると、操作しづらくなります。
body.is-fixed {
overflow: hidden;
}<script>
btn.addEventListener('click', () => {
menu.classList.toggle('is-open');
document.body.classList.toggle('is-fixed');
});
</script>これでメニュー表示中は背景が固定されます。
横スクロールが発生する場合の対策
スマホで横にスクロールしてしまう原因は、以下が多いです。
- メニューを transform で外に出している
- 幅指定が100vwになっている
- absolute要素が画面外にはみ出している
基本対策として、以下を設定します。
html,
body {
overflow-x: hidden;
}また、スライドメニューは right:-100% のように「位置指定」で隠す方が安全です。
レスポンシブ対応の考え方
スライドメニューはスマホ専用にし、PCでは通常メニューに切り替えるのが一般的です。
@media screen and (min-width: 768px) {
.menu-btn {
display: none;
}
.slide-menu {
position: static;
width: auto;
height: auto;
right: 0;
transition: none;
}
}これにより、1つのHTMLでスマホ・PC両対応が可能になります。
よくあるトラブルと注意点
スライドメニュー実装時によくある問題です。
- z-indexが足りずメニューが見えない
- fixed要素が他の要素に隠れる
- メニュー内リンクを押しても閉じない
これらは構造をシンプルにし、クラス管理を明確にすることで防げます。
まとめ
スマホ用スライドメニューは、構造を理解すれば難しくありません。
- HTMLはシンプルに
- CSSで位置とアニメーションを制御
- JavaScriptは最小限にする
- 横スクロール対策を忘れない
この考え方は、HP Build Studioで制作している実案件のスマホサイトでも基本となっています。
ぜひご自身のサイトに合わせて調整しながら活用してみてください。