Divi垂直ナビゲーションのアクティブリンクをスタイリングする3つのクリエイティブな方法

公開: 2017-09-11

このDiviチュートリアルでは、垂直ナビゲーションでアクティブリンクのスタイルを設定するためのいくつかの興味深い方法を紹介します。このチュートリアルは、1ページのDiviWebサイトのスクロールでアクティブなリンクを作成する方法を示した前のチュートリアルに続きます。したがって、さまざまなスタイリング方法を試す前に、前の記事をスクロールしてアクティブなリンクを設定する必要があります。これは、使用するコードがさらにその上に構築されるためです。

このチュートリアルで覚えておくべきことは、ページを保存した後にのみ結果を表示できるという事実です。ページをプレビューするだけでは、変更は表示されません。

Divi垂直ナビゲーションのアクティブリンクをスタイリングする3つのクリエイティブな方法

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

使い方

ページを下にスクロールするときにアクティブなリンクを自動的に調整するナビゲーションを作成するために、目的の結果を簡単に達成するのに役立つPage Scroll toIDプラグインを使用しました。さらに、プラグインには、設定内から手動で選択できるさまざまなオプションも用意されています。

プラグインは、訪問者がWebサイト上でどの位置にいるかを識別するのに役立ち、Webサイトの現在見ているセクションに応じてメニュー項目を変更します。これは、訪問者が1ページのポケットベル全体をナビゲートするのに間違いなく役立つ小さなインタラクションです。彼らはあなたのページのどの部分を探索しているか、そして彼らが興味を持っているかもしれない他のセクションからどれだけ離れているかを自動的に知るでしょう。

注：この方法は、1ページのみで構成されているWebサイトにのみ適用されることに注意してください。

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

作成方法を示す例は、垂直ナビゲーションを使用している場合に特に役立ちます。したがって、先に進んで、テーマカスタマイザーで垂直ナビゲーションを有効にします（前の投稿でまだ行っていない場合）。

WordPressダッシュボードを使用している場合は、 [外観]> [カスタマイズ]> [ヘッダーとナビゲーション]> [ヘッダー形式]> [垂直ナビゲーションを有効にする]に移動します。

アクティブリンク

アクティブリンクスタイル＃1

私たちがあなたに見せたい最初の例は、輝くものです。訪問者がセクションの1つを通過するたびに、別のメニュー項目が光り始めます。これは、訪問者が1ページのポケットベルをナビゲートするのに役立つ、微妙ですが美しくエレガントな方法です。

アクティブリンク

プライマリメニューバーの設定

プライマリメニューバーにいくつかの変更を加えることから始めます。 WordPressダッシュボードを使用している場合は、 [外観]> [カスタマイズ]> [ヘッダーとナビゲーション]> [プライマリメニューバー]に移動し、次の変更を加えます。

ロゴ画像を非表示：有効にする
テキストサイズ：24
文字間隔：-1
フォント：Happy Monkey
テキストの色：#FFFFFF
アクティブリンクの色：#FFFFFF
背景色：rgba（255,255,255,0）
ドロップダウンの背景色：rgba（255,255,255,0）

アクティブリンク

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

次に行う必要があるのは、CSSコードを追加することです。 WebサイトにCSSコードを追加する方法はいくつかあります。これらの例では、テーマオプションから始めて、3つのメソッドを処理します。 WordPressダッシュボードを使用している場合は、 [Divi]> [テーマオプション]> [全般]タブを下にスクロールして、CSSコードの次の行を[カスタムCSS]ボックスに配置します。

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight{ 
text-shadow:  0 0 10px #fff,  0 0 30px #fff,  0 0 50px #e3e98e,  0 0 70px #e3e98e, 0 0 90px #e3e98e;
border-top: 1px dotted #FFFFFF;
border-bottom: 1px dotted #FFFFFF;
padding-top: 15px;
}
nav#top-menu-nav {
width:80% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
text-align: center;
margin-bottom: 15px;
padding-left: 25%;
}
#et-top-navigation {
padding-top: 100% !important;
}
#top-menu {
text-align: center;
padding-left: 10%;
}}

アクティブリンクスタイル＃2

2番目のアクティブリンクスタイルは、非常にクリーンでエレガントな外観を持つスタイルです。いつものように、アクティブなリンクは、1ページのWebサイトを下にスクロールする方法に応じて変化します。メニュー項目の1つをクリックすると、同じスタイルが適用されます。

アクティブリンク

プライマリメニューバーの設定

この投稿の最初の例で行ったのと同じことから始めます。プライマリメニューバーに変更を加える。これを行うには、 WordPressダッシュボード内の[外観]> [カスタマイズ]> [ヘッダーとナビゲーション]> [プライマリメニューバー]に移動し、次の設定があることを確認します。

ロゴ画像を非表示：有効にする
テキストサイズ：24
文字間隔：2
フォント：ロブスター
テキストの色：#FFFFFF
アクティブリンクの色：#FFFFFF
背景色：rgba（255,255,255,0）
ドロップダウンメニューの背景色：rgba（255,255,255,0）

アクティブリンク

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

前の例で述べたように、CSSコードを複数の方法でWebサイトに追加できます。カスタムコードをテーマオプションに追加するだけでなく、テーマカスタマイザーにも追加できます。 WordPressダッシュボードを使用している場合は、 [外観]> [カスタマイズ]> [追加のCSS]に移動し、[カスタムCSS]フィールドに次のコード行を配置します。

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
padding: 0.5em 1.9em;
}
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
height: 20px;
width: 20px;
position: absolute;
content: '';
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
}
#top-menu .current-menu-item a.mPS2id-highlight:before {
left: 0;
top: 0;
border-left: 4px solid #000000;
border-top: 4px solid #FFFFFF;
-webkit-transform: translate(100%, 50%);
transform: translate(100%, 50%);
}
#top-menu .current-menu-item a.mPS2id-highlight:after {
border-right: 4px solid #000000;
border-bottom: 4px solid #FFFFFF;
-webkit-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
} 
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
opacity: 1;
}
nav#top-menu-nav {
width:87% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

アクティブリンクスタイル＃3

私たちがあなたと共有することを選択した3番目のアクティブなリンクスタイルは、メニュー項目として使用されているキーワードに主に焦点を当てたものです。テキストシャドウに適切な設定を使用することにより、同じテキストがメニュー項目を囲み、訪問者がWebサイト上で持つ位置を強調します。

アクティブリンク

プライマリメニューバーの設定

この最後の例では、プライマリメニューバーにいくつかの変更を加えることから始めます。 WordPressダッシュボードを使用している場合は、 [外観]> [カスタマイズ]> [ヘッダーとナビゲーション]> [プライマリメニューバー]に移動し、垂直ナビゲーションに次の変更を適用します。

ロゴ画像を非表示：有効にする
テキストサイズ：16
文字間隔：2
フォント：Josefin Slab
フォントスタイル：大文字
テキストの色：#FFFFFF
アクティブリンクの色：#FFFFFF
背景色：rgba（255,255,255,0）
ドロップダウンメニューの背景色：rgba（255,255,255,0）

アクティブリンク

特に1つのページにCSSコードを追加する

CSSコードを追加する必要があるもう1つのオプションは、特に1つのページに追加することです。 Divi Builderでフロントページ（つまり、すべてのコンテンツを配置したページ）を開き、次のアイコンをクリックします。

アクティブリンク

アイコンをクリックしたら、CSSコードの次の行を[カスタムCSS]フィールド内に配置します。

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
margin-left: 80px;
text-shadow:0 0 0 #000, -70px 0 0 rgba(255, 255, 255, .4), 70px 0 0 rgba(255, 255, 255, .4), 0 25px 0 rgba(255, 255, 255, .4) , 0 -25px 0 rgba(255, 255, 255, .4) ; }
}
nav#top-menu-nav {
width:95% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

最終的な考え

この投稿では、メニュー内のアクティブなリンクのスタイルを設定するための便利で簡単な方法をいくつか紹介しました。この投稿は、1ページのDiviWebサイトのスクロールでアクティブなリンクを作成する方法を示した以前の投稿のフォローアップでした。結果を表示する前に、最初に変更を保存する必要があることに注意してください。ページをプレビューするだけでは機能しません。質問や提案がある場合; 下のコメントセクションにコメントを残してください！

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

Botond1977 /shutterstock.comによる注目の画像