Página Inicial
Jquery
Menu html css e jquery com efeito marcado
Voltar

Menu html css e jquery com efeito marcado

Menu Responsivo com Html Css e Javascript

Botão Css3 Animado

Postado: 4 de janeiro de 2024 Tempo de Leitura: 3 Minutos

Olá Nerd, neste artigo vamos criar um Menu Html com efeito marcado. mesmo com pouco conhecimento na área do desenvolvimento web podemos criar um menu estiloso para o nosso site.

Estrutura Base que vamos usar no projeto!

A estrutura base do nosso pequeno projeto para o botão vai ser composto por apenas dois arquivos, por ser apenas dois arquivos, não será algo muito complexo de realizar, o primeiro arquivo será o index.html o segundo style.css e o terceiro script.js.

Portanto, crie uma pasta CSS, para inserir o arquivo style.css, a mesma regra serve se você estiver usando scripts crie pastas para organizar o seu projeto seja qual for organização é fundamental para organização e manutenção no futuro.

Nesta seção, projetaremos uma estrutura simples na tag <ul>, <li> a e tag <a> para inserirmos o link de destino para o local que desejar.

Essa tag que usaremos para criar o nosso Menu Html com efeito marcado.

A primeira coisa que você deve fazer é colocar todas as tags básicas que são essenciais independente de qual projeto esteja sendo desenvolvido.

Nesta seção, usaremos algumas as tags HTML para montar a estrutura do Menu.

Estrutura Código Html:

     <ul id="nav"> 

         <li class="slide1"></li>         
         <li class="slide2"></li>
         <li><a href="#">Home</a></li>
         <li><a href="#">Sobre</a></li>
         <li><a href="#">Blog</a></li>
         <li><a href="#">Faq</a></li>
         <li><a href="#">Contato</a></li>

     </ul>

Estrutura Código CSS

Para conseguirmos o efeito desejado no botão, vamos adicionar algumas propriedades CSS para as tags que foram colocadas na sessão HTML que usamos.

Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.

Nesta seção, usaremos algumas propriedades CSS para estilizar os nosso Menu Html com efeito marcado.

#nav {

  position: relative;
  border: none;
  border-radius: 10em;
  display: flex;
  list-style: none;
  background: #3f3f3f;
  padding: 10px;

}

#nav li {
  margin: 0px;
}

#nav li a {
  
  position: relative;
  padding: 0.6em 2em;
  font-size: 18px;
  border: none;
  outline: none;
  color: #ffffff;
  display: inline-block;
  text-decoration: none;
  z-index: 3;

}

#nav .slide1,
#nav .slide2 {
  position: absolute;
  display: inline-block;
  height: 3em;
  border-radius: 10em;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1.05);
}

#nav .slide1 {
  background: linear-gradient(90deg, #007cff 0%, #00D2BE 100%);
  z-index: 2;
}

#nav .slide2 {
  opacity: 0;
  background: #1b1b1b;
  z-index: 1;
}

#nav .squeeze {
  transform: scale(0.9);
}

Nesta sessão vamos adicionar o SCRIPT para dar o efeito marcado no menu.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script type="text/javascript">
    
    $("#nav a").on("click", function() {
      
      var position = $(this)
      .parent().position();
      
      var width = $(this)
      .parent().width();
      
      $("#nav .slide1").css({ opacity: 1, left: +position.left, width: width });
    
    });

    $("#nav a").on("mouseover", function() {
      
      var position = $(this)
      .parent().position();
      
      var width = $(this)
      .parent().width();
      
      $("#nav .slide2").css({ 
      opacity: 1, left: +position.left, width: width })
      .addClass("squeeze");
    
    });

    $("#nav a").on("mouseout", function() {
      $("#nav .slide2").css({ opacity: 0 }).removeClass("squeeze");
    });

    var currentWidth = $("#nav")
      .find("li:nth-of-type(3) a")
      .parent("li")
      .width();
    
    var current = $("li:nth-of-type(3) a").position();
    $("#nav .slide1").css({ left: +current.left, width: currentWidth });

</script>

Combinando as Três seções acima com Html, Css e Jquery temos o seguinte Resultado!

Veja o Resultado baixo!