导航栏与Css的造型

我的视图顶部有几个导航栏。我使用MVC 4 Razor View来设计我的布局。现在我设法使导航栏具有悬停效果，但我需要做更多的事情。导航栏与Css的造型

现在，这是我在我的观点。 enter image description here

默认情况下，我希望主页栏显示为橙色。当用户导航到其他酒吧时，主页栏将恢复正常，选定的栏将具有活动样式。

这是我在CSS中的样式。

ul.topnav 
{ 
    display:table; 
    list-style: none; 
    padding: 0px 0px 0px 10px; 
    margin: 0px 0px 0px 0px; 
    width: 100%; 
    text-align: left; 
    font-size: 1.2em; 
} 
ul.topnav li 
{ 
    width: auto; 
    display:table-cell; 
    margin: 0px 6px; 
    padding: 0 15px 0 0; 
} 
ul.topnav li a 
{ 
    margin: 0px 6px; 
    border-top: 5px solid #CCC; 
    padding: 0 15px 0 0; 
    color: black; 
    display: block; 
    text-decoration: none; 
} 
ul.topnav li a:hover 
{ 
    color: #eb8c00; 
    border-top: 5px solid #eb8c00; 
    margin: 0px 6px; 
    padding: 0 15px 0 0; 
    display: block; 
}

而在我的_Layout.cshtml中，这是我的代码。

<div id="app-top-navigation"> 
     <ul class="topnav"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Reports</a></li> 
      <li><a href="#">About Us</a></li> 
     </ul> 
    </div>

来源

2013-07-09 sniggy

简单地套用。主动你的需要是积极的导航项目。

HTML

<li><a href="#" class="active">Home</a></li>

CSS

ul.topnav li a.active { 
border-top: 5px solid orange; 
}

来源

2013-07-09 03:48:26 Pete

我可以在首页为活跃，但如果我导航到另一个页面，我需要从家里把积极的造型了。 – sniggy

使用HTML助手似乎是一种流行的选择： http://stackoverflow.com/questions/6323021/better-way-to-get-active-page-link-in-mvc-3-razor/6323032# 6323032 – Pete

导航栏与Css的造型

回答

相关问题