Hamburger menu How can I make it responsive and correct the problems I have?

Question

Hamburger menu How can I make it responsive and correct the problems I have?

Navigation

#1 by (1 votes)

2

My idea is to make a hamburger button with horizontal displacement and that is responsive. I currently have this, I do not have much knowledge, so I would like to know if someone can give me a hand with this menu. I want the menu to open with the hamburger icon, to the right and when the menu is already open, with the same hamburger icon clicking on the other part of the page it closes. This would be for when the page is being viewed on a computer or notebook.

When seen from a small device is the typical burger icon that displays downwards

function openNav() {
    document.getElementById("mySidenav").style.width = "100%";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}

.sidenav {
    height: auto;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    display: block;
}

.sidenav a {
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    transition: 0.5s;

}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1; 

}

@media (max-width: 4000px){
.sidenav .row{
    height: 60px;
}
}
@media (max-width: 1000px){
.sidenav .row{
    height: auto;
    vertical-align: center;
}
}
.sidenav {
height: auto;
text-align: center;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <!-- boostrap-->
	<link rel="stylesheet" type="text/css" href="css/personalstyle.css">  <!--estilo personal -->


<span style="font-size:25px;cursor:pointer" onclick="openNav()">&#9776; MENU</span>
<div id="mySidenav" class="sidenav row">
	<div class="col-md-2"><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&#9776;MENU</a></div>
	<div class="col-md-2"><a href="#servicesection">SERVICIOS</a></div>
	<div class="col-md-2"><a href="#clientessection">CLIENTES</a></div>
	<div class="col-md-2"><a href="#biografiasection">BIO</a></div>
	<div class="col-md-2"><a href="#contactosection">CONTACTO</a></div>
	<div class="col-md-2"><a href="Index/EN.html">English</a></div>
</div>

javascript html css

asked by Carlos 28.04.2017 в 22:44

source

1 answer

Uncaught TypeError: Can not read property 'length' of undefined [json, ajax and DataTables] How to handle the scroll not of the Body but of a Div

score 1 · Answer 1

I can recommend you align the botón that opens the navigation to the right and change the behavior to:

Open the menu with the botón hamburger.
Close the menu if the user clicks outside the menu.

For this, as in applications Android , usually with Material Design , when opening the menu the content below darkens, and when the user makes a touch out of the menu area closes this.

Here is an example of how you could do it.

    var menu      = document.querySelector('#menu');
    var drawer    = document.querySelector('nav');
    var oscurecer = document.querySelector('.oscurecer');

    menu.addEventListener('click', function (e) {
        /*Abrir menu*/
        drawer.classList.toggle('open');

        /* Oscurecer contenido al abrir el menu */
        oscurecer.style.display = 'block';

        /*Evitar que se haga scroll*/
        document.getElementsByTagName("html")[0].style.overflow = "hidden";
        e.stopPropagation();
    });
    oscurecer.addEventListener('click', function () {
        /* Cerrar menu */
        drawer.classList.remove('open');

        /* Aclarar contenido al cerrar el menu */
        oscurecer.style.display = 'none';
        
        /*Activar scroll*/
        document.getElementsByTagName("html")[0].style.overflow = "auto";
    });

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css?family=Roboto');
* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

li {
  list-style: none;
}
a {
  text-decoration: none;
}
a:link {
  color: #212121;
}
a:visited {
  color: #212121;
}

.menu-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    padding:0 2em;
    background-color: #4d2b90;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
}
.blanco{
  color:white;
}
/*Esta clase se aplica para oscurecer toda la pantalla por debajo del nav*/
.oscurecer {
    background-color: rgba(0, 0, 0, .3);
    z-index: 99;
    position: absolute;
    height: 100%;
    width: 100%;
    display: none;
}
nav {
    z-index: 100;
    width: 300px;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: white;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transform: translate(-300px, 0);
    transition: transform .3s ease;
}
/*Cuando se agrega esta clase el nav aparecerá*/
nav.open {
    transform: translate(0, 0);
}

/*Algo estilo a los item del menu*/
nav li {
    padding: 1em;
}
nav li a {
    text-align: center;
    padding: 1em;
    color: #424242;
}

<!--Oscurecerá la pantalla por debajo de la navegación al abrirse-->
<div class="oscurecer"></div>
<!--Zona visible al usuario con ícono-->
<div class="menu-mobile">
    <div>
      <span class="blanco">Página</span>
    </div>
    <a href="#" id="menu">
      <i class="material-icons blanco">menu</i>
    </a>
</div>
 
<nav>
  <li><a href="#Inicio">Inicio</a></li>
  <li><a href="#Acerca">Acerca de</a></li>
  <li><a href="#Contacto">Contacto</a></li>
</nav>