添加下拉橫向菜單的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模板

回答

相關問題