【パーツ】ハンバーガー【ショートカット用】

ハンバーガーのアイキャッチ
スポンサーリンク

基本的なハンバーガーアイコン

FontAwesomeを使ったハンバーガーメニュー

See the Pen Untitled by kbyt (@kbo58) on CodePen.

class=”show”とnavのclass=”close”のところに任意のFontAwesomeを入れる。

「閉じるボタン」に変わるハンバーガーアイコンその1

See the Pen クリックで閉じるボタンに変わるハンバーガーメニュー by kbyt (@kbo58) on CodePen.

「閉じるボタン」に変わるハンバーガーアイコンその2

See the Pen Untitled by kbyt (@kbo58) on CodePen.

「閉じるボタン」に変わるハンバーガーアイコンその3

See the Pen クリックで閉じるボタンに変わるハンバーガーメニュー3 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;
}

コメント