ASP.NET MVC ul/li 菜单

Question

我正在尝试在 ASP.NET MVC 应用程序中创建 ul/li 菜单。菜单应该有 4 到 5 个顶部菜单项，每个顶部菜单项应该有一个带有一些子菜单项的悬停/下拉菜单。完成的菜单结构应该看起来像一个带有下拉菜单的普通 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> 

顶部菜单项应具有“事件”和“非事件”类。我通过制作一个生成顶部菜单项的自定义 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")

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

有人知道如何制作这样的菜单吗？或者知道如何获得我的 <ul>进入顶部菜单<li>标签？

Answer 1

您可以使用类似 Superfish menu 的内容。我用它，效果非常好。您唯一需要拥有的是 View 中某处的菜单结构(例如 _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>

您可以自定义菜单，其中包含大量options像这样:

<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>