Menu Efeito Diagonal com Html Css e Jquery

Menu Efeito Diagonal com Html Css e Jquery

Menu Efeito Diagonal com HTML, CSS e jQuery

Criar um menu com efeito diagonal utilizando HTML, CSS e jQuery pode ser uma ótima maneira de adicionar um toque de criatividade e dinamismo ao seu site. Esse tipo de menu pode ser usado em diversos contextos, como menus de navegação, menus laterais, menus suspensos e muito mais.

Neste artigo, vamos detalhar o processo de criação de um menu diagonal utilizando as três tecnologias mencionadas. Abordaremos os seguintes tópicos:

HTML

A estrutura HTML para um menu diagonal é relativamente simples. Você precisará criar uma lista não ordenada (<ul>) e seus itens de menu (<li>). Cada item de menu deve conter o link para a página correspondente.

    <nav class="my-nav">
        
        <ul class="nav">

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

        </ul>

    </nav>

CSS

O CSS é responsável por estilizar o menu e criar o efeito diagonal. Você precisará definir a posição, largura e altura do menu, além de aplicar a transformação transform para inclinar o menu em um ângulo diagonal.

.my-nav {
 
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e9e9e9;
  line-height: 1.5;
  border-radius: 50px;

}

.nav {

  position: relative;
  display: flex;
  list-style: none;
  padding: 10px 20px;

}

.nav a {

  position: relative;
  padding: 0.6em 2em;
  font-size: 20px;
  border: none;
  outline: none;
  color: #202020;
  display: inline-block;
  text-decoration: none;
  z-index: 3;

}

.nav .slide1,
.nav .slide2 {

  position: absolute;
  display: inline-block;
  height: 0.4em;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1.05);
  transform: skew(-20deg);
  bottom: 0px;
  height: 100%;
}

.nav .slide1 {

  background-color: #007cff;
  z-index: 2;
}

.nav .slide2 {

  opacity: 0;
  background-color: transparent;
  border: 1px solid #007cff;
  z-index: 1;
}

Neste exemplo, o menu é inclinado em 45 graus para a direita. Você pode ajustar o valor da propriedade skewY para alterar o ângulo do menu.

jQuery

O jQuery pode ser usado para adicionar animações e interatividade ao menu. Por exemplo, você pode adicionar uma animação de hover que destaca o item de menu quando o mouse passa sobre ele.

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

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

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

</script>

Observações:

• Este é apenas um exemplo básico. Você pode personalizar o código de acordo com suas necessidades e preferências.
• Existem diversas outras maneiras de criar um menu diagonal com HTML, CSS e jQuery. Explore diferentes técnicas para encontrar a que melhor se adapta ao seu projeto.
• Certifique-se de testar o menu em diferentes navegadores e dispositivos para garantir que ele funcione corretamente.

Conclusão:

Criar um menu diagonal com HTML, CSS e jQuery é uma tarefa relativamente simples que pode agregar um toque de profissionalismo e criatividade ao seu site. Com um pouco de prática e criatividade, você poderá criar menus diagonais únicos e personalizados para atender às suas necessidades.

Este é apenas um exemplo básico de como criar um menu diagonal com HTML, CSS e jQuery. Você pode usar sua criatividade e conhecimentos para personalizar o menu e torná-lo único para o seu site ou aplicativo.

Veja o Resultado baixo!

Baixar Código Veja Funcionando