MVC 3のメニューとサブメニューをハイライトしますか？

Question

現在のページをハイライト表示するメニューを作成しようとしています。私はここでいくつかの答えを見つけましたが、問題は誰もがサブメニューを処理することがわかりません。

enticinglyシンプルに見えますここに答えがあります：あなたは、サブメニューをクリックした場合active menu item - asp.net mvc3 master page

しかしが、私の知る限り、1つだけのサブメニュー項目をハイライト表示されますが。私は、トップメニューにその親だけでなく、サブメニュー項目を強調したい。

など。誰かが「サービス」をクリックしてから「コンサルティング」をクリックすると、トップメニューのサービスとサブメニューの「コンサルティング」の両方が強調表示されます。これどうやってするの？

ところで、サブメニューをCSSを使ったドロップダウンとサイドバーとしてレンダリングできるようにしたいと思います。どのようにサブメニューulをサイドバーとしてレンダリングできますか？

Answer 1

ここでは、サブメニューを処理して強調表示する例を示します。

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

それはあなたがそれがどのように行われるかを確認できSUPERFISH-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

私はパートでもSOにここに発見し、修正のソリューションを持っているが、それでもとしてはします任意の数のサブメニューを処理するために改善されました...今すぐサブメニューで機能します。

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); 
    } 
} 

のViewModel

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でハイライトするメニュー要素辞書、具体的には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> 

それは私が慣れていないんだと、より具体的な解決策に取得するのは難しいですあなたのアプリケーションの構造を理解しておく必要があります。