我想添加类似于this blog post的菜单外观和操作。我没有使用HTML5而且我没有使用CSS3。此外,我是一个CSS n00b,并没有真正掌握每个标签做什么(或可以做什么)所以我觉得我在这里淹没了解该做什么。我一直在网上寻找一个我想做的例子,除了上面的链接没有运气。
这是“标准”ASP.NET MVC 2模板。我们实际上喜欢寻找内部应用程序。但是菜单还需要帮助。
这是我到目前为止所做的工作:
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;
}
答案 0 :(得分:1)
所需的细微调整只是引用#menucontainer
而不是nav
的HTML5标记。在博客文章中,您需要将样式表引用调整两次,并将jquery的第一行从$("body nav li").each(function () {
调整为$("body #menucontainer li").each(function () {
。
希望这会有所帮助。
答案 1 :(得分:0)
好吧,无论如何我试过这篇文章,发现它只是做了一些小的调整就可以了。