Skip to content

Instantly share code, notes, and snippets.

@imaizume

imaizume/index.html

Created February 2, 2020 05:55
Show Gist options
  • Save imaizume/fcbe9681fd0ed451c48e1b86e5c25f61 to your computer and use it in GitHub Desktop.
Save imaizume/fcbe9681fd0ed451c48e1b86e5c25f61 to your computer and use it in GitHub Desktop.
Download ZIP
ボタンによるメニュー表示と非表示切り替えのサンプル
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>sample</title>
<style>
// .hidden { display: none; } // [A] 用
.hidden2 { display: none; } // [B] 用
#content {
background: #fff;
padding-top: 20px;
}
#menu {
background: #eee;
position: fixed;
bottom: 0;
left: 0;
right: 0;
top:0;
// height: 100%;
// width: 100%;
}
#button {
position: fixed;
right: 20px;
top: 20px;
}
li {
list-style: none;
}
p {
font-size: 20px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- ページ内に表示するメインのコンテンツ -->
<div id="content">
<p>
Ipsum sint ipsum debitis atque cupiditate saepe rerum. Deleniti vel voluptate quis cum deserunt. Reiciendis asperiores repellendus porro aliquam ipsam unde! Mollitia eligendi ipsam sapiente cum optio deleniti quam tenetur
</p>
<p>
Ipsum sint ipsum debitis atque cupiditate saepe rerum. Deleniti vel voluptate quis cum deserunt. Reiciendis asperiores repellendus porro aliquam ipsam unde! Mollitia eligendi ipsam sapiente cum optio deleniti quam tenetur
</p>
<p>
Ipsum sint ipsum debitis atque cupiditate saepe rerum. Deleniti vel voluptate quis cum deserunt. Reiciendis asperiores repellendus porro aliquam ipsam unde! Mollitia eligendi ipsam sapiente cum optio deleniti quam tenetur
</p>
<p>
Ipsum sint ipsum debitis atque cupiditate saepe rerum. Deleniti vel voluptate quis cum deserunt. Reiciendis asperiores repellendus porro aliquam ipsam unde! Mollitia eligendi ipsam sapiente cum optio deleniti quam tenetur
</p>
<p>
Ipsum sint ipsum debitis atque cupiditate saepe rerum. Deleniti vel voluptate quis cum deserunt. Reiciendis asperiores repellendus porro aliquam ipsam unde! Mollitia eligendi ipsam sapiente cum optio deleniti quam tenetur
</p>
<p>
Ipsum sint ipsum debitis atque cupiditate saepe rerum. Deleniti vel voluptate quis cum deserunt. Reiciendis asperiores repellendus porro aliquam ipsam unde! Mollitia eligendi ipsam sapiente cum optio deleniti quam tenetur
</p>
</div>
<!-- ボタンを押したら出てきたり消えたりするメニュー -->
<div id="menu" class="hidden hidden2">
<ul>
<li>TOP</li>
<li>ABOUT</li>
<li>HELP</li>
</ul>
</div>
<!-- クリックできるメニューボタン -->
<div id="button">ボタン</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></body>
<script>
$("#button").click(function() {
// [A] 0sで表示を切り替える
// $("#menu").toggleClass("hidden");
// [B] フェードイン・アウトで表示を切り替える
const speed = 500;
if ($("#menu").hasClass("hidden2")) {
// 表示されていない -> 表示する
$("#menu").fadeIn(speed, function(){
$("#menu").removeClass("hidden2")
});
} else {
// 表示されている -> 消す
$("#menu").fadeOut(speed, function() {
$("#menu").addClass("hidden2")
});
}
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment