Página Inicial
Jquery
Menu Responsivo com Html Css e Javascript
Voltar

Menu Responsivo com Html Css e Javascript

Botão Html Animado Efeito Up

Menu html css e jquery com efeito marcado

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

Olá Nerd, neste artigo vamos criar um Menu Responsivo com Html Css e Javascript. 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 <div>, <span>, <nav> a e tag <a> para inserirmos o link de destino para o local que desejar.

Essa tag que usaremos para criar o nosso Menu Responsivo com Html Css e Javascript.

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:

<div class="box-menu">

    <div class="wrapper">
        
        <div class="hamburger">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

    </div>

    <nav class="nav">

        <a href="#" class="active"><span class="icon fa fa-home"></span><span class="texto">Home</span></a>
        <a href="#"><span class="icon fa fa-file"></span><span class="texto">Portfolio</span></a>
        <a href="#"><span class="icon fa fa-edit"></span><span class="texto">Blog</span></a>
        <a href="#"><span class="icon fa fa-envelope"></span><span class="texto">Contato</span></a>
    
    </nav>

</div>

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 Responsivo com Html Css e Javascript.

Link dos icones CSS

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

.box-menu {

  left: 50px;
  top: 17px;
  cursor: pointer;
  background: #4b4b4b;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  transition: height .4s;
  float: left;
  position: absolute;

}

.full-menu { height: 300px; }

.wrapper {
  position: relative;
  width: 50px;
  height: 50px;
}

.hamburger {

  position: absolute;
  left: 12px;
  top: 13px;
  width: 27px;
  height: 25px;

}

.hamburger span {

  position: absolute;
  display: inline-block;
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 10px;
  transition: all .3s;

}

.hamburger span:nth-child(1) { top: 3px; }
.hamburger span:nth-child(2) { top: 12px; }
.hamburger span:nth-child(3) { top: 12px; }
.hamburger span:nth-child(4) { top: 20px; }

.hamburger.active span:nth-child(1) { width: 0; margin-left: 15px;}
.hamburger.active span:nth-child(2) { transform: rotate(45deg); }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg); }
.hamburger.active span:nth-child(4) { width: 0; margin-left: 15px;}

.nav {
  
  position: relative;
  left: -9999px;

}

.nav a {

  white-space: nowrap;
  position: relative;
  display: inline-block;
  color: #333;
  text-decoration: none;
  width: 150px;
  height: 58px;
  line-height: 58px;
  font-family: Ubuntu;

}

.nav a::after {
  
  content: '';
  position: absolute;
  left: 50px;
  top: 29px;
  height: 0px;
  width: 5px;
  background: #ffef02;
  transition: height .3s, top .3s;

}

.nav a.active { color:#000; }

.nav a.active::after {
  top: 19px;
  height: 20px;
}

.nav a span {
  opacity: 0;
  display: inline-block;
  font-size: 14px;
}

.nav a span.icon {
  transform: scale(.5);
  color: #fff;
  font-size: 15px;
  display: inline-block;
  width: 50px;
  text-align: center;
  transition: transform .3s;
}

.nav a span.texto {
  
  font-weight: bold;
  opacity: 0;
  margin-left: 40px;
  transition: margin .3s, opacity .3s, transform .3s;

}

.full-menu .nav {
  left: 0;
}

.full-menu .nav a:hover span {
  color:#ffef02 
}

.full-menu .nav a span {
  opacity: 1;
}

.full-menu .nav a span.icon {
  transform: scale(1.1);
}

.full-menu .nav a span.texto {
  margin-left: 25px;
}

.full-menu .nav a:hover span.texto {
  transform: translateX(5px);
  transition-delay: 0s;
}

.nav a:nth-child(1) span { transition: all .5s .1s, opacity .5s 0s, transform .5s 0s; }
.nav a:nth-child(2) span { transition: all .5s .15s, opacity .5s 0s, transform .5s 0s; }
.nav a:nth-child(3) span { transition: all .5s .2s, opacity .5s 0s, transform .5s 0s; }
.nav a:nth-child(4) span { transition: all .5s .25s, opacity .5s 0s, transform .5s 0s; }

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

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
    
    $(function(){
    
        $('.box-menu .wrapper').on('click', function(){
            $('.box-menu').toggleClass('full-menu');
            $('.hamburger').toggleClass('active');
        });
        $('a').on('click', function(){
            $(this).siblings('a').removeClass('active');
            $(this).addClass('active');
        });
    
    });

</script>

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

Veja o Resultado baixo!