Scribd Logo
Upload

Welcome to Scribd!

  • 13 views

    Menu Busqueda

    Uploaded by

    Simon Valenzuela Diaz
    This document contains HTML and CSS code to create an interactive search bar. When the search icon is clicked, a menu drops down that can be used to search or filter options. The menu contains sample search results and a close button. JavaScript code handles opening/closing the menu and search bar on clicks or key presses. It also includes a delay before executing any search to allow for additional input.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Menu Busqueda

    Uploaded by

    Simon Valenzuela Diaz
    13 views3 pages
    This document contains HTML and CSS code to create an interactive search bar. When the search icon is clicked, a menu drops down that can be used to search or filter options. The menu contains sample search results and a close button. JavaScript code handles opening/closing the menu and search bar on clicks or key presses. It also includes a delay before executing any search to allow for additional input.

    Original Description:

    Original Title

    menu_busqueda

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains HTML and CSS code to create an interactive search bar. When the search icon is clicked, a menu drops down that can be used to search or filter options. The menu contains sample search results and a close button. JavaScript code handles opening/closing the menu and search bar on clicks or key presses. It also includes a delay before executing any search to allow for additional input.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    13 views3 pages

    Menu Busqueda

    Uploaded by

    Simon Valenzuela Diaz
    This document contains HTML and CSS code to create an interactive search bar. When the search icon is clicked, a menu drops down that can be used to search or filter options. The menu contains sample search results and a close button. JavaScript code handles opening/closing the menu and search bar on clicks or key presses. It also includes a delay before executing any search to allow for additional input.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 3

    <html>

    <head>

    <title>Esto es el t&iacute;tulo de la p&aacute;gina.</title>

    </head>

    <body>
    <div class="example_busq"><div class="ima_busq"><img src="C:\\Users\\TSUKASA\\
    Downloads\\regalo.jpg" /><input class="encogido" type="text" name="" value=""><div
    class="menu_busq ocultar"></div></div></div>

    </body>
    <style>
    .example_busq{
    width:100%;
    }
    .ima_busq{
    width:70px;
    margin-left:auto;
    cursor:pointer;
    }
    .ima_busq img{
    width:100%;
    padding-right:60px;
    }

    /*css menu búsqueda*/


    .menu_busq{
    background-color:white;
    width:200px;
    height:400px;
    text-align:left;
    position:absolute;
    transform:translate(-150px,0px);
    transition:visibility .5s, opacity .5s;
    border-radius:5px;
    padding:5px 10px;
    }

    .ima_busq input{
    width:220px;
    padding:10px 10px;
    transform:translate(-150px,0px);
    border-radius:20px;border:2px solid black;
    transition:visibility 1s, width 1s;
    }

    .encogido{
    width:0px!important;
    visibility:hidden;
    }
    /*
    html{
    background-color:orange;
    }*/

    .ocultar{
    visibility:hidden;
    opacity:0;
    }

    .fil_busq{
    height:50px;
    display:flex;
    align-items:center;
    }

    .fil_busq>div:nth-child(1){
    width:20%;
    }
    .fil_busq>div:nth-child(2){
    width:80%;
    padding:0px 10px;
    display:flex;
    align-items:center;
    }

    .cerrar_busq{
    font-size:16px;
    font-weight:800;
    position:absolute;
    top: 0px;
    right: 0px;
    padding: 5px;
    border-radius:50%;
    font-family:fira-sans;
    }
    /**/
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></
    script>
    <script>
    jQuery(document).ready(function($){
    $('.example_busq').on('click','.ima_busq',function(evt){
    if(evt.target.parentNode.getElementsByClassName('menu_busq')
    [0].classList.contains('ocultar')){
    //evt.target.parentNode.getElementsByClassName('menu_busq')
    [0].classList.remove('ocultar');
    document.getElementsByClassName('ima_busq')
    [0].getElementsByTagName('input')[0].classList.remove('encogido');
    }else{
    evt.target.parentNode.getElementsByClassName('menu_busq')
    [0].classList.add('ocultar');
    //document.getElementsByClassName('ima_busq')
    [0].getElementsByTagName('input')[0].classList.add('encogido');
    }

    });

    var ban = false;


    var tomado = false;
    var val_ant = 0;
    $('.ima_busq').on('keydown','input',function(evt){

    ban = false;
    if(!tomado){
    tomado = true;
    document.getElementsByClassName('menu_busq')
    [0].classList.remove('ocultar');
    preguntarTiempo();
    }
    });

    function preguntarTiempo(){
    if(!ban){
    ban = true;
    setTimeout(preguntarTiempo, 1000);
    }else{
    //ejecutar funcion
    //var val = document.getElementsByClassName('ima_busq')
    [0].getElementsByTagName('input')[0].value
    console.log('algo');
    tomado = false;
    ban = false;
    }

    }
    function llenarMenu(){
    var mb = document.getElementsByClassName('menu_busq')[0];
    var lleDat = Array();
    lleDat[0] = "<div class='fil_busq'><div><img
    src='https://s.cornershopapp.com/product-images/304532.jpg'/></div><div>Esta es
    infomacion</div></div>";
    var cadena = '';
    for(var i=0;i<lleDat.length;i++){
    cadena = cadena+lleDat[i];
    }
    cadena = cadena+'<div class="cerrar_busq">X</div>';
    mb.innerHTML = cadena;
    }
    llenarMenu();

    $('.cerrar_busq').click(function(){
    document.getElementsByClassName('menu_busq')[0].classList.add('ocultar');
    document.getElementsByClassName('ima_busq')[0].getElementsByTagName('input')
    [0].classList.add('encogido');

    });

    });

    </script>

    </html>

    You might also like