CSS for Wordpress Customizr主題導航懸停動畫

我一直在爲這個看似微不足道的事情忙了一會兒，但我在我的智慧結尾。我在我的網站上運行免費的Customizr主題。CSS for Wordpress Customizr主題導航懸停動畫

我想實現是有hover effect in the navigation bar like this demo here.正如你所看到的，只有的下拉菜單項是很好的強調了文本。

我發現並試圖在這裏使用的CSS代碼：

.sliding-middle a { 
    display: inline-block; 
    position: relative; 
    padding-bottom: 3px; 
} 
.sliding-middle a:after { 
    content: ''; 
    display: block; 
    margin: auto; 
    height: 3px; 
    width: 0px; 
    background: transparent; 
    transition: width .3s ease, background-color .3s ease; 
} 
.sliding-middle a:hover:after { 
    width: 100%; 
    background: #08c; 
}

但是，結果我得到了as you can see here，下拉菜單項在下劃線的所有道路。我發現如果我沒有定位「a」標籤，這條線在主菜單項上會顯得更奇怪。但是通過這樣做，整個子菜單都會繼承這個效果。

如果有人有任何想法我想念，請幫助我。先謝謝你！

來源

2017-10-08 JustFoxeh

好吧！經過幾天的強調和打破我的網站，我終於解決了這個問題。

首先，如@ janh2提到的，您需要獲取頁面以將span標記添加到導航菜單標籤。我問了一個不同的問題，並且have updated it with the answer。

下它只是使用下列得到結果：

.sliding-middle span { 
    display: inline-block; 
    position: relative; 
    padding-bottom: 3px; 
} 
.sliding-middle span:after { 
    content: ''; 
    display: block; 
    margin: auto; 
    height: 3px; 
    width: 0px; 
    background: transparent; 
    transition: width .3s ease, background-color .3s ease; 
} 
.sliding-middle span:hover:after { 
    width: 100%; 
    background: black; /*colour you want your line to be*/

我希望這可以幫助你們。

來源

2017-10-09 09:19:44 JustFoxeh

要實現這個例子使用了一個內部的兩個跨度節點，只針對第一個（添加僞：前）如果你添加一個跨度鏈接文本與此CSS

.header-skin-light [class*=nav__menu] li>a>span:first-of-type:hover::before { 
    background-color: #313131; 
    visibility: visible; 
    -webkit-transform: translate3d(0,0,0) scaleX(1); 
    -moz-transform: translate3d(0,0,0) scaleX(1); 
    transform: translate3d(0,0,0) scaleX(1); 
}

，你應該得到幾乎相同的結果。

來源

2017-10-08 14:15:50 janh

謝謝，janh2。是的，我注意到了span標籤。但是，我不知道如何將該跨度添加到單個鏈接，因爲導航欄是由主題生成的。另外，-webkit-和-moz-屬性是強制性的嗎？ – JustFoxeh

您是否創建了一個兒童主題（如果您想更改內容，您應該怎麼做）？如果菜單是使用'wp_nav_menu（）'（通常是）生成的，則可以使用[自定義漫遊器]（https://codex.wordpress.org/Class_Reference/Walker）來更改輸出並添加您需要的跨度。 – janh

是的，我爲所有定製使用兒童主題。對不起，但我真的失去了這一點。在谷歌搜索了一下關於自定義步行者以將標籤放入標籤之後，我得到了一堆我無法做出正面或反面的代碼。到目前爲止，我的理解是，我可以使用walker來編輯'wp_nav_menu'，並以某種方式將span擴展到標籤中。 – JustFoxeh

CSS for Wordpress Customizr主題導航懸停動畫

回答

相關問題