為垂直子菜單導航設計樣式的 3 種創意方法

已發表: 2017-08-17

在今天的帖子中，我們將為您提供三種不同的方式來設置垂直導航子菜單的樣式。在之前的一篇博文中，我們已經向您展示瞭如何製作一個透明的垂直導航，在從桌面查看網站時與您的網站重疊。

我們將要分享的示例將建立在透明的垂直導航之上。這樣，您就可以立即創建從 A 到 Z 的垂直透明導航。在這篇文章中，您將體驗不同的樣式設置，這些設置可以使您的垂直子菜單栩栩如生。

在向您展示示例之前，看看沒有任何更改的子菜單可能會很有趣。像往常一樣，垂直子菜單接管主菜單項的設置。不做任何額外修改，子菜單如下所示：

現在，讓我們看一下我們將向您展示如何重新創建的三個示例。

第一個例子：

第二個例子：

第三個例子：

實現垂直子菜單的一般步驟

訂閱我們的 YouTube 頻道

在深入研究我們提供的不同示例之前，我們將在開始之前處理兩個必要的一般步驟。在根據您的需要設計子菜單項之前，您必須做兩件事：將子菜單項添加到您的菜單中，並查找我們子菜單項的不同 CSS ID。完成這些步驟後，我們將分享實現示例結果所需的 CSS 代碼。

由於有三種方法可以將 CSS 代碼添加到您的 Divi 網站，我們將分別處理每種方法。但是，您可以使用您喜歡的方式為每個示例添加 CSS 代碼。

添加子菜單項

我們要做的第一件事（如果您還沒有這樣做的話）是添加子菜單項。在我們的示例中，我們僅向“我們的模型”菜單項添加了一些子菜單項，以向您展示如何操作。但是，您也可以將更改應用於其他菜單項。

如果您在WordPress 儀表板上，請轉到外觀 > 菜單。如果您已經創建了一個菜單，請使用該菜單。如果沒有，請從製作新菜單開始。然後，將主菜單項添加到您的菜單中。完成後，您可以添加子菜單項。添加一個子菜單項，只需將其放在主菜單項下即可。對要添加到垂直導航的所有子菜單項執行此操作。

查找您的子菜單項的各個 CSS ID

在我們的示例中，我們必須分別對每個子菜單項進行一些 CSS 修改。這就是為什麼我們必須在源代碼中查找 CSS ID。每個項目都有不同的 ID。您必鬚根據您網站上專門使用的 CSS ID 修改 CSS 代碼。這些可能與這些示例中使用的不同。這就是為什麼我們將簡要地向您展示從何處獲取 ID，以便您可以特別對您的項目進行修改。

轉到您的主頁，將鼠標放在菜單上並開始檢查代碼。您將看到 CSS ID 出現在所選的菜單項上。複製子菜單列表中的每個 CSS ID 並保存以備後用。

現在您已經完成了兩個步驟，您可以繼續創建我們製作的示例。

創建第一個示例

在文章的這一部分，我們將向您展示如何重新創建垂直子菜單的第一個示例。如您所見，結構非常簡單，但為您的網站增添了額外的色彩。主菜單項很簡單，並使用透明背景色。當然，您可以在子菜單中保持同樣的簡單性。或者，您可以選擇多一點關注它。

正在使用的顏色將背景圖像與漸變疊加相匹配。如果您想獲得簡單而適度的結果，建議您在子菜單中保持這種顏色的一致性。

通過主題選項添加 CSS 代碼

有多種方法可以將 CSS 代碼添加到您的頁面。例如，您可以將 CSS 代碼添加到特定的頁面。您還可以通過主題選項或主題定制器將其添加到整個網站。對於此示例，我們只需通過主題選項添加代碼即可。如果您在 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;
}

將代碼中的以下 CSS ID 替換為適用於您的子菜單的 CSS ID。在這篇文章的上一步中，我們已經向您展示了在哪裡可以找到這些。

創建第二個示例

下一個示例我們將向您展示如何使其具有一定的漸變效果。正在使用的不同顏色與正在使用的背景圖像一致。我們為完整的子菜單添加了漸變背景，並為每個子菜單項添加了一些單獨的透明顏色。

特別為一頁添加 CSS 代碼

儘管您可能希望將此代碼添加到您的完整網站，但我們將向您展示如何使此示例特別適用於某一頁面。如果您不想將 CSS 代碼行特別添加到一個頁面，請隨時通過 Theme Options（如第一個示例所示）或通過 Theme Customizer（如下一個示例所示）添加它。

首先打開或創建要添加子菜單設計的頁面。現在，單擊 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 代碼中的以下子菜單項替換為您自己的：

創建第三個示例

我們將要分享的最後一個例子是如何製作具有懸停效果的。通過將這種懸停效果添加到您的子菜單中，您將以一種很好的方式與您的觀眾互動，而不會讓您的主菜單太忙。由於子菜單僅在移動到主菜單項上時才會出現。因此，您的訪問者不會經常遇到這種影響。

通過主題定制器為一頁添加 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;
}

獲取子菜單項的 CSS ID，並將示例中的 CSS ID 替換為您的：

就是這樣！您的設計現在應該如上例所示。

最後的想法

在這篇文章中，我們向您展示瞭如何利用垂直導航發揮創意的一些可能性。進一步來說; 我們向您展示瞭如何讓您的垂直子菜單看起來很棒。如果你按照這篇文章一步一步來，你應該能夠完美地重新創建垂直子菜單。如果您有任何問題或建議；請在下面的評論部分告訴我們！

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！