Inicio » Blog » HTML
Diseño de Menú con buscador responsive en HTML + CSS + JS

Diseño de Menú con buscador responsive en HTML + CSS + JS

Menu CSS con buscador JS

Diseño de Menú con buscador responsive en HTML + CSS + JS

Cómo diseñar un menú con buscador en HTML + CSS + Javascript

Para diseño un menu de navegación con buscador responsive usaremos html y css para el diseño y Javascript para la interacción con el usuario

VER DEMO

Para diseño un menu de navegación con buscador responsive  usaremos html y css para el diseño y Javascript para la interacción con el usuario

Contenido

  1. Versión menú de navegación sin buscador
  2. Estructura CSS
  3. Interactividad con Javascript
  4. Versión del código completo con el buscador responsive

 

VERSION MENU SIN BUSCADOR

<div class="menu">
        <div class="logo">
            <a href="#">LOGO</a>
        </div>
        <div class="items" id="items">
            <span class="closemenu" onclick="_closeMenu()">x</span>
            <a href="">Item 1</a>
            <a href="">Item 2</a>
            <a href="">Item 3</a>
        </div>
        <div class="hamb" onclick="_openMenu()">
            <span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
                </svg>
            </span>
        </div>
</div>

 

ESTRUCTURA CSS

body{
        margin: 0;
    }
    .menu{
        background: linear-gradient(45deg,rgb(107, 20, 220),blue);
        display: flex;
        justify-content: space-between;
        padding: 15px 20px;
    }   
    .logo a{ 
        color: white;
        text-decoration: none; 
        font-weight: bolder;
    }
    .items a{
        color: white;
        text-decoration: none;
        padding: 0 20px;
    }
    .closemenu{ 
        display: none;
        text-align: right; 
        padding-right: 20px;
        padding-top: 10px; 
        color: white;
    }
    .hamb{ 
        display: none; 
    }
    .menulateral{ 
        background:  linear-gradient(45deg,rgb(107, 20, 220),blue); 
        left: 0 !important; 
        z-index: 10;
    }
    @media screen and (max-width:500px){
        .items{ 
            position: absolute; 
            height: 100%;            
            width: 100%;
            left: -100%;
            top: 0px;
            transition: .5s;            
        }    
        .items a{
            display: block; 
            padding: 20px !important;            
        }
        .closemenu{ 
            display: block !important;             
        }
        .hamb{ 
            display: block; 
            color: white;
        }
    }

 

INTERACTIVIDAD JAVASCRIPT

function _openMenu(){ items.classList.add('menulateral')}
function _closeMenu(){ items.classList.remove('menulateral')}

 

VERSIÓN DEL CÓDIGO COMPLETO CON EL BUSCADOR RESPONSIVE

Incluyendo la integración del buscador responsive

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MENU RESPONSIVE CON BUSCADOR</title>
</head>
<body>
    <div class="menu">
        <div class="logo">
            <a href="#">LOGO</a>
        </div>
        <div class="items" id="items">
            <span class="closemenu" onclick="_closeMenu()">x</span>
            <a href="">Item 1</a>
            <a href="">Item 2</a>
            <a href="">Item 3</a>
        </div>
        <div>
            <span class="hamb" onclick="_openMenu()">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
                </svg>
            </span>
            <div class="buscador">
                <input type="search" class="buscador-input" placeholder="Escribe aqui:">
                <span class="buscador-boton"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-search" viewBox="0 0 16 16">
                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                  </svg>
                </span>
            </div>
        </div>
        
    </div>
<style>
    body{
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
    }
    .menu{
        background: linear-gradient(45deg,rgb(107, 20, 220),blue);
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
    }   
    .logo{ line-height: 22px;}
    .logo a{ 
        color: white;
        text-decoration: none; 
        font-weight: bolder;
        vertical-align: text-top;
    }
    .items{line-height: 22px;}
    .items a{
        color: white;
        text-decoration: none;
        padding: 0 20px;
    }
    .closemenu{ 
        display: none;
        text-align: right; 
        padding-right: 20px;
        padding-top: 10px; 
        color: white;
    }
    .hamb{ 
        display: none; 
        margin-right: 30px;
        padding-top: 3px;
        color: white;    
    }
    .menulateral{ 
        background:  linear-gradient(45deg,rgb(107, 20, 220),blue); 
        left: 0 !important; 
        z-index: 10;
    }
    /* BUSCADOR*/
    .buscador{ line-height: 43px; }
    .buscador-input{       
        border: none;
        outline: 0;
        padding: 0 30px 0 0;
        width: 0;
        position: absolute;
        top: 12px;
        right: 0;
        z-index: 3;
        background-color: transparent;
        color: #333;
        transition: width .5s cubic-bezier(0,.795,0,1);
        cursor: pointer;
    }
    .buscador-input:focus{
        background: white;
        width: 100%;
        cursor: text;
        top: 4px;
        padding: 10px;
        text-align: center;
        border-radius: 15px;
    }
    .buscador-boton{
        width:30px;    
        padding:0;
        text-align:center;
        background:0 0;        
        position:absolute;
        top:3px;
        right:8px;
        z-index:2;
        cursor:pointer;
    }
    /* FIN BUSCADOR*/
    @media screen and (max-width:500px){
        .items{ 
            position: absolute; 
            height: 100%;            
            width: 100%;
            left: -100%;
            top: 0px;
            transition: .5s;            
        }    
        .items a{
            display: block;
            padding: 20px !important;                         
        }
        .closemenu{ 
            display: block !important;             
        }
        .hamb{ 
            display: block;
        }
    }
</style>
<script>
    function _openMenu(){ items.classList.add('menulateral')}
    function _closeMenu(){ items.classList.remove('menulateral')}
</script>
</body>
</html>

 

Descarga código fuente 21

Talvez tiene el código fuente para descargar

Ver Código Fuente

Redactado por: , Leido 344 veces

Codea App
Codea App FullStack

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2022