垂直サブメニューナビゲーションのスタイルを設定する3つのクリエイティブな方法

公開: 2017-08-17

今日の投稿では、垂直ナビゲーションのサブメニューのスタイルを設定する3つの異なる方法を提供します。以前の投稿の1つで、デスクトップから見たときにWebサイトと重なる透明な垂直ナビゲーションを作成する方法をすでに示しました。

共有する例は、その透明な垂直ナビゲーションの上に作成されます。そうすれば、AからZへの垂直方向の透明なナビゲーションをすぐに作成できるようになります。この投稿全体を通して、垂直方向のサブメニューに命を吹き込むことができるさまざまなスタイル設定を体験できます。

例を示す前に、変更なしでサブメニューを表示するのは興味深いかもしれません。いつものように、垂直サブメニューはメインメニュー項目の設定を引き継ぎます。追加の変更を加えない場合、サブメニューは次のようになります。

それでは、再現する方法を示す3つの例を見てみましょう。

最初の例：

2番目の例：

3番目の例：

垂直サブメニューを実現するための一般的な手順

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

提供したさまざまな例に飛び込む前に、始める前に必要な2つの一般的な手順を処理します。必要に応じてサブメニュー項目を設計する前に、2つのことを行う必要があります。サブメニュー項目をメニューに追加することと、サブメニュー項目のさまざまなCSSIDを探すことです。これらの手順を実行した後、サンプルの結果を達成するために必要なCSSコードを共有します。

Divi WebサイトにCSSコードを追加する方法は3つあるため、それぞれの方法を個別に処理します。ただし、お好みの方法を使用して、各例のCSSコードを追加できます。

サブメニュー項目の追加

最初に行うことは、まだ行っていない場合は、サブメニュー項目を追加することです。この例では、その方法を示すために、「モデル」メニュー項目にいくつかのサブメニュー項目のみを追加しました。ただし、変更を他のメニュー項目に適用することもできます。

WordPressダッシュボードを使用している場合は、 [外観]> [メニュー]に移動します。すでにメニューを作成している場合は、それを使用してください。そうでない場合は、新しいメニューを作成することから始めます。次に、メインメニュー項目をメニューに追加します。それが済んだら、サブメニュー項目を追加できます。サブメニュー項目を追加し、プライマリメニュー項目のすぐ下に配置するだけです。垂直ナビゲーションに追加するすべてのサブメニュー項目に対してこれを実行します。

サブメニュー項目の個々のCSSIDを探します

この例では、各サブメニュー項目に個別にCSSを変更する必要があります。そのため、ソースでCSSIDを検索する必要があります。すべてのアイテムは異なるIDを持っています。 Webサイトで特に使用されているCSSIDに従ってCSSコードを変更する必要があります。これらは、これらの例で使用されているものとは異なる場合があります。そのため、特にアイテムに変更を加えることができるように、IDを取得する場所を簡単に説明します。

ホームページに移動し、メニューにマウスを置いて、コードの検査を開始します。選択したメニュー項目にCSSIDが表示されます。サブメニューリストのCSSIDをそれぞれコピーし、後で使用できるように保存します。

2つの手順を完了したので、作成した例の作成に進むことができます。

最初の例を作成する

投稿のこの部分では、垂直サブメニューの最初の例を再現する方法を正確に示します。ご覧のとおり、構造は非常に単純ですが、Webサイトにその余分な色を追加します。主なメニュー項目はシンプルで、透明な背景色を使用しています。もちろん、サブメニューでも同じ単純さを保つことができます。または、もう少し注意を引くことを選択できます。

使用されている色は、背景画像とグラデーションオーバーレイを一致させます。シンプルで控えめな結果を達成しようとしている場合は、サブメニューでそのような色の一貫性を保つことをお勧めします。

テーマオプションを使用してCSSコードを追加する

ページにCSSコードを追加するにはさまざまな方法があります。たとえば、CSSコードを特定の1ページに追加できます。テーマオプションまたはテーマカスタマイザーを使用して、Webサイト全体に追加することもできます。この例では、テーマオプションを使用してコードを追加するだけです。 WordPressダッシュボードを使用している場合は、 [Divi]> [テーマオプション]> [全般]タブを下にスクロールして、次のコードを[カスタムCSS]ボックスに貼り付けます。

.nav li ul {
border: none !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background-color: rgba(60,105,205,0.1) !important;
border-radius: 5px;
margin-bottom: 10px;
}
.sub-menu #menu-item-205212 {
background-color: rgba(60,105,205,0.3) !important;
border-radius: 5px;
margin-bottom: 10px;
}
.sub-menu #menu-item-205213
{
background-color: rgba(60,105,205,0.5) !important;
border-radius: 5px;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 1px 0px 1px 0 !important;
text-align: center !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 5% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}

#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\e089" !important;
}

コード内の次のCSSIDを、サブメニューに適用されるものに置き換えます。この投稿の前のステップでは、それらを見つけることができる場所を示しました。

2番目の例を作成する

次の例では、作成方法に特定のグラデーション効果があることを示します。使用されているさまざまな色は、使用されている背景画像と一致しています。完全なサブメニューにグラデーションの背景を追加し、サブメニュー項目のそれぞれにいくつかの個別の透明色を追加しました。

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

このコードを完全なWebサイトに追加することをお勧めしますが、この例を特に1つのページに適用する方法を示します。特に1つのページにCSSコード行を追加したくない場合は、テーマオプション（最初の例を参照）またはテーマカスタマイザー（次の例を参照）を使用して自由に追加してください。

サブメニューデザインを追加するページを開くか作成することから始めます。次に、Diviビルダーの右隅にある次のボタンをクリックします。

表示される画面で、CSSコードの次の行をコピーして[カスタムCSS]フィールドに貼り付けます。

.nav li ul {
border: none !important;
background: -webkit-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: -o-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: -moz-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
padding: 3px !important;
width: 80% !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background-color: rgba(255,255,255,0.6) !important;
margin-bottom: 3px;
}
.sub-menu #menu-item-205212 {
background-color: rgba(255,255,255,0.4) !important;
margin-bottom: 3px;
}
.sub-menu #menu-item-205213
{
background-color: rgba(255,255,255,0.2) !important;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 1px 0 1px 0 !important;
text-align: center !important;
color: #000000 !important;
width: 80% !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 10% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}

#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\61" !important;
}

CSSコードの次のサブメニュー項目を独自のものに置き換えます。

3番目の例を作成する

作成方法を共有する最後の例は、ホバー効果があります。このホバー効果をサブメニューに追加することで、メインメニューを忙しくすることなく、視聴者とうまく交流することができます。サブメニューはメインメニュー項目に移動したときにのみ表示されるためです。したがって、訪問者は常にその影響に直面することはありません。

テーマカスタマイザーを介して1ページのCSSコードを追加する

最後の例では、テーマカスタマイザーを使用してCSSコードを追加する方法を示します。 WordPressダッシュボードを使用している場合は、 [外観]> [カスタマイズ]> [追加のCSS]に移動し、次のコード行をコピーして貼り付けます。

.nav li ul {
border: none !important;
width: 95% !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205211:hover {
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
.sub-menu #menu-item-205212 {
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
.sub-menu #menu-item-205212:hover {
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205213
{
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205213:hover
{
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 5px 0 5px 0 !important;
text-align: center !important;
color: #000000 !important;
width: 95% !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 10% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}
#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\61" !important;
}

サブメニュー項目のCSSIDを取得し、例のCSSIDを自分のものに置き換えます。

それでおしまい！これで、デザインは上記の例のようになります。

最終的な考え

この投稿では、垂直ナビゲーションでクリエイティブになる方法についていくつかの可能性を示しました。すなわち; 垂直サブメニューの見栄えを良くする方法を紹介しました。この投稿を段階的に実行すると、垂直サブメニューを完全に再現できるはずです。質問や提案がある場合; 下のコメント欄でお知らせください！

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