Question

我正在尝试创建一个突出显示当前页面的菜单。我在这里找到了一些答案，但问题是我看不到有人处理子菜单。

这里的答案看起来非常简单：active menu item - asp.net mvc3 master page

但据我所知，如果点击一个子菜单，那么只会突出显示子菜单项。我希望突出显示子菜单项，以及顶部菜单中的父项。

E.g。如果有人点击服务，然后点击咨询，我希望突出显示这两个 - 顶层菜单中的服务和子菜单中的咨询。我怎么能这样做？

顺便说一下，我希望能够使用CSS将子菜单渲染为下拉列表，也可以作为侧边栏。如何获取子菜单并将其渲染为侧边栏？

Answer 1

这是一件简单的事情，您可以根据自己的需要进行修改，但基础知识就在这里。 http://developerstyle.posterous.com/highlighting-current-page-in-mvc-3-slick-tric

以上链接可能会在即将发布时关闭，这是一个更新链接 http://bhavinsurela.com/highlighting-current-page-in-mvc-3-slick-tric/

Answer 2

我有一个解决方案，我部分也在这里找到了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 3

通过简单地使用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>

由于我不熟悉您的应用程序结构，因此很难进入更具体的解决方案，但这应该会让您了解入门。

Answer 4

以下是他们处理子菜单并突出显示它的示例。

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

它使用superfish-navbar.css，你可以看到它是如何完成的。这是一个非常好的菜单插件。

突出显示MVC 3中的菜单和子菜单？

4 个答案: