JavaScript - menu hamburguesa

 
Vista:
sin imagen de perfil
Val: 5
Ha aumentado su posición en 7 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

menu hamburguesa

Publicado por Saidre (4 intervenciones) el 26/03/2021 17:24:11
1
2
3
4
5

Quiero hacer un menú hamburguesa para la versión móvil de mi página web. Cuando pulso en el icono del menú, no me salen las opciones. Me sale un error en f12 de google (captura 5). No entiendo el error
Ayuda y muchas gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

menu hamburguesa

Publicado por joel (895 intervenciones) el 26/03/2021 17:37:21
Hola Saidre, tu código a pantallazos lo veo super pequeño y me es imposible de seguir y menos de probar... puedes pegar el código tal cual?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 5
Ha aumentado su posición en 7 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

menu hamburguesa

Publicado por Alexandre (4 intervenciones) el 26/03/2021 17:47:57
//HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<header class="cabecera">
    <img src="Saidre/img/logoAmarillo.png" width="120"  alt="">
    <h1> CONTACTO </h1>
 
     <div class="menu">
        <ul>
            <li>
                <i class="fas fa-bars" onclick="menu1()"></i>
            </li>
            <li>
                <a href="inicio.html" onclick="closeMenu()">
                    Inicio
                </a>
            </li>
            <li>
                <a href="portfolio.html" onclick="closeMenu()">
                    Portfolio
                </a>
            </li>
            <li>
                <a href="biografia.html" onclick="closeMenu()">
                    Perfil profesional
                </a>
            </li>
        </ul>
    </div>
</header>

//CSS
//SIN RESPONSIVE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
.menu > ul{
 
    width: 100%;
    padding: 0.2em;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
 
}
 
.menu>ul>il {
    list-style: none;
 
}
.menu>ul>li>a,
.menu>ul>il>i{
    color:white;
    text-decoration: none;
    font-size: 20px;;
}
 
.menu>ul>li:first-child{
    display: none;
    align-content: center;
    cursor: pointer;
 
}
.menu > li > a {
    text-decoration: none;
    color: white;
}
 
.menu > ul > li> a:hover{
    color: #ffcc75;
}
//CON RESPONSIVE
@media screen and (max-width: 600px){
 .menu > ul > li:first-child{
 
        display: flex;
 
    }
 
    .menu > ul >li:not(first-child){
 
        display: none;
 
    }
 
    .menu > ul{
        flex-direction: column;
        align-items: flex-start;
 
 
    }
    .menu > ul > li > a {
        font-size: 1em;
    }
}

//JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function openMenu() {
    "use strict";
    var options = document.getElementById("menu").firstElementChild.children;
    for (var i = 1; i < options.length; i = i + 1) {
        options[i].style.display = "flex";
    }
}
function closeMenu() {
    "use strict";
    if (window.innerWidth < 600) {
        var options = document.getElementById("menu").firstElementChild.children;
        for (var i = 1; i < options.length; i = i + 1) {
            options[i].style.display = "none";
        }
    }
}
function menu1() {
    "use strict";
    if (document.getElementById("menu").firstElementChild.lastElementChild.style.display != "flex") {
        openMenu();
    } else {
        closeMenu();
    }
}

Espero que sirva. Muchas gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

menu hamburguesa

Publicado por Saidre (4 intervenciones) el 27/03/2021 22:06:47
Buenas, supiste solucionar mi error.
No entiendo el error que dice :


script.js:35 Uncaught TypeError: Cannot read property 'firstElementChild' of null
at menu (script.js:35)
at HTMLElement.onclick (contacto.html:33)

Muchas gracias.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

menu hamburguesa

Publicado por joel (895 intervenciones) el 28/03/2021 10:06:43
Hola Saide, he probado y codigo y el problema lo tienes en esta linea:
1
document.getElementById("menu").firstElementChild.lastElementChild.style.display

y el problema es que no existe el id = "menu"... la solución para poner el id y listo... cambia esta linea:
1
<div class="menu">
por esta:
1
<div class="menu" id="menu">

Ya nos dirás...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

menu hamburguesa

Publicado por Saidre (4 intervenciones) el 28/03/2021 13:38:38
Muchas gracias!! Sí que sirvió.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar