Анимированный индикатор для пунктов меню на сайте

Анимированный индикатор для пунктов меню на сайте

Owebs
8 декабря
Просмотры 187
Рейтинг 15
Время чтения Время чтения: 4 минуты

Расскажем как написать анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.

Оглавление
Развернуть Свернуть

Сегодня напишем с вами анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.

Для создания индикатора перекопируйте следующие части кодов:

HTML:
                <header class="example_header">
                    <a href="#" class="example_logo">logotype</a>
                    <nav class="menu_ndicator">
                        <div id="indicator"></div>
                        <a href="#">Главня</a>
                        <a href="#">Продукты</a>
                        <a href="#">О нас</a>
                        <a href="#">Контакты</a>
                    </nav>
                </header>
            
CSS:
                * {
                    margin: 0;
                    padding: 0;
                    box-sizing: border-box;
                    font-family: sans-serif;
                }
        
                body {
                    background-color: #555;
                }
        
                .example_header {
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-family: sans-serif;
                    background-color: rgb(41, 41, 233);
                    padding: 10px 40px;
                }
        
                .example_header::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 100%;
                    height: 15px;
                    width: 100%;
                    background: #555;
                }
        
                .example_logo {
                    font-weight: 500;
                    font-size: 35px;
                    color: beige;
                    text-decoration: none;
                }
        
                .menu_ndicator {
                    display: flex;
                    gap: 10px;
                }
        
                .menu_ndicator a {
                    position: relative;
                    color: beige;
                    text-decoration: none;
                    letter-spacing: 1px;
                    padding: 10px 20px;
                }
        
                #indicator {
                    position: absolute;
                    width: 110px;
                    height: 50px;
                    background-color: #555;
                    border-top-left-radius: 20px;
                    border-top-right-radius: 20px;
                    transition: 0.3s linear;
                }
        
                #indicator::before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: -30px;
                    width: 30px;
                    height: 30px;
                    background-color: transparent;
                    border-bottom-right-radius: 20px;
                    box-shadow: 5px 5px 0 5px #555;
                }
        
                #indicator::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    right: -30px;
                    width: 30px;
                    height: 30px;
                    background-color: transparent;
                    border-bottom-left-radius: 20px;
                    box-shadow: -5px 5px 0 5px #555;
                }
            
JS:
                let indicator = document.querySelector('#indicator');

                let menuPuncts = document.querySelectorAll(' .menu_ndicator a');
        
                function marker (e) {
        
                    indicator.style.left = e.offsetLeft + 'px';
        
                    indicator.style.width = e.offsetWidth + 'px';
        
                }
        
                menuPuncts.forEach(punct => {
        
                    punct.addEventListener('click', (e) => {
        
                        marker (e.target);
        
                    });
        
                });
            

После копирования вышеупомянутых кусков кода, наш индикатор готов. 

Ow
Имя:
Комментарий:
Развернуть все Скрыть
Декор Декор

Популярные Популярные

Анимированный индикатор для пунктов меню на сайте
Просмотры 187
Рейтинг 15
8 декабря
5 месяцев назад

Расскажем как написать анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.

Оформления блока акций через CSS
Просмотры 361
Рейтинг 6
14 декабря
5 месяцев назад

В данном уроке будем стилизовать текст для объявлений об акции. Необходимо сделать так, чтобы наше объявление привлекло потенциальных покупателей

Создание сайтов через нейросети
Просмотры 371
Рейтинг 4
9 февраля
3 месяцев назад

Популярность нейросетей в 2024 году набирает обороты. Нет, они не заменяют полноценных специалистов. Зато существенно упрощают и ускоряют работу тех же копирайтеров, сеошников и дизайнеров.

Сегодня мы расскажем, какие нейросети можно использовать в работе, разберем их функционал и приведем примеры генерации.

Оставьте заявку СЕЙЧАС

Поставив галочку, Вы даете согласие на обработку ваших Персональных данных

Сookies-файлы на сайте

Наш сайт использует куки.
Продолжая им пользоваться, вы соглашаетесь на обработку данных в соответсвии с политикой конфидециальности.

Согласен