幫助在Asp.Net中設置菜單控件的樣式

我試圖將一個包含菜單控件的用戶控件放在一起。我擁有的是一個水平導向的菜單，並使用4個GIF作爲單獨的菜單項，它們之間的距離大約爲10px。這很簡單，但我需要的是將鼠標懸停在每個gif上。即時通訊很確定菜單控件不支持圖像交換懸停功能，所以即時通訊試圖找到解決辦法。即時猜測它會涉及一些聰明的CSS，但即時通訊完全卡住，根本無法弄清楚這一點。任何幫助？幫助在Asp.Net中設置菜單控件的樣式

側面的問題在這裏：我被要求把菜單放在用戶控件中，然後註冊到母版頁中。這是否有益處？爲什麼不直接將菜單編碼到母版頁而不是單獨的用戶控制中？

謝謝...

來源

2010-06-24 400_the_cat

我會建議使用兩個CSS樣式。在您的第一種風格上，您可以爲您的非懸停狀態設置背景圖片。在第二種風格中，您可以使用背景圖像作爲懸停狀態。然後，您可以使用MenuItemStyles和HoverMenuItemStyles。以下是一些快速示例代碼：

menuItem {background-image：url（'menuItemImg.gif'）;背景位置：左中心;背景重複：不重複; } hoverItem {background-image：url（'hoverItemImg.gif'）;背景位置：左中心;背景重複：不重複; }

...

<asp:Menu ID="menu1" runat="server" StaticMenuItemStyle-CssClass="menuItem" StaticHoverStyle-CssClass="hoverItem"> 
    <Items> 
     ... 
    </Items> 
</asp:Menu>

您可能需要如果你使用動態的項目切換到DynamicMenuItemStyle等。

來源

2010-06-24 01:15:44 CodingGorilla

嗨，我試過你的示例代碼，它不適合我。因爲靜態圖像和懸停圖像是由CSS設置，即時通訊假設我不需要設置MenuItem控件的ImageUrl屬性，是對的，只是讓它保持空白？當我運行我的代碼時，我只是得到一個空白處，菜單應該彈出。即時猜測我的CSS是錯誤的： .staticMenu {background-image：url（'nav_home_original.gif'）;背景位置：左中心;背景重複：不重複; } \t \t .hoverMenu {background-image：url（'images/nav_home_rollover.gif'）;背景位置：左中心;背景重複：不重複; } – 2010-06-24 02:20:10

這是正確的，保持ImageUrl未設置。你的CSS看起來是正確的，但也許你需要檢查你的url（''）的路徑。你有它的方式設置它看起來像圖片將在網站的根源，是正確的？此外，我沒有顯示的東西，您可能需要添加一些邊距或填充文本，以推動他們正確的背景圖像;由於圖像是背景圖像，因此文本可以位於其上。 – CodingGorilla 2010-06-24 12:31:08

你可以做的是結合編碼大猩猩提到的方法CSS Sprites。我之所以這麼說，是因爲如果你只是在用戶第一次將鼠標懸停在菜單項上時才替換圖像，他們將不得不等待第二個圖像加載，否則將無法順利轉換。使用CSS Sprites Technique，您可以加載包含非懸停狀態和懸停狀態的圖像，只需更改圖像的位置即可，從而使體驗更加流暢。

來源

2010-06-24 01:40:19

幫助在Asp.Net中設置菜單控件的樣式

回答

相關問題