基本的なハンバーガーアイコン
FontAwesomeを使ったハンバーガーメニュー
See the Pen Untitled by kbyt (@kbo58) on CodePen.
class=”show”とnavのclass=”close”のところに任意のFontAwesomeを入れる。
「閉じるボタン」に変わるハンバーガーアイコンその１
See the Pen クリックで閉じるボタンに変わるハンバーガーメニュー by kbyt (@kbo58) on CodePen.
「閉じるボタン」に変わるハンバーガーアイコンその２
See the Pen Untitled by kbyt (@kbo58) on CodePen.
「閉じるボタン」に変わるハンバーガーアイコンその３
See the Pen クリックで閉じるボタンに変わるハンバーガーメニュー３ by kbyt (@kbo58) on CodePen.
「閉じるボタン」に変わるハンバーガーアイコンその4
See the Pen Untitled by kbyt (@kbo58) on CodePen.
ボタンの円の色を変える場合は色を指定して任意の色にする。
@-webkit-keyframes round{
0% {
border-color: transparent;
-webkit-transform: translate(-50%, -50%) rotate(0);
}
25% {
border-color: transparent #000 transparent transparent;
}
50% {
border-color: transparent #fc2 #fc2 transparent;
}
75% {
border-color: transparent #fc2 #fc2 #fc2;
}
100% {
border-color: #000;
-webkit-transform: translate(-50%, -50%) rotate(-680deg);
}
}「閉じるボタン」に変わるハンバーガーアイコンその5
See the Pen Untitled by kbyt (@kbo58) on CodePen.
「閉じるボタン」に変わるハンバーガーアイコンその6
See the Pen Untitled by kbyt (@kbo58) on CodePen.
メニューの登場バリエーション
フェードインでメニューが出る
See the Pen Untitled by kbyt (@kbo58) on CodePen.
上からメニューが出る
See the Pen Untitled by kbyt (@kbo58) on CodePen.
出てくる方向は#navの方向と値で変更
/* ナビメニュー */
#nav{
background-color: #ddd;
/**********/
/* 略 */
/**********/
top: -150%; /* 出てきて欲しい方向をここのプロパティに指定 */
transition: .5s;
overflow-y: scroll;
}上の#navに.activeクラスが付いた箇所と合わせる。
/* ナビメニューにactiveクラスが着いた時 */
#nav.active{
top: 0; /* 方向をnavで設定したとこと合わせる */
}
右からメニューが出る
See the Pen Untitled by kbyt (@kbo58) on CodePen.
半分までメニューが出る
See the Pen スタンダードなハンバーガーメニュー by kbyt (@kbo58) on CodePen.
背景がぼやけるメニュー
See the Pen Untitled by kbyt (@kbo58) on CodePen.
準備としては背景をぼかすのにHTMLでナビ以外のコンテンツを囲う。bodyにつけると全てぼやけるので注意。
<!-- ハンバーガーメニュー -->
<div class="burger" id="show">
<div></div>
<div></div>
<div></div>
</div>
<!-- ナビメニュー -->
<nav id="nav">
<ul class="nav-menu">
<li class="nav-title">Menu</li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>
<div class="blur">
<!--ここにコンテンツを書く>
</div>背景のぼかし具合は以下のクラス(jQueryで付ける用)の値で変更。
.add-blur{ /* クラス名は任意 */
filter: blur(6px); /* ここの値でぼかし具合を変える */
transition: .4s;
}
コメント