1

Estoy intentando hacer un menú responsive algo diferente a como normal lo suelo hacer: el icono para habilitar el menú lo tengo fijo abajo a la derecha. Al pinchar, me muestra el menú de la siguiente manera:

Imagen del menu

Tengo tres problemas con ese menú:

  1. El desplazamiento, hacia la izquierda para mostrarlo. Y para irse, se va a la izquierda. Intento que se desplace a la derecha para volver a esconderse por ofrecer una mejor "calidad".

  2. Además me gustaría saber cómo puedo hacer que no se ve así, me ocupe el "alto entero" del sidebar que se crea.

  3. Al hacer clic en menú, te sube hasta arriba de todo y muestra el menú.

¿Cómo puedo hacer para solucionar estos problemas? Éste es mi código:

$(document).ready(main);

var contador = 1;

function main() {
  $('.menu_bar').click(function() {
    if (contador == 1) {
      $('nav').animate({
        left: '10%'
      });
      contador = 0;
    } else {
      contador = 1;
      $('nav').animate({
        left: '-100%'
      });
    }
  });

  $('.submenu').click(function() {
    $(this).children('.children').slideToggle();
  });
}
.menu_bar {
  display: block;
  width: 15%;
  height: auto;
  position: fixed;
  bottom: 0;
  right: 0;
  border: solid 1px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .8);
}

.menu_bar .bt-menu {
  display: block;
  padding: 15px;
  color: #fff;
  overflow: hidden;
  font-size: 25px;
  font-weight: bold;
  text-decoration: none;
}

.menu_bar span {
  float: right;
  font-size: 40px;
}

header {
  background-color: transparent;
  border: none;
}

nav {
  width: 95%;
  position: fixed;
  left: 80%;
  margin: 0;
}

header nav ul li {
  background: rgba(52, 152, 219, .9);
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
}

#super-alto {
  padding-top:1500px;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">

<header>
  <div class="menu_bar">
    <a href="#" class="bt-menu"><span style="font-size: 12px; color: black;">  Menu</span><span class="fa fa-list" style="font-size: 22px; color: black;"></span></a>
  </div>
  <div class="logo"><img src="images/Logo.png" width="50%"></div>
  <nav>
    <ul>
      <li><a href="index.php"><span class="fa fa-home"></span>Inicio</a></li>
      <li class="submenu">
        <a href="#"><span class="fa fa-code"></span>Programación<span class="caret icon-arrow-down6"></span></a>
        <ul class="children">
          <li><a href="disenoweb.php">Diseño Web <span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="ecommerce.php">Tiendas online<span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="aplicaciones.php">Aplicaciones Móvil<span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="programacion.php">Programación a medida <span class="fa fa-dot-circle-o"></span></a></li>
        </ul>
      </li>

      <li class="submenu">
        <a href="#"><span class="fa fa-globe"></span>Posicionamiento Web<span class="caret icon-arrow-down6"></span></a>
        <ul class="children">
          <li><a href="posicionamiento.php">Posicionamiento SEO <span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="posicionamientosem.php">Campañas en AdWords <span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="emailmarketing.php">Email Marketing <span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="marketing-redes-sociales.php">Marketing en redes sociales <span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="auditoria-seo.php">Auditorías Competencia <span class="fa fa-dot-circle-o"></span></a></li>
        </ul>
      </li>

      <li class="submenu">
        <a href="#"><span class="fa fa-keyboard-o"></span>Soporte Informático<span class="caret icon-arrow-down6"></span></a>
        <ul class="children">
          <li><a href="gestion-hardware.php">Mantenimiento de Hardware <span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="gestion-software.php">Mantenimiento de Software <span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="gestion-redes.php">Diseño y Gestión Red Local <span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="servidores-dedicados.php">Servidores dedicados <span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="seguridad.php">Copias de seguridad <span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="almacenamiento.php">Almacenamiento <span class="fa fa-dot-circle-o"></span></a></li>

        </ul>
      </li>

      <li><a href="#"><span class="fa fa-trophy"></span>Proyectos</a></li>
      <li><a href="#"><span class="fa fa-envelope"></span>Contacto</a></li>
    </ul>
  </nav>
</header>

<div id="super-alto">Div añadido para hacer la página muy alta en pruebas</div>

CSS QUE NO HABIA MOSTRADO:

  header nav ul li a {
    display: block;
  }

  header nav ul li:hover .children {
    display: none;
  }

  header nav ul li .children {
    width: 100%;
    position: relative;
  }

  header nav ul li .children li a {
    margin-left:20px;
  }

  header nav ul li .caret {
    float: right;
  }

1 respuesta 1

1

Te voy a poner cómo resolver los tres problemas que planteas:

  1. El desplazamiento, hacia la izquierda para mostrarlo. Y para irse, se va a la izquierda. Intento que se desplace a la derecha para volver a esconderse por ofrecer una mejor "calidad".

Esto se puede solucionar de manera sencilla en el código JavaScript. Tal y como está ahora mismo, lo que tienes es un contador que comprueba si el menú debería estar abierto o cerrado y cambia su posición izquierda a 10% o -100% dependiendo del estado que tenga.

Te voy a proponer dos cambios para eso: 1) si el menú va a estar a la derecha, no lo posiciones desde la izquierda; esto va a hacer que se solucionen los problemas de animación que estabas viendo.

if (contador == 1) {
  $('nav').animate({
    right: '-20%'
  });
  contador = 0;
} else {
  contador = 1;
  $('nav').animate({
    right: '-100%'
  });
}

/** CSS **/
nav {
  width: 95%;
  position: fixed;
  right: -80%;
  margin: 0;
}

Y 2) no uses las animaciones de jQuery para algo que va a funcionar mejor y de manera más eficiente usando CSS. En ese caso sería mejor tener una clase "abierto" que se añadiese o quitase automáticamente (p.e. con toggleClass). No lo voy a incluir en la solución porque realmente es una mejora y no un problema, pero deberías considerar cambiarlo.

  1. Además me gustaría saber cómo puedo hacer que no se ve así, me ocupe el "alto entero" del sidebar que se crea.

Para esto sólo tienes que añadir los siguientes al nav:

top: 0;
height: 100vh; /* o 100% */
background: rgba(52, 152, 219, .9);

Pero esto va a generar nuevos problemas porque el código no está preparado para esto (el posicionamiento del nav tiene en cuenta el margen por defecto de la lista, el botón no está preparada para estar encima del menú, el posicionamiento de los elementos en la estructura de la página no es ideal, etc.) y vas a acabar con el menú encima del menú y sin poder cerrarlo. La solución más sencillo para evitar esto sería darle un z-index alto a la barra que contiene el botón del menú para que quede por encima del menú:

.menu_bar {
  display: block;
  width: 15%;
  height: auto;
  position: fixed;
  bottom: 0;
  right: 0;
  border: solid 1px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .8);
  z-index: 9;
}

(Además en el código de abajo he cambiado un poco los colores de los elementos poniendo el fondo azul en el nav en lugar de los li)

  1. Al hacer clic en menú, te sube hasta arriba de todo y muestra el menú.

Esto ocurre porque el botón del menú es un enlace que direcciona a #, entonces el navegador va a mover el scroll hasta arriba de la página. Una solución sencilla sería evitar que el navegador tome esta acción usando preventDefault() en tu evento JavaScript:

  $('.menu_bar').click(function(e) {
    e.preventDefault();

Además los submenús tienen el mismo problema, para eso, haces lo mismo de preventDefault para los enlaces que sean igual a '#':

$(this).find("a[href='#']").on("click", function(e) {
  e.preventDefault();
});

Aquí lo puedes ver funcionando con esos cambios:

$(document).ready(main);

var contador = 1;

function main() {
  $('.menu_bar').click(function(e) {
    e.preventDefault();
    if (contador == 1) {
      $('nav').animate({
        right: '-20%'
      });
      contador = 0;
    } else {
      contador = 1;
      $('nav').animate({
        right: '-100%'
      });
    }
  });

  $('.submenu').click(function(e) {
    $(this).find("a[href='#']").on("click", function(e) {
      e.preventDefault();
    });
    $(this).children('.children').slideToggle();
  });
}
.menu_bar {
  display: block;
  width: 15%;
  height: auto;
  position: fixed;
  bottom: 0;
  right: 0;
  border: solid 1px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .8);
  z-index: 9;
}

.menu_bar .bt-menu {
  display: block;
  padding: 15px;
  color: #fff;
  overflow: hidden;
  font-size: 25px;
  font-weight: bold;
  text-decoration: none;
  z-index: 10;
}

.menu_bar span {
  float: right;
  font-size: 40px;
}

header {
  background-color: transparent;
  border: none;
}

nav {
  width: 95%;
  position: fixed;
  right: -80%;
  margin: 0;
  top:0;
  height: 100%;
  background: rgba(52, 152, 219, .9);
}

header nav ul li {
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
}

#super-alto {
  padding-top:1500px;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">

<header>
  <div class="menu_bar">
    <a href="#" class="bt-menu"><span style="font-size: 12px; color: black;">  Menu</span><span class="fa fa-list" style="font-size: 22px; color: black;"></span></a>
  </div>
  <div class="logo"><img src="images/Logo.png" width="50%"></div>
  <nav>
    <ul>
      <li><a href="index.php"><span class="fa fa-home"></span>Inicio</a></li>
      <li class="submenu">
        <a href="#"><span class="fa fa-code"></span>Programación<span class="caret icon-arrow-down6"></span></a>
        <ul class="children">
          <li><a href="disenoweb.php">Diseño Web <span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="ecommerce.php">Tiendas online<span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="aplicaciones.php">Aplicaciones Móvil<span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="programacion.php">Programación a medida <span class="fa fa-dot-circle-o"></span></a></li>
        </ul>
      </li>

      <li class="submenu">
        <a href="#"><span class="fa fa-globe"></span>Posicionamiento Web<span class="caret icon-arrow-down6"></span></a>
        <ul class="children">
          <li><a href="posicionamiento.php">Posicionamiento SEO <span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="posicionamientosem.php">Campañas en AdWords <span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="emailmarketing.php">Email Marketing <span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="marketing-redes-sociales.php">Marketing en redes sociales <span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="auditoria-seo.php">Auditorías Competencia <span class="fa fa-dot-circle-o"></span></a></li>
        </ul>
      </li>

      <li class="submenu">
        <a href="#"><span class="fa fa-keyboard-o"></span>Soporte Informático<span class="caret icon-arrow-down6"></span></a>
        <ul class="children">
          <li><a href="gestion-hardware.php">Mantenimiento de Hardware <span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="gestion-software.php">Mantenimiento de Software <span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="gestion-redes.php">Diseño y Gestión Red Local <span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="servidores-dedicados.php">Servidores dedicados <span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="seguridad.php">Copias de seguridad <span class="fa fa-dot-circle-o"></span></a></li>
          <li><a href="almacenamiento.php">Almacenamiento <span class="fa fa-dot-circle-o"></span></a></li>

        </ul>
      </li>

      <li><a href="#"><span class="fa fa-trophy"></span>Proyectos</a></li>
      <li><a href="#"><span class="fa fa-envelope"></span>Contacto</a></li>
    </ul>
  </nav>
</header>

<div id="super-alto">Div añadido para hacer la página muy alta en pruebas</div>

4
  • Está genial la respuesta, pero no entiendo porque aqui lo puedo ver en funcionamiento pero en el codigo real, no me funciona el "clic" no me deja hacer clic en el menu Commented el 26 may. 2018 a las 15:26
  • Seguramente sea porque el menú se coloca por encima del botón. Asegúrate que los z-index están puestos en los lugares adecuados.
    – Alvaro Montoro
    Commented el 26 may. 2018 a las 15:27
  • Pues en teoría no debería dar problemas según estan colocados los z-index Commented el 26 may. 2018 a las 15:31
  • He añadido el final de css3 del menu, por si tuviera algo que modificar, que no me lo parece Commented el 26 may. 2018 a las 15:32

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.