ASP.NET MVC ul / li菜单

Question

我正在尝试在我的ASP.NET MVC应用程序中创建一个ul / li菜单。 菜单应该有4到5个顶级菜单项，每个topmenu项应该有一个带有一些子菜单项的悬停/下拉菜单。 完成的菜单结构应该看起来像带有下拉列表的常用ul / li菜单：

<ul>

 <li class="active">
   <a>Topmenu 1</a>
   <ul>
   <li>Submenu1</li>
   <li>Submenu2</li>
   <li>Submenu3</li>
   </ul>
 </li>

  <li class="inactive">
   <a>Topmenu 2</a>
   <ul>
   <li>Submenu4</li>
   <li>Submenu5</li>
   <li>Submenu6</li>
   </ul>
 </li>
  And so on...
</ul> 

顶部菜单项应具有“活动”和“非活动”的类。 我通过制作生成topmenu项目的自定义HtmlHelper解决了这个问题。 看起来像这样：

 public static MvcHtmlString MenuItem(
    this HtmlHelper htmlHelper,
    string text,
    string action,
    string controller
)
    {

        var li = new TagBuilder("li");
        var routeData = htmlHelper.ViewContext.RouteData;
        var currentAction = routeData.GetRequiredString("action");
        var currentController = routeData.GetRequiredString("controller");
        if (string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) &&
            string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase))
        {
            li.AddCssClass("tab active");
        }
        else {
            li.AddCssClass("tab inactive");
        }
        li.InnerHtml = htmlHelper.ActionLink(text, action, controller).ToHtmlString();
        return MvcHtmlString.Create(li.ToString());
    }

我把这个函数称为：

@Html.MenuItem("Katalog", "Index", "Katalog")

这个功能很好用。 不幸的是，整个topmenu <li>项目正在生成。 所以我无法在topmenu <li>标签的某处放置<ul>用于子菜单。

有人知道如何制作这样的菜单吗？ 或者想一想如何将<ul>放入topmenu <li>标签？

Answer 1

你可以使用像Superfish菜单这样的东西。 我用它，它非常好。 您必须拥有的唯一内容是视图中某个位置的菜单结构（例如_Layout.cshtml ）。 如果你选择这样，只需手动创建菜单结构（ <ul><li>)并调用Superfish jQuery插件。 无论您的菜单有多少嵌套级别（ <ul> <li> ），您都可以使用一个非常棒的菜单。 该插件将很好地处理它。

示例代码：

<script type="text/javascript" src="superfish.js"></script>

// Create the root <ul> with id = menu... <ul id="menu">
// Call superfish() on the containing ul element.

<script> 

    $(document).ready(function() { 
        $('ul#menu').superfish(); 
    }); 

</script>

您可以使用以下许多选项自定义菜单：

<script> 

    $(document).ready(function() { 
        $('ul#menu').superfish({ 
            delay:       1000,                            // one second delay on mouseout 
            animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation 
            speed:       'normal',                        // faster animation speed 
            autoArrows:  true,                            // enable generation of arrow mark-up 
            dropShadows: true                             // enable drop shadows 
        }); 
    }); 

</script>