ブログ

MAをこれから勉強したい人からカミハヤユーザーまで、
役に立つ情報のご紹介です。

カミハヤMA
2022.08.19

2種類のハンバーガーメニュー作成方法

本記事では、カミハヤMAでハンバーガーメニューを作成する2種類それぞれの方法について説明します。

 

目次
 
 1.はじめに
 2.ハンバーガーメニュー作成方法1
 3.ハンバーガーメニュー作成方法2
 4.最後に 

1.はじめに

カミハヤMAのフォームには、LPのメニュースロットを利用することで簡単にハンバーガーメニューを作成することができます。しかし、見栄えなどによりHTMLスロットを利用してオリジナルハンバーガーメニューを作成する方がよい場合もあります。本記事では2種類の方法について説明します。

2.ハンバーガーメニュー作成方法1

まずは、LPのメニュースロットを利用してハンバーガーメニューを作成方法です。
次のような手順で作成していきます。

①LPビルダーでROWSの中へMENUスロットをドラッグ&ドロップします。
②CONTENT PROPERTIESのConfigure menu itemsに対して、Text,Url,Titleそれぞれに対してメニュー内容を設定します。


【Configure menu items設定画面例】
 

③1番目のメニューは作成できましたので、1番目のメニュー作成と同様に行います。
④Mobile menuのトグルスイッチをONにします。
⑤画面左上にあるプレビューをPCからMobileに変更します。
⑤Align Mobileでハンバーガーメニューを表示させる場所を左寄せ、中央寄せ、右寄せの中から選択します。

手順は以上となります。この作成方法だと次のような制約があります。
・ROWが複数列ある場合、メニュースロットを設置した列の幅にメニュー文字が収まらない場合、折返し表示されデザイン的によろしくない状況となります。
このような制約があるため、ROWを1列としてその中にメニュースロットを設置する必要がでてきます。その場合もデザイン的には少し違和感がでる状況となります。

【メニュー文字が収まらない場合(例)】
 


【ROW1列にメニュースロット設置の場合(例)】
 


作成方法1のような制約にとらわれない方法として、HTMLスロットを利用したオリジナルのハンバーガーメニュー作成方法について説明します。

3.ハンバーガーメニュー作成方法2

①LPビルダーで2列デザインのROWSを画面上にドラッグ&ドロップします。
②右側の列に対して、HTMLスロットをドラッグ&ドロップします。
②HTMLスロットへ次の内容を設定します。

【サンプルコード】

<div class="hamburger-menus">

  <a href="#sidemenu" class="hamburger-menu">

    <div></div>

    <div></div>

    <div></div>

  </a>

  <div id="sidemenu" class="sidenavs">

    <a href="#" class="close-btn">✕</a>

    <a href="#">メニュー1</a>

    <a href="#">メニュー2</a>

    <a href="#">メニュー3</a>

  </div>

</div>

<style>

  .hamburger-menus {

    margin-left: 20px;

    margin-top: 20px;

  }

  .hamburger-menu div {

    width: 35px;

    height: 5px;

    background-color: #000;

    margin: 6px 0;

  }

  .hamburger-menu+.sidenavs:target {

    overflow-y: visible;

    /* ボックスからはみ出る箇所をそのまま表示 */

    width: 100%;

    display: block;

  }

  .sidenavs:target {

    overflow-y: hidden;

    /* ボックスからはみ出る箇所を隠す */

    width: 0;

  }

  /* ハンバーガーメニュー表示時 */

  .sidenavs {

    height: 50%;

    width: 0;

    position: fixed;

  /* 画像の配置を指定 */

    z-index: 1;

    left: 0;

    top: 0;

    background-color: black;

    overflow-y: hidden;

 

  /* 横スクロールを無効にする */

    padding-top: 60px;

    transition: 0.5s;

      /* アニメーションの時間を0.5秒に指定 */

      }

      /* ハンバーガーメニュー表示時のリンク */

    .sidenavs a {

    padding: 8px 8px 8px 32px;

    text-decoration: none;

    font-size: 26px;

    color: #818181;

    display: block;

    transition: 0.3s;

  /* アニメーションの時間を0.3秒に指定 */

    font-weight: bold;

    }

  /* マウスオーバー後のリンク */

    .sidenavs a:hover {

    color: white;

    }

  /* クローズボタン */

    .sidenavs .close-btn {

    position: absolute;

  /* 親要素との絶対位置を指定 */

    top: 0;

    right: 25px;

    font-size: 32px;

    margin-left: 50px;

    }

  @media only screen and (max-width: 600px) {

    .hamburger-menus {

    margin-left: 0px;

    margin-top: 25px;

    }

    .hamburger-menu div {

    width: 20px;

    height: 3px;

    background-color: #000;

    margin: 4px 0;

    }

    .sidenavs a {

    font-size: 15px;

    }

  }

</style>

③メニューの数と遷移先ページのURLに従い設定を修正します。
④画面左上にあるプレビューをPCからMobileに変更して動作確認を行います。

手順は以上となります。この作成方法だと次のような制約があります。
文字フォントやメニュー内容の変更、メニュー表示の縦幅サイズの変更などにおいては、コード修正が必要となります。

4.最後に

いかがでしたでしょうか。それぞれの方法においては、一長一短がございますが、個人的見解としてはPCメニューとスマホメニューでは、それぞれ異なるROWSを用意して、スマホ専用のオリジナルハンバーガーメニューを作成いただく方が見栄え的に優れていると思います。ただし、多少のコーディング知識は必要となるのがネックではあります。
フォームボタンは、コンバージョンにも影響を与える要素もあると思いますので、今回の記事を参考に一度、今回ご紹介した作成方法2を試されてみてはいかがでしょうか。

カミハヤの製品ラインナップ

複数製品を組み合わせてのご利用も可能です。詳細はお気軽にお問い合わせください。

カミハヤCMS

カミハヤCMS

オープンソースCMS Drupalとローコードソリューション“サイトスタジオ”の活用により、工数を抑えて、素早くサイトを立ち上げることができます。

もっと見る
カミハヤMA

カミハヤMA

直感的で使いやすい管理画面、ノーコード。技術者無しでも素早くキャンペーンを始められる、BtoB向けマーケティングオートメーションツールです。

もっと見る
カミハヤSEO

カミハヤSEO

オープンソースCMS Drupalとローコードソリューション“サイトスタジオ”の活用により、工数を抑えて、素早くサイトを立ち上げることができます。

もっと見る
カミハヤMAトライアルキャンペーン実施中! MAトライアルのお申込み
資料ダウンロード
資料ダウンロード
お問い合わせ
お問い合わせ
よくあるご質問
よくあるご質問