ASP.NET MVC ul/li 菜单

Question

ASP.NET MVC ul/li 菜单

asp.netasp.net-mvcrazormenuhtml-lists

3

我想在我的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>

顶部菜单项应该具有“active”和“inactive”类。我通过创建自定义的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());
    }

I call the function like this:

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

这个函数很好用。不幸的是，整个顶部菜单的<li>项目都会被生成。所以我无法在顶部菜单的<li>标签中放置子菜单项的<ul>。

有没有人有什么想法可以制作这样的菜单？或者有什么办法可以让我的<ul>进入顶部菜单的<li>标签中？

- colosso

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Leniel Maccaferri · Accepted Answer

您可以使用类似于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>