Header Principal

 <header id="header" class="bp-header"> <div class="bp-header__container"> <!-- LOGO --> <div class="bp-header__logo"> <div class="bp-header__logo-container"> <img src="https://www.buscadorprop.com.ar/build/images/logo-dark.svg" alt="Buscador Prop" class="bp-header__logo-img"/> <div class="bp-header__botonera-mobile"> <picture class="bp-header__avatar bp-header__avatar--mobile"> <img src="https://www.clarin.com/img/2023/05/17/PCzdbpCpw_720x0__1.jpg"/> </picture> <img src="img/icon_bars.svg" alt="Abrir" class="bp-header__hamburguer"/> </div> <img src="img/icon_times.svg" alt="Cerrar" class="bp-header__times"/> </div> </div> <!-- BOTONERA --> <div class="bp-header__botonera "> <!-- USUARIO LOGUEADO --> <div class="bp-header__user bp-header__onlymobile"> <a class="" href="#"> <picture class="bp-header__avatar"> <img src="https://www.clarin.com/img/2023/05/17/PCzdbpCpw_720x0__1.jpg"/> </picture> Hola Pepe </a> </div> <!-- MENU SI ESTA LOGUEADO --> <ul class="bp-header__panel" id="menuDesktopLogin"> <li class="bp-header__panel-item"> <a href="#"> <img class="bp-header__panel-icon" src="img/icon_home.svg"/> Inicio </a> </li> <li class="bp-header__panel-item"> <a href="#"> <img class="bp-header__panel-icon" src="img/icon_bell.svg"/> Mis alertas </a> </li> <li class="bp-header__panel-item"> <a href="#"> <img class="bp-header__panel-icon" src="img/icon_heart.svg"/> Mis Favoritos </a> </li> <li class="bp-header__panel-item"> <a href="#"> <img class="bp-header__panel-icon" src="img/icon_comment-dots.svg"/> Mis Consultas </a> </li> <li class="bp-header__panel-item"> <a href="#"> <img class="bp-header__panel-icon" src="img/icon_comments.svg"/> Buscamos por vos </a> </li> <li class="bp-header__panel-item"> <a href="#"> <img class="bp-header__panel-icon" src="img/icon_info-circle.svg"/> Guía de uso </a> </li> <li> <ul class="bp-header__sesion bp-header__onlydesktop"> <li class="bp-header__sesion-item"> <a href="#"> <img class="bp-header__sesion-icon" src="img/icon_user-edit.svg"/> Editar Perfil </a> </li> <li class="bp-header__sesion-item"> <a href="#"> <img src="img/icon_sign-out-alt.svg" class="bp-header__sesion-icon" /> Salir </a> </li> </ul> </li> </ul> <!-- ACCEDER --> <div class="bp-header__itembtn bp-header__onlymobile bp-header__acceder"> <a class="bp-button bp-button--outline bp-button--primary bp-button--block" href="#"> <img src="img/icon_user-circle.svg" class="bp-button__img" alt="Acceder" /> Acceder </a> </div> <!-- MENU --> <ul class="bp-header__item-list bp-header__menu"> <li class="bp-header__item bp-header__operation"> <div class="bp-header__item-header"> <p>Venta</p> <img src="img/icon_chevron-down.svg" class="bp-header__item-chev" /> </div> <ul class="bp-header__subitem-list"> <li class="bp-header__subitem"> <div class="bp-header__subitem-header"> <p>Tipo de propiedad</p> <img src="img/icon_chevron-down.svg" class="bp-header__item-chev" /> </div> <ul class="bp-header__subsubitem-list"> <li class="bp-header__subsubitem"> <a href="#">Casa</a> </li> <li class="bp-header__subsubitem"> <a href="#">Departamento</a> </li> <li class="bp-header__subsubitem"> <a href="#">Terrenos</a> </li> <li class="bp-header__subsubitem"> <a href="#">Duplex/Triplex</a> </li> <li class="bp-header__subsubitem"> <a href="#">Barrio Cerrado</a> </li> <li class="bp-header__subsubitem --active"> <a href="#">PH</a> </li> <li class="bp-header__subsubitem"> <a href="#">Locales</a> </li> <li class="bp-header__subsubitem"> <a href="#">Campos</a> </li> <li class="bp-header__subsubitem"> <a href="#">Quintas</a> </li> <li class="bp-header__subsubitem"> <a href="#">Cocheras</a> </li> <li class="bp-header__subsubitem"> <a href="#">Oficinas</a> </li> <li class="bp-header__subsubitem"> <a href="#">Galpones</a> </li> <li class="bp-header__subsubitem"> <a href="#">Permutas</a> </li> <li class="bp-header__subsubitem"> <a href="#">Para inversionistas</a> </li> </ul> </li> <li class="bp-header__subitem"> <div class="bp-header__subitem-header"> <p>Ambientes</p> <img src="img/icon_chevron-down.svg" class="bp-header__item-chev" /> </div> <ul class="bp-header__subsubitem-list"> <li class="bp-header__subsubitem"> <a href="#">1 Ambiente</a> </li> <li class="bp-header__subsubitem"> <a href="#">2 Ambientes</a> </li> <li class="bp-header__subsubitem"> <a href="#">3 Ambientes</a> </li> </ul> </li> <li class="bp-header__subitem"> <div class="bp-header__subitem-header"> <p>Localidades</p> <img src="img/icon_chevron-down.svg" class="bp-header__item-chev" /> </div> <ul class="bp-header__subsubitem-list"> <li class="bp-header__subsubitem"> <a href="#">Avellaneda</a> </li> <li class="bp-header__subsubitem"> <a href="#">Gerli</a> </li> <li class="bp-header__subsubitem"> <a href="#">Lanus</a> </li> <li class="bp-header__subsubitem"> <a href="#">Remedios de Escalada</a> </li> <li class="bp-header__subsubitem"> <a href="#">Banfield</a> </li> <li class="bp-header__subsubitem"> <a href="#">Lomas de Zamora</a> </li> <li class="bp-header__subsubitem"> <a href="#">Temperley</a> </li> </ul> </li> </ul> </li> <li class="bp-header__item bp-header__operation"> <div class="bp-header__item-header"> <p>Alquiler</p> <img src="img/icon_chevron-down.svg" class="bp-header__item-chev" /> </div> <ul class="bp-header__subitem-list"> <li class="bp-header__subitem"> <div class="bp-header__subitem-header"> <p>Tipo de propiedad</p> <img src="img/icon_chevron-down.svg" class="bp-header__item-chev" /> </div> <ul class="bp-header__subsubitem-list"> <li class="bp-header__subsubitem"> <a href="#">Casa</a> </li> <li class="bp-header__subsubitem"> <a href="#">Departamento</a> </li> <li class="bp-header__subsubitem"> <a href="#">Terrenos</a> </li> <li class="bp-header__subsubitem"> <a href="#">Duplex/Triplex</a> </li> <li class="bp-header__subsubitem"> <a href="#">Barrio Cerrado</a> </li> <li class="bp-header__subsubitem"> <a href="#">PH</a> </li> <li class="bp-header__subsubitem"> <a href="#">Locales</a> </li> <li class="bp-header__subsubitem"> <a href="#">Campos</a> </li> <li class="bp-header__subsubitem"> <a href="#">Quintas</a> </li> <li class="bp-header__subsubitem"> <a href="#">Cocheras</a> </li> <li class="bp-header__subsubitem"> <a href="#">Oficinas</a> </li> <li class="bp-header__subsubitem"> <a href="#">Galpones</a> </li> <li class="bp-header__subsubitem"> <a href="#">Permutas</a> </li> <li class="bp-header__subsubitem"> <a href="#">Para inversionistas</a> </li> </ul> </li> <li class="bp-header__subitem"> <div class="bp-header__subitem-header"> <p>Ambientes</p> <img src="img/icon_chevron-down.svg" class="bp-header__item-chev" /> </div> <ul class="bp-header__subsubitem-list"> <li class="bp-header__subsubitem"> <a href="#">1 Ambiente</a> </li> <li class="bp-header__subsubitem"> <a href="#">2 Ambientes</a> </li> <li class="bp-header__subsubitem"> <a href="#">3 Ambientes</a> </li> </ul> </li> <li class="bp-header__subitem"> <div class="bp-header__subitem-header"> <p>Localidades</p> <img src="img/icon_chevron-down.svg" class="bp-header__item-chev" /> </div> <ul class="bp-header__subsubitem-list"> <li class="bp-header__subsubitem"> <a href="#">Avellaneda</a> </li> <li class="bp-header__subsubitem"> <a href="#">Gerli</a> </li> <li class="bp-header__subsubitem"> <a href="#">Lanus</a> </li> <li class="bp-header__subsubitem"> <a href="#">Remedios de Escalada</a> </li> <li class="bp-header__subsubitem"> <a href="#">Banfield</a> </li> <li class="bp-header__subsubitem"> <a href="#">Lomas de Zamora</a> </li> <li class="bp-header__subsubitem"> <a href="#">Temperley</a> </li> </ul> </li> </ul> </li> <li class="bp-header__item bp-header__operation"> <div class="bp-header__item-header"> <p>Temporal</p> <img src="img/icon_chevron-down.svg" class="bp-header__item-chev" /> </div> <ul class="bp-header__subitem-list"> <li class="bp-header__subitem"> <div class="bp-header__subitem-header"> <p>Tipo de propiedad</p> <img src="img/icon_chevron-down.svg" class="bp-header__item-chev" /> </div> <ul class="bp-header__subsubitem-list"> <li class="bp-header__subsubitem"> <a href="#">Casa</a> </li> <li class="bp-header__subsubitem"> <a href="#">Departamento</a> </li> <li class="bp-header__subsubitem"> <a href="#">Terrenos</a> </li> <li class="bp-header__subsubitem"> <a href="#">Duplex/Triplex</a> </li> <li class="bp-header__subsubitem"> <a href="#">Barrio Cerrado</a> </li> <li class="bp-header__subsubitem"> <a href="#">PH</a> </li> <li class="bp-header__subsubitem"> <a href="#">Locales</a> </li> <li class="bp-header__subsubitem"> <a href="#">Campos</a> </li> <li class="bp-header__subsubitem"> <a href="#">Quintas</a> </li> <li class="bp-header__subsubitem"> <a href="#">Cocheras</a> </li> <li class="bp-header__subsubitem"> <a href="#">Oficinas</a> </li> <li class="bp-header__subsubitem"> <a href="#">Galpones</a> </li> <li class="bp-header__subsubitem"> <a href="#">Permutas</a> </li> <li class="bp-header__subsubitem"> <a href="#">Para inversionistas</a> </li> </ul> </li> <li class="bp-header__subitem"> <div class="bp-header__subitem-header"> <p>Ambientes</p> <img src="img/icon_chevron-down.svg" class="bp-header__item-chev" /> </div> <ul class="bp-header__subsubitem-list"> <li class="bp-header__subsubitem"> <a href="#">1 Ambiente</a> </li> <li class="bp-header__subsubitem"> <a href="#">2 Ambientes</a> </li> <li class="bp-header__subsubitem"> <a href="#">3 Ambientes</a> </li> </ul> </li> <li class="bp-header__subitem"> <div class="bp-header__subitem-header"> <p>Localidades</p> <img src="img/icon_chevron-down.svg" class="bp-header__item-chev" /> </div> <ul class="bp-header__subsubitem-list"> <li class="bp-header__subsubitem"> <a href="#">Avellaneda</a> </li> <li class="bp-header__subsubitem"> <a href="#">Gerli</a> </li> <li class="bp-header__subsubitem"> <a href="#">Lanus</a> </li> <li class="bp-header__subsubitem"> <a href="#">Remedios de Escalada</a> </li> <li class="bp-header__subsubitem"> <a href="#">Banfield</a> </li> <li class="bp-header__subsubitem"> <a href="#">Lomas de Zamora</a> </li> </li> <li class="bp-header__subsubitem"> <a href="#">Temperley</a> </li> </ul> </li> </ul> </li> <li class="bp-header__item bp-header__onlymobile"> <div class="bp-header__item-header"> <p>Listado de inmobiliarias</p> </div> </li> </ul> <div class="bp-header__itembtn bp-header__onlymobile bp-header__publicar"> <a class="bp-button bp-button--light bp-button--outline bp-button--block" href="#"> Publicar </a> </div> <ul class="bp-header__sesion bp-header__onlymobile"> <li class="bp-header__sesion-item"> <a href="#"> <img class="bp-header__sesion-icon" src="img/icon_user-edit.svg"/> Editar Perfil </a> </li> <li class="bp-header__sesion-item"> <a href="#"> <img src="img/icon_sign-out-alt.svg" class="bp-header__sesion-icon" /> Salir </a> </li> </ul> </div> <ul class="bp-header__botonera-desk"> <div class="bp-header__botonera-desk-item"> <a class="bp-button bp-button--light bp-button--outline" href="#"> Publicar </a> </div> <div class="bp-header__botonera-desk-item bp-header__botonera-desk-item--acceder"> <a class="bp-button bp-button--outline bp-button--primary" href="#"> <img src="img/icon_user-circle.svg" class="bp-button__img" alt="Acceder" /> Acceder </a> </div> <div id="btnUser" class="bp-header__user bp-header__user--login"> <a class="" href="#"> <picture class="bp-header__avatar"> <img alt="avatar" src="https://www.clarin.com/img/2023/05/17/PCzdbpCpw_720x0__1.jpg"/> </picture> Hola Pepe <img alt="desplegar" src="img/icon_chevron-down.svg" class="bp-header__user-chev"/> </a> </div> </ul> </div> </header>

.bp-header{ height:4.375rem; background-color:#ffffff; position:relative; padding:0 10px; width:100%; position: fixed; top:0; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);}.bp-header__botonera{ background-color:#FFFFFF; position:absolute; left:0; right:0; height: calc(100vh - 4.375rem); transform: translate(100rem); transition:all .5s;}.bp-header__botonera.--open{ transform: translate(0);}.bp-header__times{ display:none;}.bp-header__botonera.--open .bp-header__times{ display:block;}.bp-header__hamburguer{ display:block; cursor:pointer}.bp-header__botonera.--open .bp-header__hamburguer{ display:none;}/* LOGO */.bp-header__logo{ height:4.375rem; width:100%;}.bp-header__logo-container{ display:flex; justify-content:space-between; align-items:center; height: 4.375rem;}.bp-header__logo-img{ height:1.875rem; width:auto; max-width:100%;}/* MENU */.bp-header__item{ width:100%;}.bp-header__item-header{ font-size:.875rem; color: #222222; display:flex; justify-content:space-between; align-items:center; width:100%; padding: .625rem 1.25rem; background-color: #FFFFFF; height: 2.313rem;}.bp-header__item-chev{ height:.625rem; width: .625rem; transition: all .5s; filter: invert(9%) sepia(7%) saturate(7%) hue-rotate(358deg) brightness(98%) contrast(88%)}.bp-header__item-chev.--open{ transform:rotate(180deg);}.bp-header__subitem-list{ list-style:none; display:flex; flex-direction:column; gap:0; background-color: #F3F7F8;}.bp-header__subitem-header{ font-size: .75rem; background-color: #F3F7F8; display:flex; justify-content: space-between; align-items:center; width:100%; padding: .625rem 1.25rem; height: 2.313rem;}.bp-header__subitem-list,.bp-header__subsubitem-list{ display:flex; flex-direction:column; gap:0; max-height:0; transition: all .5s ease; overflow:hidden; list-style:none;}.bp-header__subitem-list.--open,.bp-header__subsubitem-list.--open{ max-height:1000px;}.bp-header__subsubitem{ font-size: .625rem; background-color: #E9E9E9; padding: .375rem 1.25rem;}.bp-header__subsubitem a{ color: #222; text-decoration:none;}/* Botones acceder y publicar */.bp-header__itembtn{ padding: .75rem 1.25rem; width:100%; background-color: #FFFFFF; border-bottom:1px solid #E4E6E8;}/* PANEL SI ESTÁ LOGUEADO */.bp-header__panel{ border-bottom:1px solid #E4E6E8; display:none;}.bp-header__panel-item a{ display:flex; align-items:center; gap:10px; font-size: .875rem; padding: .375rem 1.25rem; line-height: 1.0625rem; text-decoration:none; color: #222222; height: 2.313rem;}.bp-header__panel-icon{ height:1.0625rem; width:1.0625rem; filter: invert(10%) sepia(99%) saturate(3007%) hue-rotate(324deg) brightness(98%) contrast(101%); }/* AVATAR LOGUEADO */.bp-header__user{ border-bottom:1px solid #E4E6E8; display:none;}.bp-header--login .bp-header__user{ display:flex;}.bp-header__user a{ display:inline-flex; align-items:center; gap:10px; font-size:.875rem; font-weight: 700; background-color: #ffffff; text-decoration:none; overflow:hidden; padding: 10px 20px; color: #222; width:100%;}.bp-header__avatar{ height:2rem; width:2rem; border-radius:100%; overflow:hidden;}.bp-header__avatar img{ height: 2rem; width:auto;}.bp-header__item-list{ border-bottom:1px solid #E4E6E8; display:flex; flex-direction:column;}.bp-header__sesion-item{ background: #ffffff; height: 2.313rem;}.bp-header__sesion-item a{ padding: 6px 20px; font-size: .875rem; display:flex; gap:10px; align-items:center; text-decoration:none; color: #222222;}.bp-header__sesion-icon{ filter: invert(87%) sepia(10%) saturate(85%) hue-rotate(163deg) brightness(95%) contrast(86%); height: 1.0625rem; width: 1.0625rem;}.bp-header__botonera-desk{ display:none;}.bp-header--login .bp-header__acceder{ display:none;}.bp-header--login .bp-header__panel{ display:block;}.bp-header--login .bp-header__publicar{ display:none;}.bp-header__sesion.bp-header__onlymobile{ display:none;}.bp-header--login .bp-header__sesion.bp-header__onlymobile{ display:block;}.bp-header__botonera-mobile{ display:flex; align-items:20px; gap:10px;}.bp-header__avatar--mobile{ display:none;}.bp-header--login .bp-header__avatar--mobile{ display:block;}/* DESKTOP */@media screen and (min-width:992px){ .bp-header__avatar--mobile, .bp-header--login .bp-header__avatar--mobile{ display:none; } .bp-header__onlymobile, .bp-header__sesion, .bp-header__user.bp-header__onlymobile{ display:none !important } .bp-header__hamburguer{ display:none; } .bp-header__logo{ width:fit-content; } .bp-header__botonera{ position:static; transform: none; height:auto; } .bp-header{ padding:0; } .bp-header__container{ max-width: 77.5rem; margin:0 auto; width:100%; display:flex; align-items:center; gap:2rem; } .bp-header__botonera{ display:flex; } .bp-header__botonera-desk{ display:flex; margin-left:auto; align-items:center; gap:1.25rem; } .bp-header__menu{ display:flex; flex-direction:row; border-bottom:none; } .bp-header__item-header{ width:fit-content; height:auto; gap: .3125rem; font-size: .75rem; } .bp-header__subitem-list { position: absolute; } .bp-header__item-chev{ display:none; } .bp-header__item-header{ transition:all .5s; } .bp-header__item:hover .bp-header__item-header{ font-weight:bold; color: #FF8300; cursor:pointer; background-color: #F3F7F8; } .bp-header__item .bp-header__subitem-list{ transition: all .5s; } .bp-header__item:hover .bp-header__subitem-list{ max-height:1000px; padding:20px 0; } .bp-header__subitem-list{ display:flex; flex-direction:row; width:900px; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); background-color: #FFFFFF; border-radius: 0px 0px 10px 10px; top:4.375rem; left:calc(50% - 450px); } .bp-header__subitem-list > .bp-header__subitem{ width: 225px; } .bp-header__subitem-list > .bp-header__subitem:first-child{ width: 450px; } .bp-header__subitem-header{ background-color: #fff; font-size: .75rem; font-weight:600; padding:0 20px 15px; } .bp-header__item:hover .bp-header__subsubitem-list{ max-height:500px; } .bp-header__subsubitem{ background-color:#ffffff; font-size: .625rem; color: #222; padding-bottom:0.156rem; padding-top:0.156rem; transition: all .5s; } .bp-header__subsubitem:hover{ background-color: #F3F7F8; } .bp-header__subsubitem a{ width:100%; display:inline-block; } .bp-header__item .bp-header__subitem:first-child .bp-header__subsubitem-list{ display:grid !important; grid-template-columns: 1fr 1fr; } .bp-header__subitem-list.--open, .bp-header__subsubitem-list.--open{ max-height:0; } .bp-header__subsubitem.--active a, .bp-header__subitem--active a{ font-weight:700; color: #FF8300; } .bp-header--login .bp-header__user--login{ display:flex; align-items:center; gap:1.25rem; border:0; height:fit-content; background: transparent; } .bp-header--login .bp-header__user--login a{ padding:.5rem; border-radius: 100px; border:1px solid #c9cdd0; height:100%; transition: .5s all; } .bp-header__user-chev{ height: .625rem; width: .625rem; filter: invert(9%) sepia(7%) saturate(7%) hue-rotate(358deg) brightness(98%) contrast(88%) } .bp-header--login .bp-header__user--login a:hover{ background-color: #EBEBEB; border-color: #EBEBEB; } .bp-header--login .bp-header__botonera-desk-item--acceder{ display:none; } .bp-header__container{ position:relative; } .bp-header__panel{ position:absolute; top:4.375rem;; right:0; border-radius: 0px 0px 10px 10px; max-height:0; transition: max-height .5s; overflow:hidden; background-color:transparent; opacity: 0; } .bp-header__panel.--open{ max-height: 400px; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); background-color:#ffffff; opacity:1; } .bp-header__panel .bp-header__sesion-item:last-child{ border-radius: 0px 0px 10px 10px; } .bp-header__onlydesktop{ display:block !important; } .bp-header__sesion.bp-header__onlydesktop{ border-top:1px solid #E4E6E8; } .bp-header__panel-item:hover, .bp-header__panel .bp-header__sesion-item:hover{ background-color: #EBEBEB; }}

let items = document.querySelectorAll(".bp-header__operation .bp-header__item-header"); let subitems = document.querySelectorAll(".bp-header__subitem .bp-header__subitem-header"); /* PLEGAR Y DESPLEGAR ITEMS */for(let i = 0; i < items.length; i++){ items[i].addEventListener("click", () => { let lista = items[i].nextElementSibling; /* PLIEGO TODOS LOS ITEMS */ items.forEach((item) => { if(item != items[i]){ let element = item.nextElementSibling; element.classList.remove("--open"); } }); /* PLIEGO TODOS LOS SUBITEMS*/ subitems.forEach((subitem) => { let element = subitem.nextElementSibling; element.classList.remove("--open") }); lista.classList.toggle("--open"); let chev = items[i].getElementsByTagName("img")[0]; chev.classList.toggle("--open"); })}for(let i = 0; i < subitems.length; i++){ subitems[i].addEventListener("click", () => { let lista = subitems[i].nextElementSibling;; console.log(lista) /* PLIEGO TODOS */ subitems.forEach((subitem) => { if(subitem != subitems[i]){ let element = subitem.nextElementSibling; console.log(element) element.classList.remove("--open") } }); lista.classList.toggle("--open"); let chev = subitems[i].getElementsByTagName("img")[0]; chev.classList.toggle("--open"); })}/* Desplegar menú */let btnHamburguer = document.getElementsByClassName("bp-header__hamburguer")[0];let btnMenuTimes = document.getElementsByClassName("bp-header__times")[0];let botonera = document.getElementsByClassName("bp-header__botonera")[0];let toggleMenu = () => { botonera.classList.toggle("--open");}btnHamburguer.addEventListener("click", toggleMenu);btnMenuTimes.addEventListener("click", toggleMenu);/* Menu desplegable login desktop*/let btnUser = document.getElementById("btnUser");let menuHeader = document.getElementById("menuDesktopLogin");btnUser.addEventListener("click", () => { menuHeader.classList.toggle("--open");});