Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Ayuda con "Tree" - Html, css

JavaScript - Ayuda con "Tree" - Html, css

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 22
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ayuda con "Tree" - Html, css

Publicado por MAri (15 intervenciones) el 19/05/2021 16:41:53
Hola! Tengo que hacer un árbol como el que está en la imagen, alguien podía ayudarme? (A CADA PÁGINA LE TENGO QUE PONER BOTONES DE NAVEGACIÓN) GRACIAS
Tengo este código:
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
<!DOCTYPE html>
<html lang="es-ES">
<head>
	<title>Sitio De Multimedia Favorito</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="Trabajoentregar.css">
</head>
<body>
	<h2> Trabajo final LMSGI</h2>
	<h1> Sitio de Multimedia Favorito </h1>
 
	<div class="tree">
		<ul>
			<li>
				<a href>Home (con enlaces)</a>
				<ul>
					<li>
						<a href>Lista libros</a>
							<p>Vistos</p>
							<p>Pendientes</p>
							<p>Favoritos</p>
						<a href>Lista películas</a>
						  <p>Pendientes</p>
							<p>Favoritas</p>
						<a href>Lista música</a>
						<p>Artistas favoritos</p>
						<p>Álbumes favoritos</p>
						<p>Tipos de instrumentos musicales</p>
						<p>Tipos de música que se escucha hoy día-</p>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</body>
</html>


EN EL CSS:
1
2
3
4
h1 {
  Text-align: center;
 
}

Captura-de-pantalla-2021-05-19-a-las-16.37.32
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 Alejandro
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ayuda con "Tree" - Html, css

Publicado por Alejandro (540 intervenciones) el 21/05/2021 00:42:48
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
A ver si es algo como esto lo que buscas
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
87
88
89
90
<style>
	*{
		margin:0px;
	}
	nav{
		background:#BBB;
		width:250px;
	}
	nav ul{
		padding:0px;
	}
	nav li {
		list-style:none;
		position:relative;
		display:block;
	}
	nav .collapse{
		display:none;
	}
	nav ul.level2{
		padding-left:10px;
		background:#CCC;
	}
	nav ul.level3{
		padding-left:20px;
		background:#DDD;
	}
 
	nav li a{
		display:block;
		text-decoration:none;
	}
	nav li a:hover{
		background:#FFF;
	}
</style>
<nav>
	<ul class="level1">
		<li>
			<a href="#">Home</a>
			<ul class="level2 collapse">
				<li>
					<a href="#">Lista libros</a>
					<ul class="level3 collapse">
						<li><a href="">Vistos</a></li>
						<li><a href="">Pendientes</a></li>
						<li><a href="">Favoritos</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Lista películas</a>
					<ul class="level3 collapse">
						<li><a href="">Pendientes</a></li>
						<li><a href="">Favoritos</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Lista Música</a>
					<ul class="level3 collapse">
						<li><a href="">Artistas favoritos</a></li>
						<li><a href="">Albumes favoritos</a><li>
						<li><a href="">Tipos de instrumentos musicales</a></li>
						<li><a href="">Tipos de música que se escucha hoy día</a></li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</nav>
 
<script>
	ul = document.querySelectorAll('nav ul li>a');
	for(i=0, t=ul.length; i<t; i++ ){
		ul[i].addEventListener('click', menuLink);
	}
 
	function menuLink(e){
		e.preventDefault();
		if( e.target.attributes.href.value=='#'){
			if(e.target.nextElementSibling.classList.contains('collapse')){
				e.target.nextElementSibling.classList.remove('collapse');
			}else{
				e.target.nextElementSibling.classList.add('collapse');
			}
		}else{
			location.href=e.target.href;
		}
	}
 
</script>
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