添加下拉横向菜单的ASP.NET MVC 2模板

我想添加一个菜单的外观和操作上类似于this blog post。我没有使用HTML5，也没有使用CSS3。另外，我是一个CSS的n00b并没有真正掌握每个标签做什么（或者可以做的），所以我觉得我理解做什么淹没在这里。我一直在网上寻找我想要做的事情的例子，除了上面的链接之外，没有运气。添加下拉横向菜单的ASP.NET MVC 2模板

这是 “标准” ASP.NET MVC 2模板。我们实际上喜欢看我们的内部应用程序。但菜单还需要帮助。

这是我迄今为止的工作：

Current menu

HTML：

 <div id="menucontainer"> 
      <ul id="menu"> 
       <li><%= Html.ActionLink("Home", "Index", "Home")%></li> 
       <li><%= Html.ActionLink("Sign Timesheet", "Index", "Timesheet") %></li> 
       <li> 
        <%= Html.ActionLink("Leave Requests", "Index", "LeaveRequest") %> 
        <ul> 
         <li><%= Html.ActionLink("New Leave Request", "Create", "LeaveRequest")%></li> 
         <li><%= Html.ActionLink("Leave Request History", "History", "LeaveRequest") %></li> 
        </ul> 
       </li> 
       <%--<li><%= Html.ActionLink("About", "About", "Home")%></li>--%> 
       <li><a href="#" target="_blank">NaviLine</a></li> 
       <li><%= Html.ActionLink("Help", "Help", "Home") %></li> 
      </ul> 
     </div>

CSS：

/* TAB MENU 
----------------------------------------------------------*/ 
ul#menu 
{ 
    border-bottom: 1px #5C87B2 solid; 
    padding: 0 0 2px; 
    position: relative; 
    margin: 0; 
    text-align: right; 
} 

ul#menu li 
{ 
    display: inline; 
    list-style: none; 
} 

ul#menu li#greeting 
{ 
    padding: 10px 20px; 
    font-weight: bold; 
    text-decoration: none; 
    line-height: 2.8em; 
    color: #fff; 
} 

ul#menu li a 
{ 
    padding: 10px 20px; 
    font-weight: bold; 
    text-decoration: none; 
    line-height: 2.8em; 
    background-color: #e8eef4; 
    color: #034af3; 
} 

ul#menu li a:hover 
{ 
    background-color: #fff; 
    text-decoration: none; 
} 

ul#menu li:hover ul 
{ 
    display: block; 
} 

ul#menu li a:active 
{ 
    background-color: #a6e2a6; 
    text-decoration: none; 
} 

ul#menu li.selected a 
{ 
    background-color: #fff; 
    color: #000; 
} 

ul#menu li ul 
{ 
    position: absolute; 
    right: 0px; 
    top:34px; 
    display: none; 
}

来源

2011-03-16 Mike Wills

只是好奇。有大量的JavaScript启用菜单，你可以作为插件。你有没有使用这些特殊原因？ – CtrlDot 2011-03-16 15:17:21

之前有人问。这是一个内部应用程序和我们的官方浏览器是IE 8，我们有很多的IE 7火车站，同时还为好。 HTML5在内部并没有多大意义。 – 2011-03-16 15:18:41

@CtrlDot我想我沿着CSS的线大多思维，所以我可以尝试学习一些。如果我可以用jQuery或JavaScript来做到这一点，我并不反对。 – 2011-03-16 15:21:47

所需的一些小改动都只是参考#menucontainer，而不是nav的HTML5标记。在博客中，你将需要调整样式参考两次，jQuery的从$("body nav li").each(function() {到$("body #menucontainer li").each(function() {第一线。

希望这有助于。

来源

2011-03-25 16:23:13 Chris

好吧，我试过文章无论如何，发现它工作得很好，只有一些小的调整。

来源

2011-03-16 16:03:05

添加下拉横向菜单的ASP.NET MVC 2模板

回答

相关问题