Я определил блестящий эффект с помощью CSS для активного элемента навигационной панели:
@-webkit-keyframes ShineAnimation{
from {
background-repeat:no-repeat;
background-image:-webkit-linear-gradient(
top left,
rgba(255, 255, 255, 0.0) 0%,
rgba(255, 255, 255, 0.0) 47%,
rgba(255, 255, 255, 0.13) 49%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0.13) 51%,
rgba(255, 255, 255, 0.0) 53%,
rgba(255, 255, 255, 0.0) 100%
);
background-position:-250px -250px;
background-size: 600px 600px
}
to {
background-repeat:no-repeat;
background-position:250px 250px;
}
}
.navbar-default .navbar-nav>li>a.active {
width:100%; /*Make sure the animation is over the whole element*/
-webkit-animation-name: ShineAnimation;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
}
Я использую элемент привязки в качестве ссылки, потому что сгенерированный HTML-код для элемента навигационной панели выглядит следующим образом:
<li class = "menu-item"><a href = "/kkom/patrick/app.nsf/meetingsUpcoming.xsp" class = "active">Kommande agendor</a></li>
Я попытался установить активный класс в родительском элементе привязки (li), но это не сработало, так как мне нужно установить ширину элемента на 100%.
.navbar-default .navbar-nav>li.active {
width:100%; /*Make sure the animation is over the whole element*/
-webkit-animation-name: ShineAnimation;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
}
Использование элемента привязки нежелательно, потому что это только часть элемента li, поэтому эффект сияния применяется к половине элемента li.
Есть ли у кого-нибудь предложения, как это исправить?
Пример HTML для панели навигации:
<div class = "navbar applayout-banner navbar-default navbar-fixed-top" role = "banner">
<a class = "navbar-brand" href = "init.xsp">MyApp</a>
<div class = "container-fluid applayout-banner-container">
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = ".navbar-collapse-target">
<span class = "sr-only">Change Navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<div></div>
</div>
<div class = "navbar-collapse-target navbar-collapse collapse">
<ul id = "view:_id1:_id2:defLayout_al" class = "nav navbar-nav applayout-links">
<li class = "menu-item"><a href = "/object.xsp?type=Preview" class = "active">Running</a></li>
<li class = "menu-item"><a href = "/meetingsUpcoming.xsp" class = "inactive">Coming meetings</a></li>
</ul>
</div>
</div>
</div>
Конечно. Я сейчас включил это
Можете ли вы включить разметку для своей навигационной панели?