Es fácil. Lo han hecho usando consultas de medios .
En primer lugar, tiene una barra de navegación con un ancho del 100%.
En esta barra de navegación, hay 4 componentes principales.
- Cómo mostrar el modal Bootstrap en CodeIgniter y Ajax
- ¿Cómo es usar el framework Laravel para un proyecto de sitio de redes sociales?
- ¿Qué puedo hacer para mejorar mi sitio web?
- ¿Qué proveedor de alojamiento web tiene el mejor servicio al cliente para servidores compartidos?
- ¿Está mal visto usar Bootstrap para todos mis proyectos en mi cartera de desarrollo web front-end?
- El logotipo de la empresa y la marca. (Esto es visible tanto en móviles como en escritorios).
- El botón de menú, que abre el menú. (Este botón no se muestra en las pantallas de escritorio, solo se puede ver en pantallas más pequeñas, como móviles y tabletas).
- El menú oculto, que se abre al hacer clic en el botón de menú (este menú siempre está oculto, pero se muestra cuando el usuario hace clic en el botón).
- Y el último, los enlaces que normalmente se muestran en la navegación. (Estos enlaces son visibles en las pantallas del escritorio, mientras que están ocultos en los dispositivos móviles).
Ahora, entendamos cómo funciona esto.
Supongamos que tenemos nuestro menú con la clase .menuBtn.
Luego, agregamos la consulta de medios al CSS como tal
.menuBtn {
pantalla: ninguno;
}
@media (ancho máximo: 768px) {
.menuBtn {
pantalla: bloque en línea;
}
}
/ * Debido a esta consulta de medios, .menuBtn solo es visible en pantallas con un ancho inferior a 768 px * /
Lo mismo se hace con enlaces, pero solo inversa.
Supongamos que nuestros enlaces se han escrito en un
Entonces, la consulta de medios será la siguiente
.links {
pantalla: bloque en línea;
}
@media (ancho máximo: 768px) {
.links {
pantalla: ninguno;
}
}
/ * Debido a esta consulta de medios, el .links es visible solo en pantallas que tienen un ancho de más de 768 px * /
Por lo tanto, de esta manera puede crear esa barra de navegación.
Asegúrese de agregar el menú oculto, después de que se hayan agregado los otros tres componentes.
La lista de menú oculta tendría css como
.menuHidden {
pantalla: ninguno;
}
Y, sería abierto por jQuery.
Espero que funcione.
Saludos,
Amey!
