[英]Navigation Bar Styling with Css
我的視圖頂部有幾個導航欄。 我正在使用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>
只需將.active應用於需要激活的導航項。
的HTML
<li><a href="#" class="active">Home</a></li>
的CSS
ul.topnav li a.active {
border-top: 5px solid orange;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.