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>项目正在生成.因此,我无法<ul>将topmenuitems 放置在topmenu <li>标签中的某个位置.

有人知道如何制作这样的菜单吗？或者<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>