Test de CSS: elementos de navegación
En este ejemplo se prueban los estilos para el menú principal y el migas, que se encuentran en el fichero base.css. Existen también reglas en el fichero phone.css para hacer que sean "algo" adaptables, prueba a visualizarlo en modo teléfono.
Menú
Para hacer el menú principal, usamos la clase menu
en un elemento de tipo menu
.
Migas
Para hacer el "migas", usamos un elemento nav
de clase breadcrumbs
.
La lista con los enlaces se encuentra dentro del elemento nav
.
Este migas de ejemplo tiene las clases: breadcrumbs
y dashed-border
.
La creación del "migas" se puede automatizar, usando el método breadCrumbs()
del objeto
$template
que tendremos disponible en todas las vistas. Este método recibe
un array asociativo con pares de textoEnlace => url. Para más información
consultad la documentación del método.
Si no queremos mostrar el "migas" en pantallas pequeñas, podemos añadirle la clase pc
.
Los elementos de clase pc
no se muestran en pantallas de teléfono.
Mapa web
El mapa web simplemente es un elemento de navegación con clase web-map
.
En su interior podemos colocar listas, con o sin sublistas, en columnas.
Podemos automatizar la creación del mapa web usando el método map()
del objeto $template
, disponible en todas las vistas. Para más información
consultad la documentación del método.