1

Tengo todo mi header montado con sus estilos y demás pero me falta adaptarle a móvil, en lo que quiero la mitica Hamburguesa (icono de tres rayas). No sé como hacer para darle click y que salga el menu desplazado desde la izquierda preferiblemente. Os dejo mi codigo html y acepto cualquier sugerencia al respecto.

<!--menu moviles-->
<input onclick="javascript:changeClass();" type="checkbox" id="menu-bar">
<label id="etiqueta-menu" class="fas fa-bars" for="menu-bar"></label>

<header>
    <div class="container">
        <div class="nav-main left vertical__align justify__center">
            <ul>
                <lI>
                    <a title="GASTRONOMIA" href="https://www.burywholefoods.co.uk/shop/"><span>GASTRONOMIA</span></a>
                </li>
                <li>
                    <a title="GASTRONOMIA" href="https://www.burywholefoods.co.uk/shop/"><span>HOSTELERIA</span></a>
                </li>
                <li>
                    <a title="GASTRONOMIA" href="https://www.burywholefoods.co.uk/shop/"><span>RUTAS Y PAISAJES</span></a>
                </li>
            </ul>
        </div>
        <a href="https://www.burywholefoods.co.uk/" class="logo"> <img class="lazy lazy-loaded" src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Yale_%28company%29_logo.png" alt="Bury Wholefoods" width="100" height="100"></noscript> </a>
        <div class="nav-main right vertical__align justify__center">
            <ul>
                <li>
                    <a title="GASTRONOMIA" href="https://www.burywholefoods.co.uk/shop/"><span>MAPA GEOGRÁFICO</span></a>
                </li>
                <li>
                    <a title="GASTRONOMIA" href="https://www.burywholefoods.co.uk/shop/"><span>MULTIMEDIA</span></a>
                </li>
                <li>
                    <a title="GASTRONOMIA" href="https://www.burywholefoods.co.uk/shop/"><span>NUESTRAS TRADICIONES</span></a>
                </li>
            </ul>
        </div>
    </div>
</header>

Ya tengo hecho el click, me falta poner algo en el css para que salga el menu hacia la derecha y que se muestren todos los <li> que tengo en el codigo.

4
  • Por que no usas una de open source en vez de reinventar la rueda? y la estilizas a tu propio estilo. O más bien por que no usas un framework de diseño que tenga este feature.
    – vicasas
    Commented el 25 jun. 2019 a las 20:08
  • @vcasas he probado las de bootstrap y demás framework, y no se como modificar la animacion,siempre me sale la de por defecfo. Además, los frameworks te limitan a sus estilos y los header son todos muy parecidos, por eso siempre prefiero css a cualquier otra cosa.
    – user121369
    Commented el 25 jun. 2019 a las 20:10
  • Puedes usar materialize, su implementación es sencilla y más liviana que BS, mira un ejemplo aquí. Commented el 25 jun. 2019 a las 20:17
  • @OscarPlumariegaAcebo puedes hacer una hoja custom para personalizar los estilos. Los framework de diseño no son para usarlos asi tal cual... es una maqueta de ayuda para diseñar UI mas rápida en donde tu debes customizar tus cosas. puedes revisar material.io
    – vicasas
    Commented el 26 jun. 2019 a las 15:19

1 respuesta 1

2

Una opción sería esta. Un poco de la magia de Javascript y tienes lo que necesitas:

var oopen = document.getElementsByTagName('input')[0];
var close = document.getElementsByTagName('input')[1];
var aside = document.getElementsByTagName('aside')[0];

oopen.onclick = function()
{
  aside.style.left = '0';
}

close.onclick = function()
{
  aside.style.left = '-35%';
}
body
{
  margin: 0;
}

body > header
{
  background-color: #f2f4ff;
}

input
{
  background-color: #6769e5;
  border: 0;
  cursor: pointer;
  font-size: 1em;
  height: 50px;
  width: 50px;
}

input:hover
{
  background-color: #787aff;
  color: #fff;
}

aside
{
  background-color: #5e5ce6;
  height: 100%;
  left: -35%;
  position: absolute;
  top: 0;
  transition: left .5s;
  width: 35%;
}

aside > header
{
  background-color: #5e5ce6;
  display: flex;
  justify-content: right;
}

aside > section
{
  color: #fff;
  padding: 1em;
}

main
{
  padding: 1em;
}
<body>
  <header>
    <input type="button" value="☰">
  </header>
  <aside>
    <header>
      <input type="button" value="×">
    </header>
    <section>undefined</section>
  </aside>
  <main>undefined</main>
</body>

Espero haberte ayudado o aclarado las dudas que tenías.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.