No puedo entender qué se interpone aquí. Tengo una navegación simple que se ve así:
<nav>
<div class="artists">
<a href="#">OPEN</a>
<ul>
<li><a href="/newpage">TEXT</a></li>
<li><a href="#">TEXT</a></li>
<li><a href="#">TEXT</a></li>
</ul>
</div>
</nav>
La opacidad de ul es inicialmente 0, hasta que el usuario hace clic en ABRIR, después de lo cual aparece el "desplegable" Se muestra la lista:
nav {
width: 100%;
display: flex; /* bc there are actually more things than one category */
border-bottom: 1px solid var(--black-75);
}
.artists ul {
width: max-content;
position: absolute;
margin-top: 16px;
padding: 30px;
list-style: none;
line-height: 3rem;
opacity: 0;
pointer-events: none;
transition: all 0.5s ease;
z-index: 9999;
}
.artists a:focus + ul {
opacity: 1;
pointer-events: all;
}
Esto funciona, sin embargo, cuando hago clic en el primer elemento de mi lista, que debería llevarme a /newpage, no sucede nada. ¿Casi parece que hay algo en el camino? Lo que es particularmente extraño es que cuando paso el cursor sobre ese enlace, Chrome muestra la dirección correcta en la parte inferior izquierda del navegador, por lo que sabe lo que quiero hacer. Configurar el índice z en 9999 no parece hacer nada...
nav {
width: 100%;
display: flex; /* bc there are actually more things than one category */
border-bottom: 1px solid var(--black-75);
}
.artists ul {
width: max-content;
position: absolute;
margin-top: 16px;
padding: 30px;
list-style: none;
line-height: 3rem;
opacity: 0;
pointer-events: none;
transition: all 0.5s ease;
z-index: 9999;
}
.artists a:focus + ul {
opacity: 1;
pointer-events: all;
}
<nav>
<div class="artists">
<a href="">OPEN</a>
<ul>
<li><a href="https://stackoverflow.com/newpage">TEXT</a></li>
<li><a href="">TEXT</a></li>
<li><a href="">TEXT</a></li>
</ul>
</div>
</nav>
3
eliminar eventos de puntero: ninguno; es un navegador con elementos en los que quieres hacer clic, ¿verdad?
-zbueno
19/03/2021 a las 18:38
@zgood sí, pero no quiero que se pueda hacer clic en ellos mientras el menú desplegable tenga opacidad 0. Solo después de a:focus y se muestra la identificación de la lista misma
- Thomas Nicholson
19/03/2021 a las 18:43
¿display:none funciona para ti? ¿O estás intentando lograr algún tipo de animación de desvanecimiento con opacidad?
-zbueno
19/03/2021 a las 18:44
Exactamente, se produce un pequeño desvanecimiento y desplazamiento... Curiosamente, probé display:none solo para ver y tiene el mismo problema.
- Thomas Nicholson
19/03/2021 a las 18:51
Por ej. No puedo hacer clic derecho y abrir el enlace en una pestaña nueva
- Thomas Nicholson
19/03/2021 a las 18:53
------------------------------------
¿Ha considerado utilizar los detalles y los elementos de resumen para lograr un enfoque accesible más sencillo?
El problema anterior se debe a que el elemento principal ul tiene eventos de puntero: ninguno; conjunto que heredan los hijos. El enfoque que he sugerido no requerirá que ustedpara cambiar la opacidad o los eventos de puntero, entonces debería resolver el problema.
------------------------------------
En lugar de jugar con eventos de puntero, intente con pseudoelementos arriba y debajo de la etiqueta ul
nav {
width: 100%;
display: flex;
/* bc there are actually more things than one category */
border-bottom: 1px solid var(--black-75);
}
.artists ul {
width: max-content;
/* position: absolute; */
margin-top: 16px;
padding: 30px;
list-style: none;
line-height: 3rem;
opacity: 0;
transition: all 1s ease;
z-index: 9999;
position: relative;
}
.artists ul::after {
position: absolute;
content: " ";
/* background-color: red; */
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
transition: z-index 1s;
}
.artists a:focus+ul::after {
z-index: -100;
}
.artists a:focus+ul {
opacity: 1;
}
<nav>
<div class="artists">
<a href="">OPEN</a>
<ul>
<li><a href="https://stackoverflow.com/newpage">TEXT</a></li>
<li><a href="https://stackoverflow.com/newpage2">TEXT</a></li>
<li><a href="https://stackoverflow.com/newpage3">TEXT</a></li>
</ul>
</div>
</nav>
4
¿Qué tal si muestro un ejemplo en vivo... lo que necesito es que el menú se desplace sobre el contenido debajo de él de esta manera?homasnicholson.ca/sacredrealism... verás que cuando hagas clic en "artistas" ... hacer clic en el primer nombre de la lista debería llevarlo a una nueva página, como si hiciera clic en "etiqueta" en las principales categorías. Lo que sugieres es casi lo que estoy buscando, pero el espacio para el menú en sí ya está reservado...
- Thomas Nicholson
19/03/2021 a las 19:30
puedes intentar envolver la etiqueta ul dentro de un div, dándole a este div la posición absoluta y a ul la posición relativa. eso implica actualizar sus selectores CSS. Sin embargo, después de mirarg en su sitio web, le recomiendo encarecidamente que active la opción Mostrar ninguno en los menús desplegables, ya que tenerlos transparentes puede generar una mala experiencia de usuario.
-David Ricardo Amaya Rojas
19/03/2021 a las 20:13
Mostrar nada es lo que normalmente habría hecho, pero encontré un tutorial con la linda transición de desvanecimiento y reposicionamiento que se basa en la opacidad y pensé que podría ser más fácil... Sorpresa.
- Thomas Nicholson
19/03/2021 a las 20:59
Puedes agregar las propiedades de visualización a tu CSS actual con las propiedades de opacidad y transición, y eso te dará una linda animación de desvanecimiento. ¿Puedes compartir todo el código de tu ejemplo en vivo? Intenté hacer una copia para implementar el menú desplegable, pero parece que estás cargando dinámicamente muchos archivos HTML y activos
-David Ricardo Amaya Rojas
19/03/2021 a las 21:24
