Блестящий эффект на элемент активной панели навигации Bootstrap с помощью CSS - PullRequest
Новая
       5

Блестящий эффект на элемент активной панели навигации Bootstrap с помощью CSS

0 голосов
/ 12 сентября 2018

Я определил блестящий эффект с помощью 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>
...