如何添加下拉菜單圖標？

我對添加某種類型的圖標或指示燈到導航中具有下拉菜單的按鈕有疑問。除了少數例外，菜單在所有瀏覽器中看起來都不錯。菜單本身內置在Ektron CMS中。在我的導航中有7個按鈕，其中5個有下拉菜單。正如你可以在我的網站上看到的，我有一個右箭頭指示哪些有下降。箭頭是一個unicode字符，在將其添加到CMS中的菜單控件中時運行良好。我對結果非常滿意，但我不確定這是否是創建圖標的最佳方式。如何添加下拉菜單圖標？

是否有更好的或更有效的創建這種類型的指標？只有當存在子菜單時，JavaScript中才有方法分配符號或圖標嗎？

雖然我的解決方案有效，但我遇到了一個難題。在IE7 +中，Chrome和Safari的所有按鈕都完美對齊。在FireFox中，沒有下拉菜單的2個按鈕比下拉菜單高4個按鈕。只要我添加了unicode箭頭字符，就會發生這種情況。我添加了一些CSS修正了FF中的問題，但現在我在Chrome中遇到了一個問題，其中最後兩個按鈕比其他按鈕低4px。我不知道如何有效地糾正這個問題。

這是我的網站的一個鏈接。我感謝您提供的任何幫助。

http://www.clinicaltrialsummit.com/

來源

2012-11-29 noahcg

你能否在jsfiddle或codepen中提供一個清晰的例子？ – starikovs

這裏是我的jsfiddle的鏈接。所有按鈕看起來都是在jsfiddle中垂直對齊，但不是在我的現場。但是你可以看到我使用的unicode箭頭，這是我的主要問題。有沒有更好的方式來添加這種類型的菜單指示器？ http://jsfiddle.net/noahcg/bs9kd/2/ – noahcg

查看下面的答案。 – starikovs

嘗試刪除該風格：

#nav li a:last-child[href="http://www.healthtech.com/press.aspx"] { 
    padding: 16px 0.4em 0 
}

你有14px的默認填充頂部，但上面的規則集16像素的填充與特定HREF最後一個孩子。

在你的jsfiddle例子中沒有這個CSS規則。

您可以使用css箭頭代替UTF-8符號或使用圖標，但我認爲可以像使用UTF-8符號一樣。

來源

2012-11-29 15:38:58 starikovs

感謝您的迴應，但我應該提到，你上面引用的風格是我的CSS黑客。我會盡力解釋我使用它的原因。

我需要一種方法來挑出我最後一個導航按鈕，而不能直接將類應用於li。由於菜單本身是使用CMS中的控件創建的，因此HTML標記是動態生成的。我不想使用：last-child僞類，但我也需要一種方法，只爲FF添加額外的填充px。我知道IE會忽略：最後一個孩子。但是，這是我失敗的原因，因爲它也將其添加到Chrome中，我相信Safari。我可以把整個風格拿出來，這可能會幫助你更好地看到我的問題。您會看到，除了FF之外，每個瀏覽器中的垂直對齊都是正確的。

整個隊列是完美的，直到我添加了我的UTF-8字符。那是它錯位的時候，但只在FF。

我該如何添加CSS箭頭？

來源

2012-11-29 16:20:45 noahcg

試試這個http://codepen.io/starikovs/pen/ChDdE – starikovs

感謝您的建議。我剛剛在FF中檢查了你的鏈接，並且這些形狀沒有顯示爲箭頭。它們表現爲梯形。不過，它們在Chrome中顯示爲箭頭。 – noahcg

我使用FF 16.0.2，它工作正常。 – starikovs

如何添加下拉菜單圖標？

回答

相關問題