Menu com efeito sublinhado com html css e Javascript

Menu com efeito sublinhado com html css e Javascript

Menu com Efeito Sublinhado: Neste tutorial vamos Desenvolver uma Navegação Interativa com HTML, CSS e JavaScript

Um menu com efeito sublinhado é um recurso visual simples, porém eficaz, que aprimora a experiência do usuário em seu site. Ao passar o mouse sobre os itens do menu, uma linha é exibida abaixo do texto, destacando a opção selecionada e facilitando a navegação. Implementar esse efeito envolve a combinação de HTML, CSS e JavaScript, proporcionando um resultado interativo e esteticamente agradável.

Estrutura HTML: Organizando os Elementos do Menu

Crie a estrutura HTML básica do menu: Utilize elementos <nav>, <ul> e <li> para definir a lista de navegação e seus itens.

    <nav id="menu">
        
        <ul id="menu-list">
          
            <li> <a href="#">Home</a></li>
            <li> <a href="#">Quem Somos</a></li>
            <li> <a href="#">Blog</a></li>
            <li> <a href="#">Contato</a></li>
        
        </ul>
       
       <div id="menu-line"></div>
    
    </nav><!--Fecha Menu-->

Aplique classes CSS para estilizar o menu: Defina classes para o menu principal (menu) e seus itens (li), personalizando cores, fontes e espaçamentos.

#menu{
  
    position: relative;
    text-align: center;
    margin: 100px;
}
    
#menu-line{
    display: block;
    position: absolute;
    left: 50%;
    top: 25px;
    width: 0;
    height: 5px;
    background-color: #007cff;
}
    
ul{
    z-index: 100;
}
    
ul li {
    display: inline-block;
    margin-right: 30px;
}
    
ul li a{
    display: block;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
    color: #202020; 
}

JavaScript: Aprimorando a Interatividade (Opcional)

Adicione um script JavaScript: Utilize JavaScript para adicionar funcionalidades extras, como alterar a cor do sublinhado ou animar a transição.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>

    $(function(){
                
        var currentIndex = 0;
        var _offset = 10;
        
        var $menuLi = $("#menu-list li");
        var $line = $("#menu-line");
        
        $menuLi.on("click", function(){
            
            var _$this = $(this);
                            
            TweenMax.killTweensOf($line);
            
            if( _$this.index() > currentIndex ){
                
                TweenMax.to($line, 0.3, {css: {width:  (_$this.position().left + _$this.outerWidth()) - $line.position().left + _offset/2 }, onComplete:function(){
                    currentIndex = _$this.index();
                    TweenMax.to($line, 0.3, { css:{ left : _$this.position().left - _offset/2, width: _$this.outerWidth() + _offset } })
                } });
                
            } else {
                
                TweenMax.to($line, 0.3, {css: { left: _$this.position().left - _offset/2, width:  ($line.position().left + $line.outerWidth()) - _$this.position().left + _offset/2 }, onComplete:function(){
                    currentIndex = _$this.index();
                    TweenMax.to($line, 0.3, { css:{ width: _$this.outerWidth() + _offset } })
                } });
                
            }
                            
        }); 
                            
    });

</script>

Observações:

• Este código é um exemplo básico e pode ser adaptado às suas necessidades específicas.
• Explore as diversas propriedades e funções do CSS e JavaScript para criar efeitos mais elaborados.
• Teste o menu em diferentes navegadores e dispositivos para garantir compatibilidade.

Com essa combinação de HTML, CSS e JavaScript, você estará pronto para implementar um menu com efeito sublinhado em seu site, aprimorando a experiência do usuário e tornando a navegação mais intuitiva e atraente.

Veja o Resultado baixo!

Menu com efeito sublinhado

Baixar Código Veja Funcionando

Neste artigo, você aprendeu o passo a passo de como criar um Menu com efeito sublinhado com html css e Javascript.

existem diversas formas de estilizar Menus com efeitos, cores, formas e animações diferentes.

Fica o desafio para você tentar criar um novo design do zero a criatividade é sua.

faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.