WordPress的下拉列表 - 添加箭頭

-2

我想添加一個（CSS？） -arrow像下面這樣到我的Wordpress生成的下拉子菜單。WordPress的下拉列表 - 添加箭頭

有沒有辦法做到這一點？

如果您需要更多信息，請詢問。

Regards

來源

2016-04-06 Johannes

你試圖做什麼來實現這個目標？你有什麼具體問題？這不是一個您可以讓人們爲您編寫代碼的地方。這是一個獲得編寫代碼幫助的地方。 – CaldwellYSR

我的問題是我不知道如何從這裏開始。我的wp_nav_menu（）函數爲我做了一切，我不知道該如何改變才能實現圖像中顯示的內容。 – Johannes

'wp_nav_menu'函數並不能完成所有工作。它給你的只是結構和內容。你必須使用CSS來改變佈局，顏色，大小，位置等任何東西......我會建議使用Google搜索如何設置下拉式菜單以獲得良好的起點。 – CaldwellYSR

在CSS3中，我們可以製作形狀。並非所有的形狀都能在所有瀏覽器中正確渲染，目前只有支持CSS3的Web瀏覽器才能正常工作。

這是標記。

<ul class="sub-menu"> 
    ... 
</ul>

這是風格。

.sub-menu { 
    position: relative; 
} 
.sub-menu:after { 
    content: ''; 
    width: 0; 
    height: 0; 
    border-bottom: 120px solid blue; 
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent; 
    position: absolute; 
    top: 0; 
    left: 25px; 
    transform: translate(0, -100%); 
}

您可能會發現這是很有幫助的，以及 - http://www.cssportal.com/css3-shapes/

來源

2016-04-06 18:45:36 jarmerson

我編輯你的答案是更具體的WP和使用僞元素。 – CaldwellYSR

@CaldwellYSR謝謝。 – jarmerson

-1

我不是太肯定的WordPress但CSS可以配置是這樣的：

.buttonArrow:hover 
    { 
    background: url(blue-arrow.png); 
    }

的想法是，在懸停（或點擊下拉菜單），彈出箭頭圖像。我不確定是否有辦法在WordPress上輕鬆完成。你必須匹配箭頭的顏色和下拉的顏色，在這種情況下，藍色。

/u/jarmerson的回答也很好。您也可以嘗試查看W3Schools中的SVG以瞭解更多形狀。

來源

2016-04-06 18:56:08 Wolfrum

然後有人更改下拉顏色，會發生什麼？具有CSS三角形的僞元素要好得多。 – CaldwellYSR

是的，我把/ u/jarmerson的答案作爲一個好的（甚至更好的）解決方案列入了僞元素。 – Wolfrum

WordPress的下拉列表 - 添加箭頭

回答

相關問題