如何在菜單中的項目周圍創建「繪製」樣式線

我正在爲WordPress開發一個菜單，並且我試圖獲得一個「繪製」像不同菜單項的邊框。如何在菜單中的項目周圍創建「繪製」樣式線

至於現在我有一個'繪製'的背景。（我們稱之爲bg.png）。

我可以得到圍繞菜單項的圓圈，並將其放置正確。但是當然我的菜單項中的一些字比其他的要長。

這是怎樣我現在使用菜單的積極作用：

url('img/bg.png'); 
background-repeat: no-repeat; 
background-position-y: 10;

這顯示了一圈盤旋時的菜單項，但有些話它太大或過小。這是像我使用的PNG：http://instantsplash.com/a/images/hand-drawn/circles/04.png

在此先感謝！

來源

2014-08-27 Deaurin

使用邊框和邊框半徑css？ – Pete 2014-08-27 13:08:49

我以前的工作有類似的問題。

您必須決定是否要在某些物品上放置大圖像，或者如果文字較大，可能會使物品重疊。

另一種解決方案是在css中使用background-size屬性，並將圖像拉伸至容器的大小。但是這種解決方案可能會導致比例或圖像質量問題。

來源

2014-08-27 13:07:42 wyem

這意味着我應該爲每個菜單項目製作一個特定的bg類嗎？ – Deaurin 2014-08-28 12:17:12

不，您可以使用一個CSS選擇器來定位所有菜單項，例如'.menu a {css code here}'或'.menu li {css code here}'。然後使用'background-size：100％100％;'你的圖片應該能夠伸展到元素的大小。 – wyem 2014-08-28 12:46:04

我忘了你希望這個圓圈出現在懸停狀態，所以選擇器看起來像這樣'menu li：hover {css code here}' – wyem 2014-08-28 14:14:39

其中一個選項可能是如果您可以使用javascript/jQuery來測量懸停元素的大小，而不是您可以調整大小「繪製」的圓形圖像。

$('li.menu-items').hover(function(){ 
    $(this).addClass('hovered').css('background-size', $(this).width()); 
},function(){ 
    $(this).removeClass('hovered'); 
})

來源

2014-08-27 13:23:24 shershen

這似乎很好，我會嘗試如果我能得到這個工作！ – Deaurin 2014-08-28 12:17:53

如何在菜單中的項目周圍創建「繪製」樣式線

回答

相關問題