NO ME MUESTRA EL MENÚ CON DISPLAY: BLOCK;
Publicado por Camilo (2 intervenciones) el 05/07/2021 17:24:48
Bueno lo que les deseo consultar es lo siguiente: Estoy aprendiendo CSS con el curso de Dalto en youtube, voy en el minuto 4:30:15 del tutorial casi a la mitad (al final les dejo el link del tutorial para que lo contrasten lo que digo) bueno, lo que sucede es que estoy en la clase de 'menú responsive', que se refiere a desactivar un menú a 500px o menos y activar otro menú en reemplazo de ese... pasa que al inicio está bien, creo do menús y pues desactivo uno con DISPLAY: NONE; y claro, se desactiva y me queda uno sólo... luego cuando activo el @MEDIA SCREEN AND
(MAX-WIDTH: 500PX) { .CLASS {DISPLAY: NONE;} CLASS2 {DISPLAY: BLOCK;} }
Sí, me desaparece el menú CLASS a los 500 px, pero no me hace aparecer el otro menú, el CLASS2.
Debo comentarles que el menú CLASS2 lo desaparecí previamente con un DISPLAY: NONE; al inicio del codigo. Les adjunto los códigos en HTML y CSS para que puedan revisarlos y decirme en qué estoy fallando, les agradecería su ayuda, porque estoy iniciando en el mundo de la programación.
El vídeo de youtube es éste: https://www.youtube.com/watch?v=OWKXEJN67FE ya saben 4:30:15 es la parte de la clase, un minuto o dos atrás y pueden contextualizarse.
Aquí les dejo mis archivos:
HTML
(MAX-WIDTH: 500PX) { .CLASS {DISPLAY: NONE;} CLASS2 {DISPLAY: BLOCK;} }
Sí, me desaparece el menú CLASS a los 500 px, pero no me hace aparecer el otro menú, el CLASS2.
Debo comentarles que el menú CLASS2 lo desaparecí previamente con un DISPLAY: NONE; al inicio del codigo. Les adjunto los códigos en HTML y CSS para que puedan revisarlos y decirme en qué estoy fallando, les agradecería su ayuda, porque estoy iniciando en el mundo de la programación.
El vídeo de youtube es éste: https://www.youtube.com/watch?v=OWKXEJN67FE ya saben 4:30:15 es la parte de la clase, un minuto o dos atrás y pueden contextualizarse.
Aquí les dejo mis archivos:
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
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYbE html>
<html lang="en">
<head>
<title> Aprendiendo CSS con @SoyDalto</title>
<link rel="stylesheet" tybe="text/css" href="Estilo.css">
<link rel="stylesheet" tybe="text/css" href="normalize.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/62ea397d3a.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="nav">
<ul class="nav__ul">
<li class="nav__li"><i class="fas fa-home"></i><a href="#">Inicio</a></li>
<li class="nav__li"><i class="fas fa-user-friends"></i><a href="#">Sobre Nosotros</a></li>
<li class="nav__li"><i class="fas fa-dollar-sign"></i><a href="#">Gana Dinero</a></li>
<ul>
<ul class="nav__responsive">
<div class="nav__responsive-buttom"></div>
<li class="nav__responsive-li"><i class="fas fa-home"></i><a href="#">Inicio</a></li>
<li class="nav__responsive-li"><i class="fas fa-user-friends"></i><a href="#">Sobre Nosotros</a></li>
<li class="nav__responsive-li"><i class="fas fa-dollar-sign"></i><a href="#">Gana Dinero</a></li>
</div>
</ul>
</nav>
</header>
</body>
</html>
CSS
*{
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 100;
}.nav__responsive {
display: none;}.nav {
background-color: blueviolet;
}.nav__li {
display: inline-block;
padding: 12px;color: #fff;
}.nav__li:hover > a {
color: #000;
}.nav__li:hover {
color: #000;
}.nav__li a {
color: #fff;
text-decoration: none;
}.nav__li i{
box-sizing: border-box;
text-align: right;
margin-right: 5px;
}@media only screen and (max-width: 500px) {
.nav__ul {
display: none;}.nav__responsive {display: block;
}}Valora esta pregunta
0