ボタンクリックで全画面に表示されるモーダルウインドウ風のメニューを実装する方法

ボタンクリックで全画面に表示されるモーダルウインドウ風のメニューを実装する方法

ボタンクリックで全画面に表示されるモーダルウインドウ風のメニューを実装する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加

  • 広告主様募集中
    ワンコインで広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加

ボタンをクリックした際に全画面に表示される、モーダルウインドウ風のメニューを実装する方法をご紹介いたします。

簡単なデモページを用意したので、挙動についてはデモページをご確認いただければと思います。

デモページを見る

スポンサードリンク

ボタンクリックで全画面に表示されるモーダルウインドウ風のメニューを実装する方法

HTMLのマークアップ

HTMLはシンプルで、以下のようにボタンとメニューをマークアップします。

<!-- メニューボタン -->
<button id="btn-menu">
<span></span>
<span></span>
<span></span>
MENU
</button>
<!-- メニュー -->
<nav id="sp-menu">
<div id="sp-menu-position">
<ul class="sp-menu-list">
<li class="col"><a href="#">メニュー1</a></li>
<li class="col"><a href="#">メニュー2</a></li>
<li class="col"><a href="#">メニュー3</a></li>
<li class="col"><a href="#">メニュー4</a></li>
<li class="col"><a href="#">メニュー5</a></li>
</ul><!-- .sp-menu-list -->
</div><!-- #sp-menu-position -->
</nav><!-- #sp-menu -->

#btn-menuがボタン部分で、#sp-menuがメニュー部分です。

スクリプトの実行

続いて、jQuery本体を読み込んで、スクリプトを実行します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
var $body = $('body');
//メニューボタンクリックでクラスを追加
$('#btn-menu').on('click', function () {
$body.toggleClass('open-menu');
});
//メニュー以外の部分をクリックで閉じる
$('#sp-menu').on('click', function () {
$body.removeClass('open-menu');
});
});
</script>

スクリプトは非常にシンプルで、ボタンをクリックした時にbodyにクラスを追加しているだけです。

CSSで装飾を整える

最後にCSSで全体に背景色などを付け、モーダルウインドウ風の見た目に仕上げます。

/* メニューボタン */
#btn-menu {
display: block;
position: absolute;
top: 0;
right: 0;
width: 78px;
height: 70px;
padding: 0 20px;
color: #fff;
background: #e73363;
z-index: 2;
transition: all .2s ease-in;
}
#btn-menu span {
display: block;
width: 100%;
height: 5px;
background: #fff;
}
#btn-menu span:nth-of-type(1) {
margin: 5px 0 0;
}
#btn-menu span:nth-of-type(2) {
margin: 8px 0 0;
}
#btn-menu span:nth-of-type(3) {
margin: 8px 0 5px;
}
/* メニュー */
#sp-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.65);
overflow: scroll;
z-index: 1;
transition: all .3s ease-in;
visibility: hidden;
opacity: 0;
}
.open-menu #sp-menu {
visibility: visible;
opacity: 1;
}
#sp-menu-position {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.sp-menu-list {
list-style: none;
}
.sp-menu-list a {
font-size: 22px;
font-weight: bold;
color: #e73363;
}

#sp-menuで画面全体に半透明の背景色を敷いています。「position: fixed;」と「width: 100%;」、「height: 100%;」の組み合わせで、画面全体に背景色が付くようになるというわけですね。

また、ボタンクリックをクリックした際に「visibility: visible;」「opacity: 1;」に値を上書きすることでメニューを表示しています。

あとがき

メニューの中に画像などを入れてメニューの領域を広く使いたい時は、便利な手法ですね。

スマホだけでなくPCサイトでも活用できるかと思いますので、ぜひ参考にしてください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。