Question

i 需要改进我 ASp. net mvc3 网络应用程序的默认布局模板中的以下内容。

<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>

我想做的是:

How i can change the colour of the currently selected <li>...</li> which is inside the <ul id="menu">. . which can help the users to recognize the web pages there are currently viewing.
How i can add a sub menu which will be shown automatically when the user moves the mouse over a specific <li></li>. BR

Answer 1

You should implement the use of a different menu, there are lots out there! Check this link in order to find some JQuery menus.

哦,Btw,在第二个问题中,你需要的是一个叫做hover () () (http://api.jquery.com/hover/" rel="nofollow">learn 如何使用它)的 JQuery 函数,但别担心,这些菜单中也含有这种功能,只要得到其中之一并适应你的需求。

希望能帮上点忙!

Answer 2

您可以以 < a href= > 创建多层站点映射“ https://github. com/ maartenba/ MvcSiteMapProvider” rel=“ nofollow” >MVCSiteMapProvider 。这里是一个不错的 < a href=" http://edspencer. me.uk/2011/09/20/mvc-sc-scemitap- supportr-tumental-2- breadcrumbs/" rel=“ nofollow” > 来生成您启动的菜单。它使用显示模板生成菜单, 您可以轻松的样式和变化。

如果您更喜欢手工创建菜单, 并想要对当前选中的菜单项目进行样式, 请遵循此教程 : < a href=" http://derekreynolds. wordpress. com/2012/03/19 创建 - 活动流 - menu- unit- in- mvc3/" rel=" nofollow" > 在 MVC3 中创建活动菜单项目

最后一件事就是如何样式/ 动画您的菜单。外面有无数的可用 JQuery 插件, 例如 < a href=> http://webdeignledger.com/resources/14- easi- to- com- com- com-resources/14- flap- down- menu- Solutions" rel= "nofollow"14 很容易执行下调菜单解决方案。

我个人非常喜欢"http://twitter.github.com/bootsstrap/index.html" rel="nofollow" ,它组件。

Answer 3

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

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

下调菜单请到这里:http://www.csnewbie.com/eas-cs-drounddown-menus/ 。

友情链接