私自身のメモとしてウェブ系カテゴリも今後追加していきます。
最近ページの少ないサイトはもちろん、LPでもハンバーガーメニュー内のリンク先がページ遷移ではなく、ページ内リンクへ遷移させる案件が個人的に重なりましたのでメモとして残しておこうと思います。
ついでによく使うヘッダ固定とCSSのみで実装できるモーダル機能も追加しました。
LPなんかでよく使います。
DEMO
今回のハンバーガーメニューはフルスクリーンにしました。
ハンバーガーメニューの実装（ページ内リンク）
HTML
<div class="fullscreenmenu"> <div id="nav"> <ul> <li><a href="#menu01">ページ内のみどりへ</a></li> <li><a href="#menu02">ページ内のきいろへ</a></li> <li><a href="#menu03">ページ内のむらさきへ</a></li> <li><a href="#menu04">ページ内のぴんくへ</a></li> </ul> </div> <button class="menu"><span></span><span></span><span></span></button> </div>
CSS
.menu, .menu span {
display: inline-block;
-webkit-transition: all .4s;
transition: all .4s;
box-sizing: border-box;
}
.menu {
position: fixed;
top: 20px;
left: 25px;
width: 35px;
height: 22px;
z-index: 10;
}
.menu span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: #000;
z-index: 10;
}
.menu span:nth-of-type(1) {
top: 0px;
}
.menu span:nth-of-type(2) {
top: 10px;
}
.menu span:nth-of-type(3) {
bottom: 0px;
}
.menu.active span:nth-of-type(1) {
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
.menu.active span:nth-of-type(2) {
opacity: 0;
}
.menu.active span:nth-of-type(3) {
-webkit-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}
#nav {
position: fixed;
top: 0;
right: 0;
z-index: 10;
width: 100%;
height: 100vh;
opacity: 0;
background-color: #fff;
transition: all 0.3s ease-in-out;
visibility: hidden;
}
#nav.active {
right: 0;
opacity: 1;
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
visibility: visible;
}
#nav ul {
margin: 20px 0;
padding: 20px 0;
}
#nav ul li {
list-style-type: none;
}
#nav ul li a {
display: block;
padding: 20px 0;
transition: all 0.2s ease-in-out;
text-align: center;
text-decoration: none;
color: #333;
}
#nav ul li a:hover {
color: #f65d5d;
}
Js
$(function () {
$('.menu').on('click', function () {
$(this).toggleClass('active');
$("#nav").toggleClass('active');
})
}) $(function () {
$('#nav a').on('click', function () {
$('#nav').toggleClass('active');
$(".menu").toggleClass('active');
})
});
CSSのみでできるモーダルの実装
モーダルウィンドウでよく使わせてもらうのがCSSのみで実装できる「Pure CSS modal」です。
実装は本当に簡単です。
以下からデータをダウンロードします。
https://github.com/jorgechavz/pure-css-modal
cssを読み込む
<link rel="stylesheet" href="css/modal.css">
モーダル部分
<div class="modal"> <input id="modal-trigger" class="checkbox" type="checkbox">
<div class="modal-overlay"> <label for="modal-trigger" class="o-close"></label>
<div class="modal-wrap"> <label for="modal-trigger" class="close">✖</label>
<h2>タイトル</h2>
<p>テキストが入ります。</p>
</div>
</div>
</div>
モーダルを開く部分
<label for="modal-trigger">テキスト</label>
今回は２つ（複数）設置しました。
modal-triggerに数字をつければ実装できます！
さらに細かい実装が紹介されているすばらしい記事はこちらをご参照ください！
https://sakic.jp/blog/web/pure-css-modal
おすすめのjQuery参考書はこちら！
posted with ヨメレバ
西畑一馬 アスキー・メディアワークス 2013年03月
