LogIn
FastLight Logo

Ejemplo de navigation en FastLight Framework

  • Inicio
  • Ejemplos de maquetación
  • GitHub
  • 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.

  • Enlace 1
  • Enlace 2
  • Enlace 3
  • Enlace 4
  • Enlace 5
  • 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.

    Fin del ejemplo navigation

    Lista de ejemplos.

    FastLight Framework, versión 1.8.3