Блестящий эффект на активный элемент навигационной панели Bootstrap через CSS

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

Можете ли вы включить разметку для своей навигационной панели?

Bonnie 12.09.2018 21:48

Конечно. Я сейчас включил это

Patrick Kwinten 13.09.2018 11:16
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
2
56
0

Другие вопросы по теме