Uno de los aspectos importantes del dise o de sitios web es crear una experiencia de navegaci n f cil para los usuarios. Una forma de mejorar la usabilidad del sitio es mediante un men "flotante" que permanece visible incluso cuando se desplaza por la p gina. En este art culo, le diremos c mo implementar un men en movimiento en su sitio.
. Luego, con CSS, establezca ese contenedor en propiedades que le permitan permanecer en su lugar a medida que la p gina se desplaza.
position: fixed;
. Aplique esta propiedad a su contenedor de men , por ejemplo:
#menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
z-index: 999;
establece un nivel de profundidad alto para que aparezca por encima de otros elementos de la p gina.
C mo hacer que el men del sitio se mueva junto con el desplazamiento
El men del sitio, que se mueve junto con el desplazamiento, crea una experiencia de usuario m s c moda e intuitiva. El usuario siempre puede acceder f cilmente a las secciones principales del sitio, incluso cuando se desplaza hacia abajo. En esta secci n, veremos c mo implementar esta funcionalidad con HTML y CSS.
Contactos
Paso 2: Agregue estilos CSS para el men del sitio:
#menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #000;
color: #fff;
padding: 10px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
display: inline-block;
margin-right: 10px;
}
#menu ul li a {
color: #fff;
text-decoration: none;
}
var scrollTop = document.documentElement.scrollTop