Diviを使用してホバーで拡張スティッキーメニューを作成する方法

公開: 2019-05-08

毎週、次のプロジェクトに使用できる新しい無料のDiviレイアウトパックを提供します。レイアウトパックの1つとして、Webサイトを次のレベルに引き上げるのに役立つユースケースも共有しています。

今週は、進行中のDiviデザインイニシアチブの一環として、DiviのMechanic LayoutPackを使用してホバー時に拡大するスティッキーメニューを作成する方法を紹介します。ゼロから再作成して、作成しているあらゆる種類のWebサイトに適用できる2つの異なるデザイン例を扱います。メニューはデスクトップ画面サイズにカーソルを合わせると表示され、モバイルデバイスをクリックするとアクティブになります。

それを手に入れよう！

プレビュー

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

例1

デスクトップ

スティッキーメニューの拡張

モバイル

スティッキーメニューの拡張

例2

デスクトップ

スティッキーメニューの拡張

モバイル

スティッキーメニューの拡張

一般的な手順

固定ナビゲーションを無効にする

Diviテーマオプションに移動

まず、いくつかの一般的な手順から始めます。これらの手順は両方の例で同じであり、目的の結果を達成するために必要です。

ページの下部にある拡張スティッキーメニューの使用を計画している場合は、上部のプライマリメニューバーを省略したい場合があります。そのためには、Diviのテーマオプションに移動する必要があります。

スティッキーメニューの拡大

固定ナビゲーションを無効にする

そこで、固定ナビゲーションバーオプションを無効にして、ページの上部にスペースが残らないようにする必要があります。

固定ナビゲーションバー：無効

スティッキーメニューの拡大

ページのプライマリメニューバーを非表示

ページ設定を開く

展開するスティッキーメニューを追加するページに移動し、ページ設定を開きます。

スティッキーメニューの拡大

カスタムCSSを追加する

次のCSSコード行をページに追加して、プライマリメニューを非表示にします。

#main-header {
display: none;
}

スティッキーメニューの拡大

ページの終わりに新しいセクションを追加

どちらの例を再作成する場合でも、基本的な手順のいくつかは同じままです。最初のステップは、ページの下部に通常のセクションを追加することです。

スティッキーメニューの拡大

間隔

セクション設定を開き、すべてのカスタム上部および下部パディングを削除します。

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

スティッキーメニューの拡大

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

スティッキーメニューの拡大

サイジング

モジュールをまだ追加せずに、行の設定を開き、行が画面の幅全体を占めるようにします。

カスタムガター幅を使用：はい
側溝幅：1
幅：100％
最大幅：100％

スティッキーメニューの拡大

間隔

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

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

スティッキーメニューの拡大

主な要素

行のメイン要素に2行のCSSコードを追加することで、行全体をページの下部に固定できるようにしています。

bottom: 0px;
position: fixed;

スティッキーメニューの拡大

Zインデックス

また、行の表示設定でZインデックスを増やすことにより、行（および次の手順で追加するテキストモジュール）がすべてのページコンテンツの上に表示されるようにします。

Zインデックス：99

スティッキーメニューの拡大

コードモジュールを列に追加

スタイルタグ間にCSSコードを追加する

一般的な手順の最後の部分は、新しい行にコードモジュールを追加することです。このコードモジュール内に追加するCSSコードは、ホバーに対する明らかな効果を実現するのに役立ちます。モジュール内にCSSコードの次の行を貼り付けます。

<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>

スティッキーメニューの拡大

例1を再作成する

スティッキーメニューの拡張

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

コンテンツを追加する

すべての手順を完了したので、最初の例から始めて、2つの異なる設計例に焦点を当てることができます。行の列にテキストモジュールを追加します。コンテンツボックスでは、段落スタイルを使用して「≡メニュー」のコピーを表示しています。次に、すべてのメニュー項目を順序付けられていないリストに配置します。また、各ページタイトルへのリンクを個別に追加します。

スティッキーメニューの拡大

デフォルトの背景色

モジュールの背景設定に移動し、背景色を変更します。

背景色：#ffffff

スティッキーメニューの拡大

背景色にカーソルを合わせる

ホバー時にこの背景色を変更します。

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

スティッキーメニューの拡大

グラデーションの背景

また、デフォルトのグラデーションの背景も追加します。

色1：rgba（255,255,255,0）
色2：#ffffff
終了位置：60％

スティッキーメニューの拡大

デフォルトのテキスト設定

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

テキストフォント：Khand
テキストフォントの太さ：太字
テキストの色：＃021827
テキストサイズ：3vh
テキストの向き：中央

スティッキーメニューの拡大

テキスト設定にカーソルを合わせる

ホバー時に一部のテキスト設定を変更します。

テキストの色：rgba（255,255,255,0）
テキストサイズ：0vh

スティッキーメニューの拡大

リンクテキスト設定

次に、リンクテキストの設定に移動し、リンクテキストの色を変更します。

リンクテキストの色：＃000000

スティッキーメニューの拡大

デフォルトのリストテキスト設定

デフォルトのリストテキスト設定に移動し、必要に応じてスタイルを設定します。デフォルト状態のテキストサイズに「0px」を使用していることを確認してください。

順序付けられていないリストフォント：Khand
順序なしリストのフォントスタイル：大文字
順序付けられていないリストテキストの配置：中央
順序付けられていないリストのテキストの色：rgba（255,255,255,0）
順序付けられていないリストのテキストサイズ：0px
順序付けられていないリスト行の高さ：0em
順序付けられていないリストスタイルの位置：内側

スティッキーメニューの拡大

ホバーリストのテキスト設定

次に、ホバーの値の一部を変更して、メニュー項目が表示されるようにします。

順序付けられていないリストのテキストの色：＃000000
順序付けられていないリストのテキストサイズ：2vh
順序付けられていない線の高さ：2.1em

スティッキーメニューの拡大

デフォルトの間隔

次に間隔設定に移動し、テキストモジュールに形状を付けます。

左マージン：45vw（デスクトップ）、39vw（タブレット）、33vw（電話）
右マージン：45vw（デスクトップ）、39vw（タブレット）、33vw（電話）
トップパディング：2vw（デスクトップ）、4vw（タブレット）、6vw（電話）
下部のパディング：2vw（デスクトップ）、4vw（タブレット）、6vw（電話）

スティッキーメニューの拡大

ホバー間隔

ホバー時にこれらの同じ値を変更します。

左マージン：14vw
右マージン：14vw
トップパディング：8vw
ボトムパディング：8vw

スティッキーメニューの拡大

デフォルトの境界線

境界線の設定に移動し、丸みを帯びた各コーナーの値が「0px」であることを確認します。

スティッキーメニューの拡大

ホバーボーダー

丸みを帯びた角でホバーオプションを有効にし、左上と右上の値を変更します。

左上：50vw
右上：50vw

スティッキーメニューの拡大

ボックスシャドウ

ボックスシャドウを使用してモジュールにある程度の深さを与えて続行します。これにより、メニューがページ上で見過ごされないようになります。

ボックスシャドウブラー強度：1000ms
影の色：rgba（0,0,0,0.68）

スティッキーメニューの拡大

CSSクラス

モジュールにもCSSクラスを追加しています。

CSSクラス：dt-menu

スティッキーメニューの拡大

トランジション

最後になりましたが、トランジション設定でトランジション期間を短くしてください。

移行時間：100ms

スティッキーメニューの拡大

例2を再作成する

スティッキーメニューの拡張

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

コンテンツを追加する

2番目の例に移ります！ここでも、段落テキストスタイルを使用して「≡メニュー」を追加し、順序付けされていないリストを使用してメニュー項目を追加します。また、各メニュー項目へのリンクを個別に追加します。

スティッキーメニューの拡大

デフォルトの背景色

背景設定に移動し、背景色を変更します。

背景色：#ffffff

スティッキーメニューの拡大

背景色にカーソルを合わせる

ホバー時に背景色を変更します。

背景色：＃f71535

スティッキーメニューの拡大

デフォルトのテキスト設定

次に、[デザイン]タブに移動し、段落コピーの外観にいくつかの変更を加えます。

テキストフォント：Khand
テキストの色：＃021827
テキストサイズ：3vh

スティッキーメニューの拡大

テキスト設定にカーソルを合わせる

ホバー時にこれらの設定を変更します。

テキストの色：rgba（255,255,255,0）
テキストサイズ：0vh

スティッキーメニューの拡大

リンクテキスト設定

テキスト設定に移動し、リンクテキストの色を変更します。

リンクテキストの色：#ffffff

スティッキーメニューの拡大

デフォルトのリストテキスト設定

順序付けされていないリストアイテムのデザイン設定も変更します。

順序付けられていないリストフォント：Khand
順序なしリストのフォントスタイル：大文字
順序付けられていないリストテキストの配置：中央
順序付けられていないリストのテキストの色：rgba（255,255,255,0）
順序付けられていないリストのテキストサイズ：0px
順序付けられていないリスト行の高さ：0em
順序付けられていないリストスタイルの位置：内側

スティッキーメニューの拡大

ホバーリストのテキスト設定

そして、ホバー時にこれらの値のいくつかを変更します。

順序付けられていないリストのテキストの色：#ffffff
順序付けられていないリストのテキストサイズ：2vh
順序付けられていないリスト行の高さ：2.1em

スティッキーメニューの拡大

デフォルトの間隔

次に、間隔の設定に移動し、モジュールにいくらかのスペースを与えます。

右マージン：88vw（デスクトップとタブレット）、71vw（電話）
トップパディング：6vw（デスクトップ）、10vw（タブレット）、18vw（電話）
下部のパディング：4vw（デスクトップ）、10vw（タブレット）、12vw（電話）
左パディング：1vw

スティッキーメニューの拡大

ホバー間隔

ホバー時に値を変更します。

右マージン：59vw
トップパディング：13vw
ボトムパディング：8vw
左パディング：1vw
右パディング：13vw

スティッキーメニューの拡大

国境

そして、このクォーターサークルデザインを作成するために、境界線設定の右上の境界線を変更します。

右上：50vw

スティッキーメニューの拡大

ボックスシャドウ

また、ボックスシャドウを追加して、ページに奥行きを作成します。

ボックスシャドウブラー強度：1000px
影の色：rgba（0,0,0,0.68）

スティッキーメニューの拡大

CSSクラス

次に、[詳細設定]タブにCSSクラスを追加します。

CSSクラス：dt-menu

スティッキーメニューの拡大

トランジション

また、[詳細設定]タブの遷移時間を短くして、すばやく遷移を作成します。

移行時間：100ms

スティッキーメニューの拡大

プレビュー

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

例1

デスクトップ

スティッキーメニューの拡張

モバイル

スティッキーメニューの拡張

例2

デスクトップ

スティッキーメニューの拡張

モバイル

スティッキーメニューの拡張

最終的な考え

この投稿では、DiviのMechanic LayoutPackを使用して拡張スティッキーメニューを作成する方法を紹介しました。構築しているあらゆる種類のWebサイトで再作成して使用できる、2つの異なるデザイン例を処理しました。この継続的なDiviデザインイニシアチブを楽しんでいただければ幸いです。このイニシアチブでは、毎週、デザインツールボックスに何か特別なものを入れようとしています。ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

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