ブートストラップを使用してナビゲーション バーを実現しようとしています。ナビゲーション バーの最初と最後の項目の半径を 20px にしたい。ただし、境界半径を持たないものもあります。ほとんどすべてを達成できましたが、ナビゲーション バーの最後の項目がナビゲーション バーの最後のブロックを埋めません。
私のHTML：
<div class="row-fluid">
<div class="span6 offset4 navbar navbar-inverse" style="height: 40px; margin-top: -40px;">
<div class="navbar-inner">
<ul class="nav" id="myNav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Lorem", "Index", "Lorem")</li>
<li>@Html.ActionLink("Ipsum", "Index", "Ipsum")</li>
<li>@Html.ActionLink("Vivamus", "Index", "Vivamus")</li>
<li>@Html.ActionLink("Praesent", "Index", "Praesent")</li>
<li>@Html.ActionLink("Nulla", "Index", "Nulla")</li>
<li>@Html.ActionLink("viverra", "Index", "viverra")</li>
<li>@Html.ActionLink("viverra ", "About", "viverra")</li>
</ul>
</div>
</div>
</div>
私のCSS：
.navbar-inner {
min-height: 40px !important;
padding-left: 0px !important;
padding-right: 0px !important;
background-color: #45484D !important;
background-image: -moz-linear-gradient(top, #45484D,#252526) !important;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#45484D), to(#252526)) !important;
background-image: -webkit-linear-gradient(top, #45484D, #252526) !important;
background-image: -o-linear-gradient(top, #45484D, #252526) !important;
background-image: linear-gradient(to bottom, #45484D,#252526) !important;
background-repeat: repeat-x !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#45484D', endColorstr='#252526', GradientType=0) !important;
border: none !important;
-webkit-border-radius: 20px !important;
-moz-border-radius: 20px !important;
border-radius:20px !important;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065) !important;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065) !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065) !important;
overflow: hidden !important;
}
#myNav li:last-child a:last-child {
border-right: 0px solid #424242 !important;
}
#myNav li a{
padding-left: 20px;
padding-right: 20px;
}
#myNav a {
border-right: 1px solid #424242 !important;
color: white !important;
font-size: 16px !important;
text-decoration: none !important;
text-shadow: none !important;
}
ul#myNav li a:hover {
color: #0088cc !important;
text-decoration: none;
text-shadow: none;
}
ul#myNav li:first-child.active a{
-webkit-border-radius: 20px 0 0 20px !important;
-moz-border-radius: 20px 0 0 20px !important;
border-radius: 20px 0 0 20px !important;
background-color: #0088cc;
color: #000 !important;
text-shadow: none;
}
ul#myNav li:last-child.active a{
-webkit-border-radius: 0px 20px 20px 0px !important;
-moz-border-radius: 0px 20px 20px 0px !important;
border-radius: 0px 20px 20px 0px !important;
/*background-color: #0088cc;*/
color: #000 !important;
text-shadow: none;
}
ul#myNav li.active a{
background-color: #0088cc;
color: #000 !important;
text-shadow: none;
}
そして、次の Jscript を使用して、選択したアイテムを色付けしています。
$(document).ready(function () {
var url = window.location;
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
$('ul.nav a').filter(function() {
return this.href == url;
}).parent().addClass('active');
});
助けてくれてありがとう:)