２種類のハンバーガーメニュー作成方法
本記事では、カミハヤMAでハンバーガーメニューを作成する２種類それぞれの方法について説明します。
目次
１．はじめに
２．ハンバーガーメニュー作成方法１
３．ハンバーガーメニュー作成方法２
４．最後に
１．はじめに
カミハヤMAのフォームには、LPのメニュースロットを利用することで簡単にハンバーガーメニューを作成することができます。しかし、見栄えなどによりHTMLスロットを利用してオリジナルハンバーガーメニューを作成する方がよい場合もあります。本記事では２種類の方法について説明します。
２．ハンバーガーメニュー作成方法１
まずは、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列としてその中にメニュースロットを設置する必要がでてきます。その場合もデザイン的には少し違和感がでる状況となります。
【メニュー文字が収まらない場合（例）】
【ROW１列にメニュースロット設置の場合（例）】
作成方法１のような制約にとらわれない方法として、HTMLスロットを利用したオリジナルのハンバーガーメニュー作成方法について説明します。
３．ハンバーガーメニュー作成方法２
①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="#">メニュー１</a>
<a href="#">メニュー２</a>
<a href="#">メニュー３</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に変更して動作確認を行います。
手順は以上となります。この作成方法だと次のような制約があります。
文字フォントやメニュー内容の変更、メニュー表示の縦幅サイズの変更などにおいては、コード修正が必要となります。
４．最後に
いかがでしたでしょうか。それぞれの方法においては、一長一短がございますが、個人的見解としてはPCメニューとスマホメニューでは、それぞれ異なるROWSを用意して、スマホ専用のオリジナルハンバーガーメニューを作成いただく方が見栄え的に優れていると思います。ただし、多少のコーディング知識は必要となるのがネックではあります。
フォームボタンは、コンバージョンにも影響を与える要素もあると思いますので、今回の記事を参考に一度、今回ご紹介した作成方法２を試されてみてはいかがでしょうか。
