如何使用 Divi 在懸停時創建擴展的粘性菜單

每週，我們都會為您提供新的免費 Divi 佈局包，您可以將其用於下一個項目。 對於其中一個佈局包，我們還分享了一個用例，可幫助您將網站提升到一個新的水平。

本週，作為我們正在進行的 Divi 設計計劃的一部分，我們將向您展示如何使用 Divi 的機械佈局包在懸停時創建一個擴展的粘性菜單。 我們將處理兩種不同的設計示例，您可以從頭開始重新創建它們，並將其應用於您正在創建的任何類型的網站！ 該菜單將在桌面屏幕尺寸上懸停時顯示，並在點擊移動設備時激活。

讓我們開始吧！

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

示例#1

桌面

移動的

示例#2

桌面

移動的

一般步驟

禁用固定導航

轉到 Divi 主題選項

我們將從一些一般步驟開始。 這些步驟對於兩個示例都是相同的，並且是實現所需結果所必需的。

如果您打算在頁面底部使用擴展的粘性菜單，您可能希望忽略頂部的主菜單欄。 為此，您需要轉到 Divi 的主題選項。

禁用固定導航

在那裡，您需要禁用固定導航欄選項以確保頁面頂部沒有剩餘空間。

• 固定導航欄：禁用

隱藏頁面上的主菜單欄

打開頁面設置

移至要添加擴展粘性菜單的頁面並打開頁面設置。

添加自定義 CSS

通過向頁面添加以下 CSS 代碼行來隱藏主菜單。

#main-header {
display: none;
}

將新部分添加到頁面末尾

無論您要重新創建哪個示例，一些基本步驟保持不變。 第一步是在頁面底部添加一個常規部分。

間距

打開部分設置並刪除所有自定義頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

添加新行

列結構

繼續使用以下列結構添加新行：

漿紗

還沒有添加任何模塊，打開行設置並允許行佔據屏幕的整個寬度。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%

間距

接下來刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

主要元素

通過向行的主要元素添加兩行 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

將文本模塊添加到列

添加內容

現在我們已經完成了所有步驟，我們可以開始關注兩個不同的設計示例，從第一個開始！ 將文本模塊添加到行的列。 在內容框中，我們使用段落樣式來顯示“≡ 菜單”副本。 然後，我們將所有菜單項放在一個無序列表中。 我們還將單獨添加指向每個頁面標題的鏈接。

默認背景顏色

轉到模塊的背景設置並更改背景顏色。

• 背景顏色：#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

將文本模塊添加到列

添加內容

進入第二個例子！ 在這裡，我們將再次使用段落文本樣式添加“≡ 菜單”，並使用無序列表添加菜單項。 我們還將單獨添加指向每個菜單項的鏈接。

默認背景顏色

轉到背景設置並更改背景顏色。

• 背景顏色：#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 Layout Pack 創建一個擴展的粘性菜單。 我們已經處理了兩個不同的設計示例，您可以在您正在構建的任何類型的網站上重新創建和使用它們！ 我們希望您喜歡這個正在進行的 Divi 設計計劃，我們每週都會嘗試在您的設計工具箱中添加一些額外的東西。 如果您有任何問題或建議，請務必在下方評論區留言！

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。