Carregando...

Como fazer um menu responsivo em html css e jquery

Postado: 27 de fevereiro de 2023

Como fazer um menu responsivo em html css e jquery

Neste tutorial veja como podemos criar um menu responsivo em html css e jquery.

Nesta seção, projetaremos uma estrutura simples na tag  <header> <nav> <ul><li>,<div> e a <a> para inserir o link de destino. 

Usaremos as classes (.logo, .ativo, .menu-toggle e a class .clearfix) para dar o formato e estilizar com css.

Essas é a tags e classes que usaremos para criar o nosso menu responsivo com html, Css e jquery.

Vamos Adicionar o HTML

    <header>
        <a href="#" class="logo">Loop Nerd</a>
        <div class="menu-toggle"></div>
        <nav>
            <ul>

                <li><a href="#" class="ativo">Inicio</a></li>
                <li><a href="#">Html5</a></li>
                <li><a href="#">Css3</a></li>
                <li><a href="#">Jquery</a></li>
                <li><a href="#">WordPress</a></li>

            </ul>
        </nav>
        <div class="clearfix"></div>
    </header>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o  nosso Menu Resposivo com html, css e jquery.

OBS: não se esqueça de botar esta link no seu <head> veja no código abaixo.

  <head>
  
    <!--insira o link da font-->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">    

  
  </head>
header{

    position: relative;
    max-width: 1280px;
    margin: 10px auto;
    padding: 5px;
    background: #fff;
    box-sizing: border-box;
    border-radius: 3px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.11);

}

.logo{

    color: #414141;
    height: 60px;
    font-size: 28px;
    line-height: 60px;
    padding: 0 20px;
    text-align: center;
    box-sizing: border-box;
    float: left;
    font-weight: bold;
    text-decoration: none;

}

nav { float: right; }

.clearfix{
    clear: both;
}

nav ul{

    margin: 0;
    padding: 0;
    display: flex;

}

nav ul li{

    list-style: none;

}

nav ul li a{

    display: block;
    margin: 10px 5px;
    padding: 10px 20px;
    text-decoration: none;
    color: #262626;
    border-radius: 8px;

}

nav ul li a.active,
nav ul li a:hover{

    background: #008ef6;
    color: #fff;
    transition: 0.3s;

}

@media(max-width: 1200px){
    
    header{
        margin: 20px;
    }

}

@media(max-width: 768px){
    

    .logo{

        height: 46px;
        font-size: 28px;
        line-height: 46px;

    }

    .menu-toggle{
        display: block;
        width: 40px;
        height: 40px;
        margin: 0px;
        float: right;
        cursor: pointer;
        text-align: center;
        font-size: 30px;
        color: #008ef6;
    }
    
    .menu-toggle:before{
        content: '\f0c9';
        font-family: fontawesome;
        line-height: 40px;
    }
    
    .menu-toggle.ativo:before{
        content: '\f00d';
    }

    nav{

        display: none;
    }

    
    nav.ativo{
    
        display: block;
        width: 100%;
    
    }
    
    nav.ativo ul{
    
        display: block;
    
    }
    
    nav.ativo ul li{
    
        margin: 0;
    }
}

Vamos Adicionar o script

esse script vai dar o efeito toggle ou seja, adicionar e remove a class.

    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script>
    
      $(document).ready(function(){
        
        $('.menu-toggle').click(function(){
        
          $('.menu-toggle').toggleClass('ativo')
          $('nav').toggleClass('ativo')
        
        })

      })
    
    </script>

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando

Publicado por: Loop Nerd

613 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados