Positioning and animation problems of a responsive menu

Question

Positioning and animation problems of a responsive menu

Navigation

#1 by (1 votes)

1

I'm trying to make a responsive menu something different from how I normally do it: the icon to enable the menu is fixed below on the right. When I click, it shows me the menu in the following way:

I have three problems with that menu:

The scroll, to the left to show it. And to leave, it goes to the left. I try to move to the right to hide again to offer a better "quality".

I would also like to know how I can make it not look like this, I'll deal with the "entire height" of the sidebar that is created.

When you click on the menu, it goes up to everything and shows the menu.

How can I do to solve these problems? This is my code:

$(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 THAT HAD NOT SHOWN:

  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;
  }

javascript html5 html css3 css

asked by Javier Avila Fernandez 25.05.2018 в 23:51

source

1 answer

Problems with ic_launcher Responsive adjustment for input-group with Select2 and other form-control or input-group-btn

score 1 · Accepted Answer

I'll give you how to solve the three problems you pose:

The scroll, to the left to show it. And to leave, it goes to the left. I try to move to the right to hide again to offer a better "quality".

This can be easily solved in the JavaScript code. As it is right now, what you have is a counter that checks if the menu should be open or closed and changes its left position to 10% or -100% depending on the state it has.

I'll propose two changes for that: 1) if the menu is going to be on the right, do not position it from the left; this is going to solve the animation problems you were seeing.

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;
}

And 2) do not use the jQuery animations for something that will work better and more efficiently using CSS. In that case it would be better to have an "open" class that was added or removed automatically (eg with toggleClass ). I will not include it in the solution because it really is an improvement and not a problem, but you should consider changing it.

I would also like to know how I can make it not look like this, I'll deal with the "entire height" of the sidebar that is created.

For this you just have to add the following to nav :

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

But this will generate new problems because the code is not prepared for this (the positioning of nav takes into account the default margin of the list, the button is not ready to be on top of the menu, the positioning of the elements in the structure of the page is not ideal, etc.) and you will end the menu on top of the menu and without being able to close it. The simplest solution to avoid this would be to give a% high% of the bar that contains the menu button so that it is above the menu:

.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;
}

(Also in the code below I changed the colors of the elements a little bit by putting the blue background in the z-index instead of the nav )

When you click on the menu, it goes up to everything and shows the menu.

This happens because the menu button is a link that directs to li , then the browser will move the scroll to the top of the page. A simple solution would be to prevent the browser from taking this action by using # in your JavaScript event:

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

Also the submenus have the same problem, for that, you do the same of preventDefault() for the links that are equal to '#':

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

Here you can see it working with those changes:

$(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>