.toggle()

JavaScriptの.toggle()で画面右下に追従するフローティングメニュー

2022年9月3日 7分

JavaScriptの .toggle() メソッドを使って、クリックで展開・格納をするフローティングメニューを作ります。

全体的には、JavaScriptのコードで作るのではなく、動きをCSSで作っていくUIです。

かかかず

コード量はCSSが多めの内容になっています。

是非、最後までご覧ください。

.toggle()
フローティングメニューのサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

.toggle()

JavaScriptの.toggle() は要素の表示・非表示を切り替えるメソッドです。

Element.classList.toggle('class名');

classを切り替えるのにも簡単で便利なメソッドで、この記事では、.classList.toggle() を使い、classを追加・削除を行いフローティングメニューを作っています。

フローティングメニューのサンプル

フローティングメニューのサンプルは、この記事の右下にも表示されていますが、実際の動きは以下の動画のようになります。

「＋」で表示されているアイコンをクリックすると、2つのメニューが縦並びで表示されます。そして、「＋」と表示されていたアイコンが、「ー」のアイコンに切り替わるので、再度クリックすることで表示されたメニューがまた非表示になります。

MENU1

MENU2

かかかず

表示されたアイコンの「MENU1」「MENU2」も連動して表示・非表示になります。

実装の手順と方法

コードの解説の前に、サンプルの実装手順と方法について解説していきます。

HTMLを記述

まずは、以下のHTMLタグを任意の場所に記述します。

コードを表示

<div id="floatingMenu" class="notshow">
  <!-- MENU1 -->
  <div class="flObj top">
    <p>MENU1</p>
    <a><i class="fas fa-user"></i></a>
  </div>
  <!-- MENU2 -->
  <div class="flObj middle">
    <p>MENU2</p>
    <a><i class="fas fa-envelope-open-text"></i></a>
  </div>
  <!-- ＋のボタン -->
  <div id="flObgToggle" class="flObj bottom">
    <a></a>
  </div>
</div>

JavaScriptを記述

次に、JavaScriptでSwiperのオプションを記述します。

コードは <body>〜</body>で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

// クリックで処理開始
document.getElementById('flObgToggle').addEventListener('click', () => {
  // 親要素のトグルを操作
  const flWrapper = document.getElementById('floatingMenu');
  flWrapper.classList.toggle('notshow');
});

CSSを記述

最後にCSSを記述して、見た目を整えます。

コードを表示

/*親要素 */
#floatingMenu {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    z-index: 2;
}
/* 子要素 */
.flObj {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 15px;
    transition: all 0.5s ease;
    position: relative;
}
/* 子要素のテキスト */
.flObj p {
    margin: 0;
    background: #FFF;
    padding: 2px 10px 0;
    font-size: 0.85rem;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 12%), 0 2px 3px 0 rgb(0 0 0 / 22%);
    border-radius: 3px;
}
/* 子要素のリンク */
.flObj a {
    background: #6bb6ff;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    box-shadow: 0 0 6px 0 rgb(0 0 0 / 15%), 0 4px 5px 0 rgb(0 0 0 / 22%);
    position: relative;
    font-size: 1.2rem;
}
/* aタグのhover時 */
.flObj.top a:hover, .flObj.middle a:hover {
    opacity: 0.8;
}
/* FontAwesomeアイコンのスタイル */
.flObj a i {
    color: #FFF;
}
/* ＋アイコン */
.flObj.bottom a:before {
    content: "\f068";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: #FFF;
}

/* クリック後の親要素 */
#floatingMenu.notshow {
    gap: 0;
}
/* クリック前の各メニュー */
div#floatingMenu.notshow > .flObj.top, div#floatingMenu.notshow > .flObj.middle {
    gap: 0;
    margin-bottom: -58px;
}
/* クリック前のテキスト */
div#floatingMenu.notshow > .flObj.top p, div#floatingMenu.notshow > .flObj.middle p {
    display: none;
}
/* クリック前のメニューの影 */
div#floatingMenu.notshow > .flObj.top a, div#floatingMenu.notshow > .flObj.middle a {
    box-shadow: 0 0 2px 0 rgb(0 0 0 / 15%), 0 1px 2px 0 rgb(0 0 0 / 22%);
}
/* クリック前のFontawesomeアイコン */
div#floatingMenu.notshow .flObj.bottom a:before {
    content: "\f067";
}

かかかず

これで完成です。

ざっくりとしたコードの解説

コードは、HTML・JavaScript・CSSの3種類です。HTMLは「フローティングメニュー」で、JavaScriptは「フローティングメニューの親要素のclass名の操作」。そして、CSSが「レイアウトと見た目を整えます。」

この3つのコードについて、順に解説していきます。

HTML

HTMLは、「floatingMenu」のid名がつく親要素の中に、「flObj」のclass名を持つ要素がメニューで、全部で3つ入れ子で格納されています。

<div id="floatingMenu" class="notshow">
  <!-- MENU1 -->
  <div class="flObj top">
    <p>MENU1</p>
    <a><i class="fas fa-user"></i></a>
  </div>
  <!-- MENU2 -->
  <div class="flObj middle">
    <p>MENU2</p>
    <a><i class="fas fa-envelope-open-text"></i></a>
  </div>
  <!-- ＋のボタン -->
  <div id="flObgToggle" class="flObj bottom">
    <a></a>
  </div>
</div>

各メニューの要素には、p タグのテキストと a タグのリンクでできていて、a タグにはFontawesomeの i タグを入れています。

JavaScript

JavaScriptjは、「flObgToggle」のid名を持つボタンをトリガーにして .addEventListener のクリックで処理を行います。

処理が開始すると、「floatingMenu」のid名がつく親要素のclass名「notshow」をON・OFFのトグルで付け替えします。

// クリックで処理開始
document.getElementById('flObgToggle').addEventListener('click', () => {
  // 親要素のトグルを操作
  const flWrapper = document.getElementById('floatingMenu');
  flWrapper.classList.toggle('notshow');
});

コードはこれだけで、class名の付け替えを行うトグルに準じて、CSSで見た目の変化を付けていきます。

CSS

CSSは、フローティングメニューのクリック前・後で記述内容が分かれていきます。

各コードはコメントアウトの通りですが、クリック前は親要素「#floatingMenu」に「.notshow」のclass名がついています。

/*親要素 */
#floatingMenu {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    z-index: 2;
}
/* 子要素 */
.flObj {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 15px;
    transition: all 0.5s ease;
    position: relative;
}
/* 子要素のテキスト */
.flObj p {
    margin: 0;
    background: #FFF;
    padding: 2px 10px 0;
    font-size: 0.85rem;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 12%), 0 2px 3px 0 rgb(0 0 0 / 22%);
    border-radius: 3px;
}
/* 子要素のリンク */
.flObj a {
    background: #6bb6ff;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    box-shadow: 0 0 6px 0 rgb(0 0 0 / 15%), 0 4px 5px 0 rgb(0 0 0 / 22%);
    position: relative;
    font-size: 1.2rem;
}
/* aタグのhover時 */
.flObj.top a:hover, .flObj.middle a:hover {
    opacity: 0.8;
}
/* FontAwesomeアイコンのスタイル */
.flObj a i {
    color: #FFF;
}
/* ＋アイコン */
.flObj.bottom a:before {
    content: "\f068";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    color: #FFF;
}

/* クリック後の親要素 */
#floatingMenu.notshow {
    gap: 0;
}
/* クリック前の各メニュー */
div#floatingMenu.notshow > .flObj.top, div#floatingMenu.notshow > .flObj.middle {
    gap: 0;
    margin-bottom: -58px;
}
/* クリック前のテキスト */
div#floatingMenu.notshow > .flObj.top p, div#floatingMenu.notshow > .flObj.middle p {
    display: none;
}
/* クリック前のメニューの影 */
div#floatingMenu.notshow > .flObj.top a, div#floatingMenu.notshow > .flObj.middle a {
    box-shadow: 0 0 2px 0 rgb(0 0 0 / 15%), 0 1px 2px 0 rgb(0 0 0 / 22%);
}
/* クリック前のFontawesomeアイコン */
div#floatingMenu.notshow .flObj.bottom a:before {
    content: "\f067";
}

かかかず

メニューのアイコンは、全てFontAwesomeを使っているので使う場合は本体の読み込みも忘れずするようにしましょう。