如何改进我的 asp.net mvc 3 Web 应用程序的默认布局模板？答案

【问题标题】：How can i improve the default layout template for my asp.net mvc 3 web application?如何改进我的 asp.net mvc 3 Web 应用程序的默认布局模板？
【发布时间】：2012-05-23 01:06:51
【问题描述】：

我需要在我的 asp.net mvc3 Web 应用程序的默认布局模板中改进以下内容。部分布局模板如下所示：-

<div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("Statistics", "Index", "Statistics")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>

我想做的是：-

如何更改当前选中的<li>...</li> 的颜色，它位于<ul id="menu">. 内。这可以帮助用户识别当前正在查看的网页。
如何添加子菜单，当用户将鼠标移到特定的<li></li>. 上时会自动显示该子菜单 BR

【问题讨论】：

标签： jquery css asp.net-mvc-3 razor

【解决方案1】：

您应该使用不同的菜单，那里有很多！检查此link 以找到一些JQuery 菜单。

哦，顺便说一句，在您的第二个问题中，您需要的是一个名为 hover() 的 JQuery 函数（learn 如何使用它），但别担心，这些菜单中也有实现，只需获取其中一个即可根据您的需要进行调整。

希望对你有所帮助！

【讨论】：

【解决方案2】：

您可以使用MVCSiteMapProvider 创建多级站点地图。这是一个很好的tutorial 让你开始。它使用显示模板生成菜单，您可以轻松地对其进行样式设置和更改。

如果您喜欢手动创建菜单并希望设置当前选定菜单项的样式，请按照以下教程操作：Create active menu item in MVC3

最后一件事是如何为您的菜单设置样式/动画。有大量可用的 jQuery 插件，例如 14 easy to implement drop down menu solutions。

我个人非常喜欢Twitter Bootstrap，它是components。

【讨论】：

【解决方案3】：

<ul id="menu">
  <li class="current">Home</li>
<ul>

<style>
  .current{background:#000;}
</style>

对于下拉菜单，请访问此处：http://www.cssnewbie.com/easy-css-dropdown-menus/。

【讨论】：