asp.net將類添加到當前menuItem

我是新的asp.net，所以我將欣賞完整的代碼答案。asp.net將類添加到當前menuItem

我在asp.net和c＃網站我新增了菜單的頁面的Site.Master它看起來像這樣：

<asp:Menu ID="mainMenu" runat="server" autopostback="true"> 
      <Items> 
       <asp:MenuItem Text="Home" Value="Home" ></asp:MenuItem> 
       <asp:MenuItem Text="Pipes" Value="Pipes"></asp:MenuItem> 
       <asp:MenuItem Text="View &amp; Query" Value="View &amp; Query"></asp:MenuItem> 
       <asp:MenuItem Text="API" Value="API"></asp:MenuItem> 
      </Items> 
     </asp:Menu>

我現在需要補充的是，當用戶在特定的頁面例如Pipes，那麼右側的menuItem應該具有不同的背景顏色。

我可以使用會話變量，但我不知道該怎麼做。

任何人都可以爲我寫一個完整的例子嗎？

預先感謝您

來源

2011-07-26 Tovi Klein-Berzon

在MenuItem中有navigationurl？ –

是的，我會有 –

你對jQuery感到滿意嗎？ – naveen

您不需要使用會話變量跟蹤的網頁，當你選擇一個菜單項爲，asp.net好心跟蹤您所選擇的項目，並生成自己的CSS類爲你（在大多數情況下）。爲了獲得更好的可視化下載firebug for Firefox並查看HTML輸出，你會發現他們會附加CSS樣式，例如「aspnet.menu selectedItem」，然後創建一個.selectedItem {} CSS類，然後它會自動選取樣式。

但是，如果我記得它可以有點微妙的樣式微軟控制，就好像你檢查輸出的源代碼，它不完全HTML友好。

如果你想使用微軟的做法樣式的菜單項，去這裏http://msdn.microsoft.com/en-us/library/ms366731.aspx

但是有一個叫CSSfriendly http://cssfriendly.codeplex.com/庫呈現純HTML控件，它允許你多少附加CSS類更容易。例如：

.CssAdapterMenu ul.AspNet-Menu /* Tier 1 */ 
{ 
    width: 961px !important; 
    cursor:pointer; 
    background-color:#000000; 
} 

.CssAdapterMenu ul.AspNet-Menu ul /* Tier 2 */ 
{ 
    left: 0; 
    background-color:#f8f8f8; 
    width: 145% !important; 
    max-width: 160px !important; 
} 

.CssAdapterMenu ul.AspNet-Menu ul li:hover /* Tier 2 cell */ 
{ 
    background: #636363 url(../images/menu_bg_hover.png) no-repeat !important; 
} 

.CssAdapterMenu ul.AspNet-Menu ul .AspNet-Menu-Selected{ 
    background: transparent url(../images/menu_bg_hover.png) no-repeat !important; 
} 

.CssAdapterMenu li.AspNet-Menu-WithChildren li .AspNet-Menu-ChildSelected { 
    background: transparent url(../images/menu_bg_hover.png) no-repeat !important; 
}

依此類推等等。這裏有很好的文檔，也是我最喜歡的造型方法。

修改你的代碼，下面我的解釋。

<asp:Menu ID="mainMenu" runat="server" autopostback="true"> 
<Items> 
<asp:MenuItem Text="Home" Value="Home" ></asp:MenuItem> 
<asp:MenuItem Text="Pipes" Value="Pipes"></asp:MenuItem> 
<asp:MenuItem Text="View &amp; Query" Value="View &amp; Query</asp:MenuItem> 
<asp:MenuItem Text="API" Value="API"></asp:MenuItem> 
</Items> 
<StaticMenuItemStyle CssClass="menuItem" /> 
<StaticSelectedStyle CssClass="selectedItem" /> 
<StaticHoverStyle CssClass="hoverItem" /> 
</asp:Menu>

然後在你的CSS：

.normal{ 
background-color:#eaeaea; 
} 

.selected { 
background-color:#000000; 
} 

.hover{ 
background-color:#FF0000; 
}

來源

2011-07-26 08:03:27 tutts

謝謝你，我有螢火蟲，我發現如果我改變一個項目（在編輯菜單項），然後我得到選擇的類，那很好，但現在它如何動態地將正確的類添加到正確的項目？我可能錯過了一些東西，你能更清楚地解釋，它是如何 –

當你創建一個asp頁面時，你可以在這個樣式表中定義一個全局樣式表（style.css），它有多個類.body {} .h1 {} .p {}等等。你需要創建一個類這與asp控件中定義的類相對應，通常你必須像這樣定義asp控件：然後在你的css文件，然後爲子節點添加#mainMenuCss {background-color：#eaeaea;} mainMenuCss .selected項{背景色：＃000000;} – tutts

或使用ASP控制定義：並添加css樣式： .normal {background-color：#eaeaea; } .selected {background-color：＃000000; } – tutts

您可以使用

<DynamicSelectedStyle BackColor="#1C5E55" />

和

<StaticSelectedStyle BackColor="#1C5E55" />

而且通常你需要NavigateUrl屬性爲您MenuItem。所以整個事情看起來像這樣：

<asp:Menu ID="mainMenu" runat="server" autopostback="true"> 
      <Items> 
       <asp:MenuItem Text="Home" NavigateUrl="~/Home.aspx" 
       Value="Home" ></asp:MenuItem> 
    ... 
      </Items> 
      <DynamicSelectedStyle BackColor="#1C5E55" /> 
      <StaticSelectedStyle BackColor="#1C5E55" /> 
     </asp:Menu>

來源

2011-07-26 08:07:30 Kirill

我沒有收到什麼，正確的項目如何獲得選定的樣式？ –

我不知道任何服務器端的方法。我通常使用jQuery採用客戶端方法。爲此，你應該給你的菜單CssClass。例如，CssClass="mymenu"

在您的主頁的頭標籤內，執行此操作。

$(document).ready(function() { 
    // not bothering about query strings and hash right now. 
    var url = window.location.href.toString().split("/").pop(); 
    $(".mymenu a[href*='" + url + "']") 
     .closest("li") 
     .addClass("selected-item"); 
});

免責聲明：我不知道在服務器端這個看似瑣碎需求的解決方案。這是我一直在使用的。哦!並且此代碼適用於ASP.NET 4.0。在此之前，渲染是使用table完成的。你可能想要改變最接近.closest("td")

來源

2011-07-26 09:14:04 naveen

謝謝，虐待使用這個，如果我不能讓服務器端工作。 –

我有一個類似的問題，我無法風格化每個單獨的MenuItem。使用這個帖子...

asp:MenuItem/CSS

...你可以使用如下代碼：

<div> 
    <asp:Menu ID="mainMenu" runat="server"> 
     <Items> 
      <asp:MenuItem NavigateUrl="~/Default.aspx" Text="HOME" /> 
      <asp:MenuItem NavigateUrl="~/Page1.aspx" Text="Page1" /> 
     </Items> 
    </asp:Menu> 
</div>

和CSS：

div.menu ul li a[href*="Default.aspx"] { background-color: rgb(100, 100, 100); } 
div.menu ul li a[href*="Page1.aspx"] { background-color: rgb(150, 50, 100); }

希望這有助於人。 :-)

來源

2013-05-20 15:48:59 codemonkey

asp.net將類添加到當前menuItem

回答

相關問題