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

Owebs

8 декабря

159

Время чтения: 5 минут

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

Оглавление

Развернуть Свернуть

logotype

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

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

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);
        
                    });
        
                });

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