天津十一选五开奖结果:寧波公司網站建設:3漂亮的CSS Hover效果,您可以添加到您的Divi菜單

寧波網站建設 | 2019-04-30

天津十一选五投注技巧 www.tfjoq.icu 你的菜單是訪問者在訪問你的網站時最先看到的東西之一,所以你希望它有一些風格,對嗎?你當然知道!這就是為什么在今天的文章,我將分享三種方式,添加一些良好的懸停效果到您的菜單與自定義CSS。

懸停效果應該是微妙的,我們想要視覺興趣,但這不是網站最重要的部分,你的內容是。這些將添加適量的“彈出”到您的Divi導航。

我們寧波公司網站建設不僅會添加一個很好的懸停效果,而且還會有一些樣式應用于活動頁面的鏈接。例如,如果用戶在主頁上,那么菜單中的主頁鏈接就會有一些小的設計處理。這是一個常見的視覺標記,包括在網站上,以幫助提醒用戶他們在網站上的位置。這不是絕對必要的,但這是一個很好的幫助用戶體驗。

主題定制程序設置

首先,對于所有的樣式,我們將使用頭格式的默認設置。如果您剛剛安裝了Divi,您不需要配置這個設置,它應該自動設置為這個設置。

寧波公司網站建設

花式單線下面

在這個菜單樣式中,我們將添加一條從左到右的直線,它就在被懸停的菜單項下面。它還將在活動頁面鏈接的正下方設置一條靜態行。

靈感

這是一個非常好的效果,可以很好地工作在幾乎任何類型的網站,加上編輯這種風格的代碼,以改變顏色和線寬是相當容易的任何級別的用戶。這是一個非常流行的懸停效果,我在網站上看到了很多年。我認為它的微妙之處使它如此多用途,它可以用于房地產網站,以及音樂家的網站和一切介于兩者之間的。

實施

寧波公司網站建設將以下代碼添加到子樣式表或divi主題選項>通用>自定義CSS框:

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}
#top-menu li a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 50%;
 background: #15bf86; /*** COLOR OF THE LINE ***/
 height: 3px; /*** THICKNESS OF THE LINE ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#top-menu li a:hover {
 opacity: 1 !important;
}
#top-menu li a:hover:before {
 right: 0;
}
#top-menu li li a:before {
 bottom: 10%;
}

樣式兩層厚的“正方形”,下面是線條。

在這種菜單樣式中,我們將放置一個大的“塊狀”行,從鼠標懸停在菜單項下的菜單部分向下移動。它還在活動菜單鏈接上放置了一個塊狀框。

靈感

我在我開發的一個名為Execute的Divi子主題上使用了這種風格(我將鏈接到下面的演示,這樣您就可以看到實際站點上的懸停)。從視覺上看,這并不像第一種風格那樣微妙,我認為選擇合適的站點來使用它才是關鍵。這是重要的匹配任何類型的小設計細節,如懸停效果,以網站的整體感覺。

實施

寧波公司網站建設將下面的代碼添加到子主題的樣式表中,或者添加到Divi的自定義CSS框中的ThemeOptionsGeneral選項卡下。就編輯顏色而言,更改非常容易,但是如果您計劃更改邊框的寬度,您將發現還需要使用CSS中的其他數字。

#top-menu li > a:hover {
 box-shadow: 0 10px 0 0 #F15A29 !important; /*** COLOR AND THICKNESS OF THE LINE ON HOVER ***/
 padding-bottom: 34px;
 opacity: 1 !important;
}
#top-menu li li a {
 padding-bottom: 6px !important;
}
#top-menu li.current-menu-item > a,
.et-fixed-header #top-menu li.current-menu-item > a {
 border: 10px solid #F15A29; /*** COLOR AND THICKNESS OF THE BOX ***/
 padding: 10px;
 margin-bottom: -10px;
}

樣式三背景彩色按鈕

此菜單樣式將菜單項轉換為具有協調懸停顏色的按鈕。它還為活動菜單鏈接提供了另一種單獨的顏色。

靈感

當然,這是受紐扣啟發的。</div>

<div id= 上一篇:寧波網站制作公司:使用Divi的16個房地產網站實例下一篇:寧波設計公司:如何清除WordPress緩存

天津十一选五投注技巧
聯系電話 400-6065-301

微信咨詢 寒總監