Ligne CSS

➤Barras de navegación horizontal

Tener una navegación fácil de usar es importante para cualquier sitio web. Ligne incluye algunas barras de navegación para hacerle la vida más cómoda.

Una barra de navegación sencilla seria como el siguiente ejemplo

                        

                        
                

Efecto hover

Puedes agregar la clase hover al elemento padre ul para lograr un efecto cuando el usuario pase el puntero sobre una opción

En este ejemplo hemos colocado un elemento a la derecha con la clase right aplicada sobre el elemento li que queremos ver en esta posición

                    

                    
                

Barra de navegación sticky

Esta clase hace que tu barra de navegación se pegue en la parte superior luego de que se desplace el scroll para crear una barra de navegación con alta presencia en tu página.

Some header

Scroll down to see the sticky effect on nav.

some header....

some text....

some text....

some text....

some text....

some text....

some text....

some text....

some text....

Barra de navegación gris

Es posible cambiar el color junto a los efectos hover con solo especificarlo con la clase grey

                        

Otras opciones y utilitario

A continuación puedes ver las clases disponibles que puedes aplicar

Clases elemento padre ul

  • fixed Hace que la barra de navegación permanezca en la parte superior o inferior de la página, incluso cuando se desplaza la página
  • top Hace que la barra de navegación se pegue en la parte superior de la pagina (Se utiliza junto a la clase fixed)
  • bottom Hace que la barra de navegación se pegue en la parte inferior de la pagina (Se utiliza junto a la clase fixed)

Clases elemento hijos li

  • right Envia un elemento a la derecha de la barra de navegación

Clases elemento hijos a

  • active Coloca un borde en la parte inferior al elemento a con esta clase
  • logo Evita que se apliquen ciertos efectos sobre el elemento con la clase logo, por ejemplo el efecto de cambio de fondo al hacer hover sobre el elemento con la clase logo

➤Barra de navegación vertical

Barra de navegación vertical normal

En ocasiones queremos crear menus sencillos de manera vertical, para estas situaciones contamos con algunas clases que hacen este trabajo mas fácil

                                    
    
                                    
                                

Existen algunas clases para tener una navegación con efecto hover y otras dos clase dark y light para el color de la navegación

                                    
    

Barra de navegación vertical pagina completa

En ocasiones tambien queremos tener una barra de navegacion vertical que este simepre presente en la pagina, esto lo podemos hacer con solo agregar la clase full al elemento padre ul

Ver ejemplo
                                

Otras opciones y utilitario

Las siguientes clases se pueden aplicar al elemento padre ul

  • bordered Crea bordes al rededor de todo el menu de navegación
  • round-borders Redondea los 4 bordes del contenedor principal