DiviWebサイトで標準ナビゲーションと垂直ナビゲーションをオーバーラップさせる方法

この投稿では、標準ナビゲーションと垂直ナビゲーションを組み合わせる方法を紹介します。 すなわち; セカンダリメニューとフッターをWebサイトの垂直ナビゲーションとオーバーラップさせる方法。 つまり、トップナビゲーションと垂直ナビゲーションのどちらかを選択する必要はありません。 あなたは両方を行うことができます！ テーマカスタマイザー内で、プライマリメニューとセカンダリメニューのスタイルを自由に設定できます。これは、この投稿で明示的に実現するのに役立つものではありません。 むしろ、次のことを行うプロセスに役立つ次のことをお見せします。

• セカンダリメニューを垂直ナビゲーションとオーバーラップさせる方法
• スクロール時にセカンダリメニューを修正する方法
• フッターを垂直ナビゲーションとオーバーラップさせる方法

これらはすべて、Webサイトの標準ナビゲーションと垂直ナビゲーションのバランスをうまくとるのに役立つものです。 標準ナビゲーションと垂直ナビゲーションをオーバーラップさせることで、Webサイトが垂直ナビゲーションに支配されているように感じることはありません。 Webサイトのメインコンテンツは垂直ナビゲーションに合わせて調整されますが、セカンダリメニューとフッターは垂直ナビゲーションが有効になっていない場合と同じように動作します。

結果

このチュートリアルを終了するまでに、垂直ナビゲーションを使用したWebサイトで次の結果を達成できるようになります。

重複する標準ナビゲーションと垂直ナビゲーションのインスピレーション

以前の投稿では、垂直ナビゲーションを使用するWebサイトの例をいくつか共有しました。 すべての例は、あまり使用されないDiviオプションを使用してどのように創造的になることができるかを示しています。 あなたのウェブサイトの考え抜かれた垂直ナビゲーションはあなたがあなたの訪問者と達成しようとしていたその余分な相互作用を与えることができます。

例を示している間、特定の結果を達成する方法を示すように私たちを刺激したいくつかのコメントがありました。 この投稿は、インスピレーションに基づいたチュートリアルの1つであり、ソリューションを自分で検索せずにWebサイトを微調整する方法を示します。

上部のセカンダリメニューとページの左側の垂直ナビゲーションを使用するAlexBrandsWebサイトに触発されました。

スクロールしている間、セカンダリメニューがスクロールします。 それはウェブサイトにその素敵な余分な小さなタッチを与え、それは二次メニュー内のコンテンツに焦点を合わせ続けるのに役立ちます。 Alex BrandsはeコマースWebサイトであり、固定のセカンダリメニューは、買い物かごの中身と提供している取引を人々に思い出させるのに役立ちます。

この種の垂直ナビゲーションは、eコマースWebサイトにとって特に興味深いものです。 垂直ナビゲーションにより、訪問者はWebサイトで提供されているさまざまなカテゴリのアイテムを簡単にナビゲートできます。 メニュー項目は、ユーザーが通過する必要のあるリストとして解釈されやすいため、垂直ナビゲーションに配置されていると、メニュー項目をたどるのが簡単になります。

DiviWebサイトで標準ナビゲーションと垂直ナビゲーションをオーバーラップさせる方法

私たちのYoutubeチャンネルを購読する

一般的な手順

標準ナビゲーションを垂直ナビゲーションとオーバーラップさせる方法を説明する部分に入る前に、まず一般的な手順を実行します。 これらの一般的な手順は、オーバーラップを適用する前に実行する必要がある基礎です。

それ以上の期限なしで; 始めましょう。

メニューを作成してメニュー項目を追加する

最初に行う必要があるのは（まだ行っていない場合）、メニューとメニュー項目をWebサイトに追加することです。 これらは、垂直ナビゲーション内に表示されるメニュー項目です。 Webサイトに新しいメニューを追加するには、 WordPressダッシュボード>外観>メニューに移動します。 そのページが表示されたら、新しいメニューにタイトルを付けてメニューを作成します。

メニュー項目を追加し、これをメインメニューにすることで続行します。

セカンダリメニューにソーシャルアイコンを追加する

次に行う必要があるのは、セカンダリメニューをアクティブにすることです。 セカンダリメニューがWebサイトに表示されるようにするには、セカンダリメニューにアクティブ化されている要素が含まれている必要があります。 この投稿では、ソーシャルメディアアイコンのみを追加しますが、もちろん、好きなものを追加することができます。

セカンダリメニューをアクティブにしてソーシャルアイコンを表示するには、まずWordPressダッシュボード>カスタマイズ>ヘッダーとナビゲーション>ヘッダー要素> [ソーシャルアイコンを表示]オプションを有効にします。

垂直ナビゲーションをアクティブにする

次のステップは、Diviビルダー内で垂直ナビゲーションを有効にすることです。 これを行うには、 WordPressダッシュボード>外観>カスタマイズ>ヘッダーとナビゲーション>ヘッダー形式>垂直ナビゲーションを有効にします。

さらに、垂直ナビゲーションを表示する場所を選択することもできます。 あなたのウェブサイトの左側または右側にあります。

プライマリメニューの固定ナビゲーションを無効にする

高度な変更に進む前に、最後にやるべきことが1つあります。それは、プライマリメニューの固定ナビゲーションを無効にすることです。 プライマリメニューをすでに無効にしている場合は、この手順をスキップしてください。 ただし、メインメニューが現在修正されている場合は、 WordPressダッシュボード> Divi>テーマオプション>に移動し、固定ナビゲーションを無効にします。

標準ナビゲーションと垂直ナビゲーションを組み合わせる

この投稿の次のパートでは、標準ナビゲーションと垂直ナビゲーションを通常とは異なるものにする方法を紹介します。 垂直ナビゲーションに関しては、画面の一部がそれで覆われているのを見るのに慣れています。 セカンダリメニューとフッターは、デフォルトでは垂直ナビゲーションを通過しません。

ただし、場合によっては、セカンダリナビゲーションとフッターが垂直ナビゲーションの上にあることを確認する必要があります。 そうすれば、垂直ナビゲーションに依存するのはメインコンテンツだけです。 あなたのウェブサイトは完全に2つの場所に分かれているようには感じません。 垂直ナビゲーションとWebサイトの残りの部分。

テーマオプションにCSSコードを追加する

CSSコードは、Diviのテーマオプションまたはテーマカスタマイザーの2つの方法で追加できます。 テーマオプションにコードを追加するには、 WordPressダッシュボード> Divi>テーマオプション>一般>タブを下にスクロールして、CSSコードの次の行を[カスタムCSS]ボックスに貼り付けます。

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

テーマカスタマイザーにCSSコードを追加する

もう1つの可能性は、CSSコード行をテーマカスタマイザーに追加することです。 これを行うには、 WordPressダッシュボード>外観>カスタマイズ>追加のCSS>に移動し、CSS行を[カスタムCSS]フィールドに貼り付けます。

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

最終的な考え

この投稿では、Webサイトで標準ナビゲーションと垂直ナビゲーションを組み合わせる方法を紹介しました。 より正確に; セカンダリメニューとフッターを垂直ナビゲーションとオーバーラップさせる方法と、セカンダリメニューを修正する方法を示しました。 質問や提案がある場合; 下のコメント欄にコメントを残してください！

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

ラインデザイン/shutterstock.comによる注目の画像