使用 Css 的导航栏样式

Posted 2023-02-26

【中文标题】使用 Css 的导航栏样式

【英文标题】：Navigation Bar Styling with Css

【发布时间】：2013-07-09 02:34:24

【问题描述】：

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

现在这就是我的观点。

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

这是我在 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>

【参考方案1】：

只需将 .active 应用到您需要激活的导航项。

HTML

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

CSS

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

【讨论】：

我可以让主页处于活动状态，但如果我导航到另一个页面，我需要将活动样式远离主页。

使用 HTML Helper 似乎是一种流行的选择：***.com/questions/6323021/…