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>

顶部菜单项应具有“活动”和“非活动”的类。我通过制作一个生成顶部菜单项的自定义 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>将 submenuitems 放在 topmenu<li>标记中的某个位置。

有人知道如何制作这样的菜单吗？或者一个想法如何让我<ul>进入 topmenu<li>标签？

4

1 回答 1

7

你可以使用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>

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

<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>
于 2012-06-25T12:04:39.127 回答