グローバルナビゲーション（メニュー開閉）

2023.06.11

クリックしたらナビが出現（上から下、下から上、左から右、右から左）

jQueryを使い、ボタンをクリックしたら、ボタンとナビゲーションにそれぞれクラスを付与。クラスが付与されたらCSSのアニメーションを使ってボタンに開閉のアイコン変化の動きをつけ、ナビゲーションは位置をずらしてスライドさせる。

クリックしたらナビが上から下に出現する

See the Pen グロナビ（上から下） by Toru Katsumata (@Toru-Katsumata) on CodePen.

クリックしたらナビが下から上に出現する

#g-navi{
  position: fixed;
  z-index: 999;
  /* ナビのスタート位置と形状 */
  bottom: -120%;
  left: 0;
  width: 100%;
  height: 100vh; /* ナビの高さ */
  background: #999;
  transition: all 0.6s; /* 動き */
}

/* アクティブクラスが付いたら位置を0に */
#g-navi.panelactive{
  bottom: 0;
}

クリックしたらナビが左から右に出現する

#g-navi{
  position: fixed;
  z-index: 999;
  /* ナビのスタート位置と形状 */
  top: 0;
  left: -120%;
  width: 100%;
  height: 100vh; /* ナビの高さ */
  background: #999;
  transition: all 0.6s; /* 動き */
}

/* アクティブクラスが付いたら位置を0に */
#g-navi.panelactive{
  left: 0;
}

クリックしたらナビが右から左に出現する

#g-navi{
  position: fixed;
  z-index: 999;
  /* ナビのスタート位置と形状 */
  top: 0;
  right: -120%;
  width: 100%;
  height: 100vh; /* ナビの高さ */
  background: #999;
  transition: all 0.6s; /* 動き */
}

/* アクティブクラスが付いたら位置を0に */
#g-navi.panelactive{
  right: 0;
}

クリックしたら背景が前面に広がる

jQueryを使い、ボタンをクリックしたら、ボタンとナビゲーションにそれぞれクラスを付与。
クラスが付与されたらCSSのアニメーションを使ってボタンに開閉のアイコン変化の動きをつけ、ナビゲーションの背景を透過状態から不透明へ変更、ボックスの重なりを最背面から最前面に移動して出現させる。

See the Pen グロナビ（背景が前面に） by Toru Katsumata (@Toru-Katsumata) on CodePen.

クリックしたら円形背景が拡大

jQueryを使い、ボタンをクリックしたら、ボタン、ナビゲーション、円形背景用の<div>にそれぞれクラスを付与。
クラスが付与されたらCSSのアニメーションを使ってボタンに開閉のアイコン変化の動きをつけ、円形背景用の<div>には円形の背景が拡大する動きをつけ、ナビゲーションのリストは背景が広がった後、少し遅らせて出現させる。

円形背景が上から拡大する

See the Pen メニュー開閉（円形背景／上） by Toru Katsumata (@Toru-Katsumata) on CodePen.

円形背景が下から拡大する

/* .circle-bg内の丸のスタート位置を差し替える（他プロパティは省略） */
.circle-bg{
  bottom: -50px;
  /* 50%から円の半径を引いた値 */
  left: calc(50% - 50px);
}

円形背景が右から拡大する

/* .circle-bg内の丸のスタート位置を差し替える（他プロパティは省略） */
.circle-bg{
  right: -50px;
  /* 50%から円の半径を引いた値 */
  top: calc(50% - 50px);
}

円形背景が左から拡大する

/* .circle-bg内の丸のスタート位置を差し替える（他プロパティは省略） */
.circle-bg{
  left: -50px;
  /* 50%から円の半径を引いた値 */
  top: calc(50% - 50px);
}

円形背景が右上から拡大する

/* .circle-bg内の丸のスタート位置を差し替える（他プロパティは省略） */
.circle-bg{
  right: -50px;
  top: -50px;
}

円形背景が右下から拡大する

/* .circle-bg内の丸のスタート位置を差し替える（他プロパティは省略） */
.circle-bg{
  right: -50px;
  bottom: -50px;
}

円形背景が左上から拡大する

/* .circle-bg内の丸のスタート位置を差し替える（他プロパティは省略） */
.circle-bg{
  left: -50px;
  top: -50px;
}

円形背景が左下から拡大する

/* .circle-bg内の丸のスタート位置を差し替える（他プロパティは省略） */
.circle-bg{
  left: -50px;
  bottom: -50px;
}

円形背景が中央から拡大する

/* .circle-bg内の丸のスタート位置を差し替える（他プロパティは省略） */
.circle-bg{
  /* 50%から円の半径を引いた値 */
  top: calc(50% - 50px);
  left: calc(50% - 50px);
}

クリックしたらナビ背景コンテンツがぼかされる

jQueryを使い、ボタンをクリックしたら、ボタンとナビゲーション、ぼかしたいエリアにそれぞれクラスを付与。
クラスが付与されたらCSSのアニメーションを使ってボタンに開閉のアイコン変化の動きをつけ、ナビゲーションの背景を透過状態から不透明へ変更、ボックスの重なりを最背面から最前面に移動して出現させる。
ぼかしたいエリアにはCSSのblurでぼかしを入れる。

See the Pen ナビ背景のぼかし by Toru Katsumata (@Toru-Katsumata) on CodePen.

追従メニューの現在地ハイライト

現在地を表示させたいエリアのHTMLには同じ名前のクラス名を付与。
jQueryでエリアにつけられたクラス名のn番目～m番目までをスクロールしている間は、追従メニューの<li>のn番目に現在地クラスをつける。
CSSのposition: fixed;でメニューを固定しているため、クラス名からクラス名までの距離をjQueryで計算する際には、追従メニュー分の高さを引く。

See the Pen 追従メニューの現在地ハイライト by Toru Katsumata (@Toru-Katsumata) on CodePen.

inserted by FC2 system