Menu Hover Efeito Linha Ondulada

Botões de Redes Sociais com Html e Css Simples

Estrutura Básica do HTML

Postado: 15 de fevereiro de 2024 Tempo de Leitura: 2 Minutos

Neste artigo veja como estilizar Menu Hover Efeito Linha Ondulada.

Estrutura Base que vamos usar no projeto!

A estrutura base do nosso pequeno projeto para os ícones 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 e o segundo style.css

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 nas tags <ul>, <li>, e a tag <a> para inserirmos o link de destino.

Essa tag que usaremos para criar o nosso Menu com Efeito Linha Ondulada.

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:

HTML

    <nav class="nav">
      
      <ul class="menu">
      
        <li><a href="#" title="Home">Home</a></li>
        <li><a href="#" title="Sobre">Sobre</a></li>
        <li><a href="#" title="Blog">Blog</a></li>
        <li><a href="#" title="Contato">Contato</a></li>
      
      </ul>

    </nav>

Estrutura Código CSS

Para conseguirmos o efeito desejado no Menu, 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.

CSS

.nav {
   
  width:100%;
  float:left;
 
}

.menu {

  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
  height: auto;
  list-style: none;

}

.menu li {

  width: 125px;
  height: 50px;
  transition: background-position-x 0.9s linear;
  text-align: center;

}

.menu li a {

  font-size: 22px;
  color: #777;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.45s;

}

.menu li:hover {

  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIzOTBweCIgaGVpZ2h0PSI1MHB4IiB2aWV3Qm94PSIwIDAgMzkwIDUwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzOTAgNTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDA3Y2ZmIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMCw0Ny41ODVjMCwwLDk3LjUsMCwxMzAsMA0KCWMxMy43NSwwLDI4Ljc0LTM4Ljc3OCw0Ni4xNjgtMTkuNDE2QzE5Mi42NjksNDYuNSwyNDMuNjAzLDQ3LjU4NSwyNjAsNDcuNTg1YzMxLjgyMSwwLDEzMCwwLDEzMCwwIi8+DQo8L3N2Zz4=");
  -webkit-animation: line 1s;
          animation: line 1s;
}

.menu li:hover a {
  color: #007cff;
}

.menu li:not(:last-child) {
  margin-right: 30px;
}

@-webkit-keyframes line {
  0% {
    background-position-x: 390px;
  }
}

@keyframes line {
  0% {
    background-position-x: 390px;
  }
}

Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!