如何使用 Divi 在您的頁面上懸停/單擊時創建模糊菜單
已發表: 2019-07-03每週，我們都會為您提供新的免費 Divi 佈局包，您可以將其用於下一個項目。 對於其中一個佈局包，我們還分享了一個用例，可幫助您將網站提升到一個新的水平。
本週，作為我們正在進行的 Divi 設計計劃的一部分，我們將向您展示如何創建一個令人驚嘆的模糊菜單，一旦您懸停或單擊它就會展開。 我們將首先通過一些一般步驟開始。 我們將繼續使用 Blurb 模塊添加菜單項，最後我們將允許您在懸停或點擊效果之間進行選擇。
讓我們開始吧！
預覽
在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。
懸停方式
桌面
移動的
點擊模式
桌面
移動的
1. 創建空白頁面並上傳觀光登陸頁面
添加新的空白頁面並啟用 Divi Builder
您需要做的第一件事是創建一個新的空白頁面。 為您的頁面命名並切換到 Divi Builder。
上傳觀光登陸頁面
啟用 Divi Builder 後，上傳 Sightseeing Layout Pack 的登陸頁面佈局。
2.在頁面底部添加新的常規部分
隱藏主菜單欄後，我們可以開始添加模糊菜單。 為此，我們將在頁面底部添加一個新的常規部分。
背景顏色
打開部分設置並添加稍微透明的白色背景色。
- 背景顏色：rgba(255,255,255,0.98)
間距
轉到設計選項卡並刪除該部分的所有默認頂部和底部填充。
- 頂部填充：0px
- 底部填充：0px
默認框陰影
在接下來的部分添加框陰影。
- 框陰影模糊強度：18px
- 陰影顏色：#383838
懸停框陰影
並在懸停時更改框陰影模糊強度。
- 框陰影模糊強度：1000px
隱藏部分溢出並增加 Z 索引
我們將使用節大小設置來使這項技術起作用，但為了確保沒有超出節容器的內容，我們需要隱藏溢出。 我們還增加了 Z 索引，以確保該部分位於頁面其餘部分的頂部。
- 水平溢出：隱藏
- 垂直溢出：隱藏
- Z指數：9999
3. 確保所有部分菜單內容都是使用 Vw 創建的並適合所有屏幕尺寸的 100 視口高度
添加第 1 行
列結構
完成基本部分設置後，就可以添加要在菜單中顯示的所有內容了。 您可以使用 Divi 的設計元素和內置選項創建您想要的任何設計，但您必須確保它適合所有屏幕尺寸的“100vh”高度。 為了實現這一點，我們將在整個構建過程中使用視口寬度單位，並在不同屏幕尺寸上調整值。 首先使用以下列結構向您的部分添加新行：
漿紗
在不添加任何模塊的情況下，打開行設置並確保它佔據該部分的整個寬度。
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 寬度：100%
- 最大寬度：100%
間距
轉到間距設置並刪除所有默認的頂部和底部填充。
- 頂部填充：0px
- 底部填充：0px
將文本模塊添加到列
添加符號
繼續向行的列添加文本模塊。 將“=”符號添加到內容框中或隨意使用您選擇的任何其他符號。
背景顏色
接下來更改模塊的背景顏色。
- 背景顏色：#000000
文字設置
轉到設計選項卡並更改文本設置。
- 文字字體：Open Sans
- 文本對齊：居中
- 文字顏色：#ffffff
- 文字大小：3vw（桌面）、5vw（平板電腦）、7vw（手機）
- 文本行高：1em
間距
我們還使用以下自定義填充值在模塊的頂部和底部添加了一些空間：
- 頂部填充：2.5vw（桌面）、3.5vw（平板電腦）、5vw（手機）
- 底部填充：2.5vw（台式機）、3.5vw（平板電腦）、5vw（手機）
添加第 2 行
列結構
繼續使用以下列結構添加第二行：
漿紗
還沒有添加任何模塊，打開行設置並允許行佔據屏幕的整個寬度。
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 寬度：100%
- 最大寬度：100%
間距
繼續進行間距設置，然後添加一些自定義的頂部和底部填充。
- 頂部填充：2vw（桌面）、4vw（平板電腦）、6vw（手機）
- 底部填充：2vw（桌面）、4vw（平板電腦）、6vw（手機）
展示
為了確保兩列在較小的屏幕尺寸上保持彼此相鄰，我們將向行的主要元素添加一行 CSS 代碼。
display: flex;
將 Blurb 模塊添加到第 1 列
添加內容
是時候開始添加菜單項了！ 將新的 Blurb 模塊添加到該行的第一列並輸入您選擇的一些內容。
選擇圖標
接下來選擇一個圖標。
添加鏈接
並輸入與菜單項匹配的頁面鏈接。
- 標題鏈接網址：#
圖標設置
轉到設計選項卡並相應地更改圖標設置：
- 圖標顏色：#ff3314
- 圖標位置：頂部
- 使用圖標字體大小：是
- 圖標字體大小：2vw（桌面）、3vw（平板電腦）、4vw（手機）
標題文字設置
還要修改標題文本設置。
- 標題字體：PT Serif
- 標題字體樣式：下劃線
- 標題下劃線顏色：#ff3314
- 標題文本對齊：居中
- 標題文字大小：1.8vw（桌面）、2.3vw（平板電腦）、3.3vw（手機）
正文設置
然後，更改正文文本設置。
- 正文字體：Lato
- 正文對齊方式：居中
- 正文顏色：#c6c6c6
- 正文大小：0.9vw（桌面）、1.7vw（平板電腦）、2.1vw（手機）
- 車身線高：1.8em
漿紗
並使用以下值更改不同屏幕尺寸的模塊寬度：
- 寬度：60%（桌面）、65%（平板）、80%（手機）
動畫片
我們還在動畫設置中刪除了圖標動畫。
- 圖標動畫：無動畫
克隆 Blurb 模塊並在第 2 列中放置重複項
完成 Blurb 模塊後，您可以克隆它並將副本放置在該行的第二列中。
更改副本
確保您更改了副本。
更改圖標
隨著圖標。
更改鏈接
以及與新菜單項匹配的頁面鏈接。
克隆行兩次
完成行中的兩個 Blurb 模塊後，您可以克隆整行兩次。
單獨更改每個 Blurb 副本的副本、圖標和鏈接
確保單獨更改每個模糊菜單項的副本、圖標和鏈接。
4. 使部分具有粘性
默認
將要顯示的所有元素添加到您的部分後，您可以通過將以下兩行 CSS 代碼添加到該部分的主要元素，使該部分粘在頁面的左上角：
position: fixed; top: 0;
懸停（重要！）
在該部分的主要元素上啟用懸停選項，並確保該部分在此狀態下也保持粘性。
position: fixed;
5. 選擇一種方法：A) 懸停菜單或 B) 單擊菜單
A) 懸停菜單
默認部分大小
在本教程的下一部分中，您需要選擇一種首選方法； 懸停或單擊的菜單。 懸停菜單的行為類似於較小設備上的點擊菜單。 如果您決定選擇懸停選項，請再次打開部分設置，轉到大小設置並相應地更改菜單的寬度和高度：
- 寬度：8vw（桌面）、12vw（平板電腦）、20vw（手機）
- 高度：7.4vw（桌面）、12vw（平板電腦）、16vw（手機）
懸停部分大小
修改懸停時的值以創建擴展菜單。
- 寬度：80%
- 高度：100vh
B) 點擊菜單
將 CSS 類添加到文本模塊
如果您想要一個僅在單擊時打開的菜單，則必須打開包含菜單符號的文本模塊。 轉到高級選項卡並添加自定義 CSS 類。
- CSS 類：全寬開放
將 CSS 類添加到部分
接下來打開部分設置並添加一個不同的 CSS 類。
- CSS 類：平滑變換
截面尺寸
接下來我們將修改部分的寬度和高度。
- 寬度：8vw（桌面）、12vw（平板電腦）、20vw（手機）
- 高度：7.4vw（桌面）、12vw（平板電腦）、16vw（手機）
向頁面添加代碼
將新行添加到部分底部
現在，要創建切換效果，我們需要一些 JQuery 和 CSS 代碼。 首先將代碼模塊添加到部分底部的新行。
將代碼模塊添加到部分並插入 JQuery 切換代碼
複製以下幾行 JQuery 代碼並將它們粘貼到代碼框中：
<script>
jQuery(function($){
$(".fullwidth-open").click(function() {
$('.smooth-transform').toggleClass('smooth-transform-active');
});
});
</script>
將自定義 CSS 代碼添加到頁面設置
最後但同樣重要的是，接下來打開頁面設置並添加以下 CSS 代碼行：
.smooth-transform-active {
height: 100vh;
width: 80%;
}
.smooth-transform {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
懸停方式
桌面
移動的
點擊模式
桌面
移動的
最後的想法
在這篇文章中，我們向您展示瞭如何創建一個漂亮的模糊模塊，該模塊在點擊/懸停時展開（取決於您的偏好）。 這是為您的菜單添加額外交互性同時在所有屏幕尺寸上保持響應結果的好方法。 如果您有任何問題或建議，請務必在下方評論區留言！
如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。