スマホサイトでよく見るドロワーメニュー（三本線）を押すと前面に広がるメニューを実装してみようと思います。
HTMLとCSS
まずはメニューを出した状態で重なりを調節します。
今回は、「 header 」が一番上でその下にメニューが来て、さらに下にメインコンテンツが来ます。
コンテンツの重なりは「 z-index 」の数字が大きいほど前面に来ます。
See the Pen
前面に広がるメニュー by endebataro (@endebataro)
on CodePen.
開閉アニメーションを設定
次に、アニメーションの設定を行います。
右上の「 三 」を押したらどのような動きでメニューを表示するか決めます。
上からスルッと出てくるアニメーションをつけてみようと思います。
閉じる時には逆に上にスルッと戻る感じにしようと思います。
See the Pen
前面に広がるメニュー2 by endebataro (@endebataro)
on CodePen.
動かす方法は「 #menu 」にtransitionでアニメーションの設定をして、「 .suru 」のクラスを付けたり外したりしています。
「 .suru 」を付けると、メニューが上がって見えなくなります。逆に外すと下がってきてメニューが表示されます。
「 .suru 」には、transformが記述してあり、上にマイナス100移動します。（ translateY(-100%) ）
メニューを非表示にする
「 #menu 」に「 .suru 」を付け、非表示にします。
See the Pen
前面に広がるメニュー3 by endebataro (@endebataro)
on CodePen.
「 三 」を押したら「 三 」を「 ✖ 」にする
jQueryで「 三 」を押したらテキストを変更し「 ✖ 」にしよう。
そして「 ✖ 」を押したら「 三 」に戻そう。
See the Pen
前面に広がるメニュー4 by endebataro (@endebataro)
on CodePen.
jQueryのif文を使います。
「 if($(this).text() == “三”) 」
もし、「 header span 」のテキストが、「 三 」だったらという意味です。
「 $(this).text(“×”); 」
「 header span 」のテキストを「 ✖ 」にする。
「 else 」
それ以外のテキストが入っていたらという意味です。
「 $(this).text(“三”); 」
「 header span 」のテキストを「 三 」にする。
出来たif文に「 #menu 」の表示・非表示を追加しよう
上で作成したif文に「 #menu 」の表示・非表示を追加します。
「 header span 」のテキストが「 ✖ 」の時は、「 #menu 」を表示し、
「 header span 」のテキストが「 三 」の時は、「 #menu 」を非表示にします。
See the Pen
前面に広がるメニュー5 by endebataro (@endebataro)
on CodePen.
【HTML】
<header>
<img src="https://hajimete.org/wp-content/uploads/2019/06/title.png" alt="logo" />
<span>三</span>
</header>
<main>
<div id="top_contents">
<div class="top_inner">
<h1>我々は宇宙人だ。</h1>
<p>
世界征服には、どうしたってUFOは欠かせない代物である。<br />
我々のUFOを紹介しよう！
</p>
</div>
</div>
</main>
<div id="menu" class="suru">
<div class="menu_inner">
<h2>MENU</h2>
<ul>
<li>UFOについて</li>
<li>UFOとは？</li>
<li>謎の飛行物体「UFO」</li>
<li>UFOと未確認飛行物体</li>
<li>ユーフォメーション（UFO）</li>
</ul>
</div>
</div>
【CSS】
body {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: rgb(13, 199, 143);
display: block;
}
header {
position: fixed;
z-index: 10;
top:0;
left:0;
width: 100%;
height: 60px;
background: #fff;
box-shadow: 0 2px 30px -20px rgba(0,0,0,.4);
}
header img {
position: absolute;
top: 50%;
left: 20px;
height: 45%;
display:block;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
header span {
position: absolute;
top: 50%;
right: 20px;
height: 45%;
display:block;
font-size: 24px;
line-height: 1;
font-weight: 800;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
cursor: pointer;
}
#top_contents {
position: relative;
width: 100%;
height: 800px;
text-align: center;
display: block;
}
.top_inner {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
}
.top_inner a {
display: block;
padding: 8px 20px;
margin-top: 30px;
border: 1px solid rgb(13, 199, 143);
border-radius: 12px;
min-width: 240px;
}
#menu {
position: fixed;
z-index: 9;
top:0;
left:0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.95);
display: block;
color: #fff;
transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
}
.menu_inner {
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
display:block;
width: 280px;
padding-top: 60px;
text-align: center;
}
.menu_inner h2 {
margin-bottom: 20px;
}
.menu_inner ul {
padding:0;
}
.menu_inner li {
width: 100%;
display: block;
margin-top:20px;
padding: 12px 0;
border-bottom: 1px solid #fff;
}
.suru {
transform: translateY(-100%);
-webkit-transform: translateY(-100%);
}
【jQuery】
$(function() {
$("header span").on("click", function() {
if($(this).text() == "三") {
$(this).text("×");
$("#menu").removeClass("suru");
} else {
$(this).text("三");
$("#menu").addClass("suru");
}
});
});
コメント