Divi＆Anime.jsでよろめきアニメーションハンバーガーメニューを作成する方法

公開: 2021-02-17

これまで、DiviとDivi ThemeBuilderで作成できるさまざまなタイプのヘッダーを共有してきました。実際のところ、このナビゲーション投稿にリストされているすべてのチュートリアルを見つけることができます。その投稿では、フルスクリーンヘッダーを作成する方法を紹介しましたが、ヘッダーデザインをさらに発展させるために、カスタムアニメーションのハンバーガーメニューを作成する方法も紹介します。私たちが作成するハンバーガーメニューには、いくつかの注目すべき点があります。

訪問者がハンバーガーアイコンをクリックするとすぐに、フルスクリーンヘッダーが遷移し、各メニュー項目が1つずつ表示され、カスタムアニメーションのルックアンドフィールが提供されます。
メニューを開くたびにカスタムアニメーションがトリガーされます
メインメニュー項目にドロップダウン項目を追加することもできます。これらはクリックすると開き、誰かがメニューを閉じるかナビゲーション項目をクリックするとすぐに自動的に閉じます。

言い換えれば、これは間違いなく、その高度なルックアンドフィールをWebサイトに追加するのに役立つヘッダーチュートリアルです。アイテムのスタイルを自由に設定でき、JSONテンプレートファイルを無料でダウンロードできます。

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

ハンバーガーメニュー

モバイル

ハンバーガーメニュー

グローバルヘッダーテンプレートを無料でダウンロード

無料のグローバルヘッダーテンプレートを入手するには、まず下のボタンを使用してそれらをダウンロードする必要があります。ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

1.新しいヘッダーテンプレートを作成します

Diviテーマビルダーに移動し、新しいグローバルヘッダーテンプレートを追加します

まず、Diviテーマビルダーに移動します。そこで、新しいグローバルヘッダーを追加します。

ハンバーガーメニュー

ゼロから構築を開始

そして、ヘッダーデザインの構築を最初から始めます。

ハンバーガーメニュー

2.ロゴとハンバーガーアイコンを作成する

セクション設定

背景色

テンプレートエディタに入ったら、ロゴとハンバーガーアイコンを作成することから始めます。そこにはすでにセクションがあることに気付くでしょう。セクション設定を開き、透明な背景色を適用します。

背景色：rgba（255,255,255,0）

ハンバーガーメニュー

間隔

セクションの[デザイン]タブに移動し、次にデフォルトの上下のパディングをすべて削除します。

トップパディング：0px
ボトムパディング：0px

ハンバーガーメニュー

ポジション

次に、詳細に移動し、セクションを固定します。

位置：固定
場所：左上
Zインデックス：13

ハンバーガーメニュー

新しい行を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

ハンバーガーメニュー

サイジング

モジュールをまだ追加せずに、行設定を開き、[デザイン]タブに移動して、それに応じてサイズ設定を変更します。

カスタムガター幅を使用：はい
側溝幅：1
列の高さを等しくする：はい
幅：95％
最大幅：100％

ハンバーガーメニュー

間隔

次に、デフォルトの上下のパディングをすべて削除します。

トップパディング：0px
ボトムパディング：0px

ハンバーガーメニュー

主な要素CSS

また、ロゴとハンバーガーアイコンの両方が小さい画面サイズで隣り合って表示されるようにするために、行のメイン要素に1行のCSSコードを挿入します。

display: flex;

ハンバーガーメニュー

列1に画像モジュールを追加

ロゴをアップロード

列1の画像モジュールから始めて、モジュールを追加します。選択したロゴをアップロードします。

ハンバーガーメニュー

サイジング

[デザイン]タブに移動し、次にサイズ設定を変更します。

最大幅：
- デスクトップ：80px
- タブレットと電話：50px

ハンバーガーメニュー

ポジション

次に、モジュール全体を再配置します。

位置：絶対
場所：左上
垂直オフセット：20px

ハンバーガーメニュー

列3にテキストモジュールを追加

コンテンツボックスのHTML構造

3番目の列では、テキストモジュールを追加します。このテキストモジュールを使用して、ハンバーガーアイコンを作成します。コンテンツボックスのテキストタブに切り替えて、次のHTMLタグを挿入することから始めます。

<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>

ハンバーガーメニュー

サイジング

次に、モジュールのサイズ設定を変更します。

幅：80px
高さ：80px

ハンバーガーメニュー

間隔

次に、さまざまな画面サイズにカスタムパディング値を適用します。

トップパディング：
- デスクトップ：10px
- タブレットと電話：17px
ボトムパディング：
- デスクトップ：10px
- タブレットと電話：17px
左パディング：
- デスクトップ：15px
- タブレットと電話：30px
右パディング：
- デスクトップ：15px
- タブレットと電話：10px

ハンバーガーメニュー

ポジション

このモジュールも再配置します。

位置：絶対
場所：左上隅

ハンバーガーメニュー

3.ハンバーガーメニューを作成します

新しいセクションを追加

グラデーションの背景

ロゴとハンバーガーアイコンが配置されたので、ハンバーガーメニューとそのすべてのアイテムの作成に専念する次の部分に進むことができます。新しいセクションを追加することから始め、セクション設定を開き、グラデーションの背景を適用します。

色1：＃000000
カラー2：＃111111
グラデーションタイプ：線形
グラデーション方向：90度
開始位置：50％
終了位置：50％

ハンバーガーメニュー

サイジング

次に、最小の高さと最大の高さをサイズ設定に適用します。

最小高さ：100vh
最大高さ：100vh

ハンバーガーメニュー

間隔

次に、デフォルトのセクションの上部と下部のパディングをすべて削除します。

トップパディング：0px
ボトムパディング：0px

ハンバーガーメニュー

オーバーフロー

オーバーフローも変更します。

水平オーバーフロー：非表示
垂直オーバーフロー：自動

ハンバーガーメニュー

ポジション

メニューをいつでも開くことができるように、[詳細設定]タブのセクションの位置を変更します。

位置：固定
ロケーショントップセンター

ハンバーガーメニュー

新しい行を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

ハンバーガーメニュー

サイジング

モジュールをまだ追加せずに、行設定を開き、[デザイン]タブに移動して、次のようにサイズ設定を変更します。

カスタムガター幅を使用：はい
側溝幅：1
列の高さを等しくする：はい
幅：100％
最大幅：100％

ハンバーガーメニュー

間隔

次に、デフォルトの上下のパディングをすべて削除します。

トップパディング：0px
ボトムパディング：0px

ハンバーガーメニュー

オーバーフロー

次に、[詳細設定]タブに移動し、オーバーフローを変更します。

水平オーバーフロー：非表示
垂直オーバーフロー：自動

ハンバーガーメニュー

ポジション

行も再配置します。

位置：絶対
ロケーショントップセンター

ハンバーガーメニュー

列1の設定

間隔

次に、行の列1の設定を開き、カスタムレスポンシブパディング値を適用します。

トップパディング：
- デスクトップ：24vh
- タブレットと電話：10vh
ボトムパディング：
- デスクトップ：24vh
- タブレットと電話：5vh
左パディング：13％
右パディング：13％

ハンバーガーメニュー

国境

いくつかの境界設定も適用します。

右ボーダー幅：
- デスクトップ：2px
- タブレットと電話：0px \
右ボーダーの色：＃191919
ボトムボーダー幅：
- デスクトップ：0px
- タブレットと電話：2px
右ボーダーの色：＃191919

ハンバーガーメニュー

列2の設定

間隔

次に、列2に移動し、そこにもいくつかのカスタムパディング値を適用します。

トップパディング：
- デスクトップ：24vh
- タブレットと電話：5vh
ボトムパディング：
- デスクトップ：24vh
- タブレットと電話：5vh
左パディング：13％
右パディング：13％

ハンバーガーメニュー

テキストモジュール＃1を列1に追加します

H3コンテンツを追加する

1列目の最初のテキストモジュールから始めて、モジュールを追加します。選択したH3コンテンツをいくつか追加します。

ハンバーガーメニュー

H3テキスト設定

[デザイン]タブに移動し、H3テキスト設定を次のように変更します。

見出し3フォント：Montserrat
見出し3フォントの太さ：超太字
見出し3フォントスタイル：大文字
見出し3のテキストの色：#ffffff
見出し3のテキストサイズ
- デスクトップ：1vw
- タブレット：2.5vw
- 電話：3.5vw
見出し3文字の間隔：5px

ハンバーガーメニュー

間隔

次に下マージンを追加します。

下マージン：5vh

ハンバーガーメニュー

テキストモジュールのクローンを作成し、列2に複製を配置します

この最初のモジュールを完了したら、それを1回クローンして、複製を列2に配置できます。

ハンバーガーメニュー

コンテンツの変更

この重複モジュールの内容を必ず変更してください。

ハンバーガーメニュー

テキストモジュール＃2を列2に追加します

コンテンツボックスのHTML構造

サブメニュー項目を含むメニュー項目を紹介するために、新しいテキストモジュールのテキストタブを使用します。先に進み、新しいテキストモジュールを列1に追加して、次のHTMLを挿入します。

<span style="color: #686868;">01—</span> <a href="#">Services</a> <span class="toggle-sub-menu" style="color: #ffff00;">+</span>
<ul>
	<li><a href="#">Web design</a></li>
	<li><a href="#">Branding</a></li>
</ul>

ハンバーガーメニュー

テキスト設定

モジュールの[デザイン]タブに移動し、次のようにテキスト設定を変更します。

テキストフォント：Montserrat
テキストフォントの太さ：薄い
テキストの色：#ffffff
文字サイズ：
- デスクトップ：2.7vw
- タブレット：4vw
- 電話：6vw
テキスト文字の間隔：0.1em
テキスト行の高さ：1em

ハンバーガーメニュー

リンクテキスト設定

リンクテキストの色も変更します。

林のテキストの色：#ffffff

ハンバーガーメニュー

順序付けられていないリストテキスト設定

次に、順序なしリストのテキスト設定を変更します。

順序付けられていないリストフォント：Montserrat
順序付けられていないリストのフォントの太さ：太字
順序なしリストのフォントスタイル：大文字
順序付けられていないテキストサイズ：
- デスクトップ：1vw
- タブレット：2.5vw
- 電話：3.5vw
順序付けられていないリスト行の高さ：1.5em
順序なしリストスタイルタイプ：なし
順序付けられていないリストスタイルの位置：内側

ハンバーガーメニュー

間隔

そして、カスタムの上部と下部のパディングを追加して、モジュール設定を完了します。

トップパディング：5％
ボトムパディング：5％

ハンバーガーメニュー

サブメニューなしでバリエーションを作成するためのテキストモジュールのクローン作成

最初のモジュールを完了したら、一度クローンを作成できます。この複製を使用して、サブメニュー項目のないメニュー項目のバリエーションを作成します。

ハンバーガーメニュー

サブメニューを省略してアイコンを切り替えます

この重複モジュールをサブメニュー項目のない通常のメニュー項目に変換するには、代わりに次のHTML構造を使用します。

<span style="color: #686868;">03—</span> <a href="#">Contact</a>

ハンバーガーメニュー

両方のタイプのメニュー項目を再利用する

メニュー項目の両方のバリエーションを配置したら、それらを複製してコンテンツを変更することにより、それに応じて両方を再利用できます。

ハンバーガーメニュー

テキストモジュール＃2を列2に追加します

H4と段落のコンテンツをコンテンツボックスに追加する

2列目には、選択したH4と段落のコンテンツを含む別のテキストモジュールを追加します。

ハンバーガーメニュー

テキスト設定

[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

テキストフォント：Alata
テキストの色：#cecece
文字サイズ：
- デスクトップ：0.8vw
- タブレット：2.4vw
- 電話：3.4vw
テキスト文字の間隔：1px
テキスト行の高さ：1.5em
テキストの色：明るい

ハンバーガーメニュー

H4テキスト設定

H4テキスト設定にもいくつか変更を加えます。

見出し4テキストサイズ：
- デスクトップ：1vw
- タブレット：3vw
- 電話：4vw

ハンバーガーメニュー

サイジング

次に、サイズ設定でモジュールの幅を変更します。

幅：48％

ハンバーガーメニュー

主な要素CSS

そして、モジュールのメイン要素に1行のCSSコードを追加します。このCSSコードの行は、2つのテキストモジュールを並べて配置するのに役立ちます。

display: inline-block;

ハンバーガーメニュー

クローンテキストモジュール＃2

コピーの変更

テキストモジュールが完成したら、一度クローンを作成し、それに応じてコンテンツを変更できます。

ハンバーガーメニュー

ソーシャルメディアフォローモジュールを列2に追加

選択したソーシャルネットワークを追加する

この設計で必要な最後のモジュールは、列2のソーシャルメディアフォローモジュールです。選択したソーシャルネットワークを追加します。

ハンバーガーメニュー

各ソーシャルネットワークの背景色を個別に削除します

各ソーシャルネットワークの背景色を個別に削除します。

ハンバーガーメニュー

間隔

次に、一般的なモジュール設定に戻り、上部マージンを適用します。

トップマージン：5vh

ハンバーガーメニュー

4.機能を追加する

CSSクラスをハンバーガーアイコンテキストモジュールに追加する

ハンバーガーメニューデザインの基盤が構築されたので、機能の追加に集中できます。最初に行う必要があるのは、ハンバーガーアイコンを含むテキストモジュールを開き、次のCSSクラスを追加することです。

CSSクラス：全幅オープン

ハンバーガーメニュー

セクション2にCSSクラスを追加する

次に、ハンバーガーメニューセクションのセクション＃2を開き、次のCSSクラスを追加します。

CSSクラス：全幅メニュー

ハンバーガーメニュー

全幅メニューの各モジュールにCSSクラスを追加する

カスタムのよろめきアニメーション効果を作成するには、セクション2の各モジュールに次のCSSクラスを適用する必要があります。

CSSクラス：よろめき効果

ハンバーガーメニュー

メニュー項目にCSSクラスを追加する

列1の各メニュー項目にも「main-menu-item」と呼ばれるCSSクラスを追加します。

CSSクラス：よろめき効果のメインメニュー項目

ハンバーガーメニュー

セクション＃1にコードモジュールを追加する

この機能を適用するには、カスタムCSSとJQueryコードを使用します。このコードを、セクション＃1の行の2番目の列にある新しいコードモジュールに配置します。

ハンバーガーメニュー

CSSコードを挿入

以下の印刷画面でわかるように、次のCSSコードをスタイルタグ間のコードモジュールに追加します。

/* enable class below once you're done editing the menu */

/*
.fullwidth-menu {
opacity: 0;
top: 0vh;
visibility: hidden;
}
*/

.line{
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.fullwidth-open.open .line{
background: white; 
}

.line-1 {
top: 15px;    
}
  
.line-2 {
top: 25px;
width: 80%;
}
 
.line-3 {
top: 35px;
width: 50%;
}
 
.fullwidth-open.open .line-1 {
top: 25px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
 
.fullwidth-open.open .line-2 {
display: none;
}
 
.fullwidth-open.open .line-3 {
top: 25px;
width: 100%;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
 
.fullwidth-menu-open {
opacity: 1 !important;
top: 0 !important;
visibility: visible !important;
}
 
.fullwidth-menu {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}
  
.main-menu-item ul {
display: none; 
padding: 0;
margin-top: 50px;
}
  
.toggle-sub-menu {
cursor: pointer;
}

ハンバーガーメニュー

Anime.jsライブラリを挿入します

以下の印刷画面に表示されているように、スクリプトタグを使用してAnimeJavaScriptライブラリを追加します。この素晴らしいライブラリを使用して、チュートリアルの次のステップでよろめき効果を作成します。

src =” https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”

ハンバーガーメニュー

JQueryコードを挿入する

ハンバーガーメニューのクリック機能は、次のJQueryコードを利用しています。 以下の印刷画面に表示されているように、このコードをスクリプトタグの間に配置してください。

jQuery(function($){
$(document).ready(function(){  

// All variables needed in functions  
var menuSection = $('.fullwidth-menu');
var hamburgerIcon = $('.fullwidth-open');
var menuLink = $('.fullwidth-menu a');
var subMenu = $('.main-menu-item ul');
var toggleIcon = $('.toggle-sub-menu');
  
  
// Open fullwidth menu & animate items  
hamburgerIcon.click(function(){
	$(this).toggleClass('open');
	menuSection.toggleClass('fullwidth-menu-open');
	if (menuSection.hasClass("fullwidth-menu-open")) {
		anime({
  		targets: '.stagger-effect',
  		translateY: [150, 0],
  		opacity: [0, 1],
  		loop: false,
  		delay: anime.stagger(100, {easing: 'easeOutQuad'})
		});

	} else { 
		subMenu.slideUp();  
		toggleIcon.text($(this).text() == '+' ? '-' : '+');  
	}
});

// Close fullwidth menu when clicking an item
menuLink.click(function(){
	hamburgerIcon.toggleClass('open');
	menuSection.toggleClass('fullwidth-menu-open');  
  subMenu.slideUp();  
	toggleIcon.text($(this).text() == '+' ? '-' : '+');  
});
  
// Change icon when toggling the submenu  
toggleIcon.click(function(){  
	var subMenu = $(this).parent().find("ul");
	subMenu.slideToggle(); 
	$(this).text($(this).text() == '-' ? '+' : '-'); 
});  
  
});
});

ハンバーガーメニュー

フルスクリーンヘッダーのデザインが完了したらすぐにCSSクラスをアクティブ化します

最後になりましたが、最初のセクションにあるコードモジュールでCSSクラスを有効にします。コードモジュールを開き、クラスの最初と最後にある「/ * * /」を削除します。このクラスを有効にすると（すでに有効になっているJQueryコードと組み合わせて）、誰かがあなたのページの1つにアクセスしたときに、メニュー項目を含むセクションがすぐに読み込まれないようになります。このクラスを有効にすると、ページの2番目のセクションがVisual Builderから消えますが、ワイヤーフレームモードでアクセスするか、追加の変更を行う場合はCSSクラスをオフにすることができます。

ハンバーガーメニュー

5.ヘッダーとテーマビルダーの変更を保存します

それでおしまい！あとは、テンプレートとDivi Theme Builderを保存して、Webサイトで結果を表示するだけです。

ハンバーガーメニュー

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

ハンバーガーメニュー

モバイル

ハンバーガーメニュー

最終的な考え

この投稿では、Diviヘッダーを使用してクリエイティブにする方法を紹介しました。具体的には、カスタムアニメーションのハンバーガーメニューを作成する方法を説明しました。訪問者がハンバーガーアイコンをクリックするとすぐに、フルスクリーンメニューが遷移し、メニュー項目が1つずつ表示されるため、美しいユーザーエクスペリエンスが得られます。テンプレートJSONファイルも無料でダウンロードできました！ご不明な点がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。

Divi＆Anime.jsでよろめきアニメーションハンバーガーメニューを作成する方法

プレビュー

デスクトップ

モバイル

グローバルヘッダーテンプレートを無料でダウンロード

無料でダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

1.新しいヘッダーテンプレートを作成します

Diviテーマビルダーに移動し、新しいグローバルヘッダーテンプレートを追加します

ゼロから構築を開始

2.ロゴとハンバーガーアイコンを作成する

セクション設定

背景色

間隔

ポジション

新しい行を追加

カラム構造

サイジング

間隔

主な要素CSS

列1に画像モジュールを追加

ロゴをアップロード

サイジング

ポジション

列3にテキストモジュールを追加

コンテンツボックスのHTML構造

サイジング

間隔

ポジション

3.ハンバーガーメニューを作成します

新しいセクションを追加

グラデーションの背景

サイジング

間隔

オーバーフロー

ポジション

新しい行を追加

カラム構造

サイジング

間隔

オーバーフロー

ポジション

列1の設定

間隔

国境

列2の設定

間隔

テキストモジュール＃1を列1に追加します

H3コンテンツを追加する

H3テキスト設定

間隔

テキストモジュールのクローンを作成し、列2に複製を配置します

コンテンツの変更

テキストモジュール＃2を列2に追加します

コンテンツボックスのHTML構造

テキスト設定

リンクテキスト設定

順序付けられていないリストテキスト設定

間隔

サブメニューなしでバリエーションを作成するためのテキストモジュールのクローン作成

サブメニューを省略してアイコンを切り替えます

両方のタイプのメニュー項目を再利用する

テキストモジュール＃2を列2に追加します

H4と段落のコンテンツをコンテンツボックスに追加する

テキスト設定

H4テキスト設定

サイジング

主な要素CSS

クローンテキストモジュール＃2

コピーの変更

ソーシャルメディアフォローモジュールを列2に追加

選択したソーシャルネットワークを追加する

各ソーシャルネットワークの背景色を個別に削除します

間隔

4.機能を追加する

CSSクラスをハンバーガーアイコンテキストモジュールに追加する

セクション2にCSSクラスを追加する

全幅メニューの各モジュールにCSSクラスを追加する

メニュー項目にCSSクラスを追加する

セクション＃1にコードモジュールを追加する

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。