B. Transiciones 2

Salida


1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport"
8	content="width=device-width">
9	<title>Transiciones 2</title>
10
11	<style>
12	menu {
13	display: flex;
14	align-items: center;
15	flex-wrap: wrap;
16	align-content: center;
17	list-style-type: none;
18	gap: 0.5rem;
19	padding: 0;
20	margin: 0;
21	}
22
23	#hamburguesa {
24	/* La hamburguesa se usará como
25	* referencia para posicionar
26	* elementos usando el nombre
27	* --hamburguesa. */
28	anchor-name: --hamburguesa;
29	}
30
31	#navGeneral {
32	position: absolute;
33	/* Indica la referencia para
34	* posicionar este elemento. */
35	position-anchor: --hamburguesa;
36	top: 3.5rem;
37	top: anchor(bottom);
38	left: 0.5rem;
39	left: anchor(left);
40	margin: unset;
41	/* Originalmente el elemento
42	* está desplazado hacia arriba
43	* a un 50% de su tamaño y
44	* contraido totalmente en su
45	* dimensión vertical. Cuando se
46	* reduce, cierra en el centro;
47	* por eso hay que desplazarlo. */
48	transform:
49	translateY(-50%) scaleY(0);
50	/* Este elemento cambia
51	* lentamente cuando se cambian
52	* las propiedades overlay,
53	* display y transform.
54	* por ser un popover,
55	* automáticamente el display se
56	* mantiene cerrado y fuera de
57	* la capa de overlay. */
58	transition-property:
59	overlay, display, transform;
60	/* Permite trabajar cin las
61	* propiedades que cambian
62	* abruptamente como overlay,
63	* y display. */
64	transition-behavior:
65	allow-discrete;
66	transition-duration: 1s;
67	}
68
69	/* Cuando el popover se abre,
70	* se elimina el desplazado
71	* hacia arriba y la
72	* constracción vertical. */
73	#navGeneral:popover-open {
74	transform: translateY(0);
75	}
76
77	/* Reglas para iniciar las
78	* propiedades que cambian
79	* abruptamente. */
80	@starting-style {
81
82	/* Al empezar a abrir, el
83	* popover se mantiene arriba y
84	* cerrado. Automáticamente pone
85	* display block y se pasa a la
86	* capa de overlay. */
87	#navGeneral:popover-open {
88	transform:
89	translateY(-50%) scaleY(0);
90	}
91
92	}
93	</style>
94
95	</head>
96
97	<body>
98
99	<menu>
100	<li>
101	<button type="button"
102	id="hamburguesa"
103	popovertarget="navGeneral">
104	≡
105	</button>
106	</li>
107	<li>
108	<h1>Transiciones 2</h1>
109	</li>
110	</menu>
111
112	<nav popover="auto"
113	id="navGeneral">
114	<h2>Enlaces externos</h2>
115	<ul>
116	<li>
117	<p>
118	<a target="_blank"
119	rel="noreferrer"
120	href="https://savethecat.com/">
121	Salvar al gato.
122	</a>
123	</p>
124	</li>
125	<li>
126	<p>
127	<a target="_blank"
128	rel="noreferrer"
129	href="https://www.showrunner.xyz/">
130	Showrunner
131	</a>
132	</p>
133	</li>
134	<li>
135	<p>
136	<a target="_blank"
137	rel="noreferrer"
138	href="https://google.com/">
139	Google
140	</a>
141	</p>
142	</li>
143	</ul>
144	</nav>
145
146	<p>Hola</p>
147	</body>
148
149	</html>

skip_previous skip_next