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>项目正在生成。因此，我无法将<ul>放置在topmenu <li>标记中的某个子菜单中。

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

Answer 1

您可以使用Superfish menu之类的内容。我用它，它非常好。您必须拥有的唯一内容是视图中某个位置的菜单结构（例如_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>

ASP.NET MVC ul / li菜单

1 个答案: