突出顯示MVC 3中的菜單和子菜單？

Question

我正在嘗試創建一個突出顯示當前頁面的菜單。我在這裏找到了一些答案，但問題是我看不到任何人處理子菜單。

這裏有一個答案，看起來誘人簡單：active menu item - asp.net mvc3 master page

但據我所知，如果你點擊一個子菜單，一個將突出僅存在子菜單項。我希望子菜單項突出顯示，以及其頂層菜單中的父項。

E.g.如果有人點擊服務，然後點擊諮詢，我希望這兩個選項都被突出顯示 - 頂部菜單中的服務和子菜單中的諮詢。我怎樣才能做到這一點？

順便說一句，我想能夠呈現子菜單既可以使用CSS下拉菜單，也可以作爲一個側邊欄。我如何獲取子菜單ul並將其呈現爲側欄？

Answer 1

這裏是他們處理子菜單並突出顯示的例子。

http://users.tpg.com.au/j_birch/plugins/superfish/#sample4

它採用快魚-navbar.css在這裏你可以看到它是怎麼做的。 這是一個很好的菜單插件。

Answer 2

這是一件簡單的事情，你可以根據你的需要修改它，但基本知識在這裏。 http://developerstyle.posterous.com/highlighting-current-page-in-mvc-3-slick-tric

這上面的鏈接可能會下跌儘快posterous被關閉是，這裏是一個更新的鏈接 http://bhavinsurela.com/highlighting-current-page-in-mvc-3-slick-tric/

Answer 3

我有我的部分也因此在這裏找到和修改的解決方案，但仍是爲了處理任何數量的子菜單而改進......現在它適用於子菜單。

namespace PhotoBuss.Web.Back.Controllers 
{ 
public class NavigationController : BaseAdministrationController 
{ 
    // 
    // GET: /Common/ 

    [ChildActionOnly] 
    public ActionResult HeaderMenu() 
    { 
     // http://stackoverflow.com/questions/4653226/asp-net-mvc-menu-selected-item 

     var items = new List<MenuItemViewModel> 
     { 
      new MenuItemViewModel{ Text = "home", Action="Index", Controller="Administration", Selected=false}, 
      new MenuItemViewModel{Text = "manage", Action="Index", Controller="Manage", Selected=false, 
      SubMenu = 
      new List<MenuItemViewModel> 
      { 
       new MenuItemViewModel{ Text= "photos", Action="Index", Controller="Photos", Selected = false }, 
       new MenuItemViewModel { Text = "collections", Action="Index", Controller="Collections", Selected=false}, 
       new MenuItemViewModel { Text = "keywords", Action="Index", Controller="Keywords", Selected=false}, 
       new MenuItemViewModel { Text = "users", Action="Index", Controller="Users", Selected=false}, 
       new MenuItemViewModel { Text = "user groups", Action="Index", Controller="Roles", Selected=false} 
      } 
      }, 
      new MenuItemViewModel{Text="cms", Action="Index", Controller="CMS", Selected=false} 
     }; 
     string action = ControllerContext.ParentActionViewContext.RouteData.Values["action"].ToString(); 
     string controller = ControllerContext.ParentActionViewContext.RouteData.Values["controller"].ToString(); 

     foreach (var item in items) 
     { 
      if (item.Controller == controller && item.Action == action) 
      { 
       item.Selected = true; 
      } 
      foreach(var subItem in item.SubMenu) 
       if (subItem.Controller == controller && subItem.Action == action) 
       { 
        item.Selected = 
        subItem.Selected = true; 
       } 
     } 

     return PartialView(items); 
    } 
} 

視圖模型

public class MenuItemViewModel 
{ 
    public MenuItemViewModel() 
    { 
     SubMenu = new List<MenuItemViewModel>(); 
    } 

    public string Text { get; set; } 
    public string Controller { get; set; } 
    public string Action { get; set; } 
    public bool Selected { get; set; } 

    public List<MenuItemViewModel> SubMenu { get; set; } 
} 
} 

觀

@model List<PhotoBuss.Web.Back.Models.Navigation.MenuItemViewModel> 
    <link href="@Url.Content("~/Areas/Admin/Content/CSS/menu.css")" rel="stylesheet" type="text/css" /> 
    <div class="headerMenu"> 
     <ul> 
      @foreach (var menuItem in Model) 
      { 
       <li>@Html.ActionLink(menuItem.Text, menuItem.Action, menuItem.Controller, null, 
     new { @class = menuItem.Selected ? "selected" : "" }) 
        @if (menuItem.SubMenu.Count >0) 
        { 
         <ul class="@(menuItem.Selected ? "selected" : "")"> 

          @foreach (var subMenu in menuItem.SubMenu) 
          { 
           <li>@Html.ActionLink(subMenu.Text, subMenu.Action, subMenu.Controller, null, 
     new { @class = subMenu.Selected ? "selected" : "" })</li> 
          } 
         </ul> 
        } 
       </li> 
      } 
     </ul> 
    </div> 

的CSS我使用這個此刻：

.headerMenu * 
    { 
     padding: 0; 
     margin: 0; 
    } 
    .headerMenu 
    { 
     position: relative; 
     background-color: #78C8FA; 
     width: 100%; 
     text-align: center; 
     color: #FFFFFF; 
     clear: both; 
     float: left; 
     margin-top: 10px; 
    } 
    .headerMenu ul 
    { 
     display: block; 
     list-style: none; 
     line-height: 3em; 
     height: 3em; 
    } 

    .headerMenu ul li 
    { 
     display: inline-block; 
     margin-left: 15px; 
     margin-right: 15px; 
    } 

    .headerMenu ul li a 
    { 
     display: block; 
     text-decoration: none; 
     color: white; 
     font-size: 1.5em; 
     padding-left:2em; 
     padding-right:2em; 
    } 

    .headerMenu ul li a:visited 
    { 
     color: white; 
    } 

    .headerMenu ul li a:hover, .menu ul li 
    { 
     color: #333333; 
    } 
    .selected 
    { 
     color: #333333 !important; 
     display:block !important; 
     background-color: #999999; 
    } 

    .headerMenu ul ul 
    { 
     display: none; 
     position: absolute; 
     width: 100%; 
     right: 50%; 
     left: 0; 
     background-color: #999999; 
    } 

    .headerMenu li:hover > ul, .selected 
    { 
     display: block; 
    } 

Answer 4

這是相當簡單的，以確定哪些菜單元素通過簡單的usi突出顯示ViewContext.RouteData.Values字典，特別是Action和Controller鍵。

這裏有一個快速的輔助方法：

public static string IsSelected(this RouteValueDictionary dictionary, string controller, string action) 
{ 
    string cssClass = "selected"; 
    string routeValueController = dictionary["Controller"] as string; 
    string routeValueAction = dictionary["Action"] as string; 

    return string.IsNullOrEmpty(action) ? 
     routeValueController == controller ? cssClass : string.Empty : 
     routeValueController == controller && routeValueAction == action ? cssClass : string.Empty; 
} 

，可以從視圖中使用這樣的：

<ul id="menu"> 
    <li class="@this.ViewContext.RouteData.Values.IsSelected("Default", "Index")"> 
     <a href="@Url.Action("Index", "Default")">Accueil</a> 
    </li> 
</ul> 

很難進入一個更具體的解決方案，我不熟悉你的應用程序結構，但這應該給你一個開始的想法。