BARRAS DE NAVEGACIÓN HTML Y CSS

Presentación del tema: "BARRAS DE NAVEGACIÓN HTML Y CSS"— Transcripción de la presentación:

1 BARRAS DE NAVEGACIÓN HTML Y CSS
GRADO: 9° Y 10°

2 BARRAS DE NAVEGACIÓN En cualquier sitio Web las barras de navegación son objetos indispensables que facilitan la navegación al usuario. Sin embargo debido al gran auge de dispositivos tecnológicos se requieren que estas sean versátiles y se adapten a cualquiera de estos. En los sitios Web Podemos encontrar barras de forma horizontal o barras de forma vertical.

3 COMO HACERLAS EN HTML Para ello hacemos uso de la etiqueta <nav></nav> y junto con ella se requiere el uso de las etiquetas <ul></ul> <li></li> que sirven para crear listas y adicionalmente la etiqueta <a></a>, ya que una barra de navegación es básicamente una lista de enlaces. Ejemplo: <nav> <ul> <li><a href="default.html">Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li> </ul> </nav>

4 ATRIBUTOS EN CSS Para quitar las viñetas y los márgenes y el relleno de la lista ul { list-style-type: none; margin: 0; padding: 0; }

5 BARRA DE NAVEGACIÓN VERTICAL
Para ello utilizamos los siguientes selectores y atributos: Display: block; - Viendo los enlaces como elementos de bloque hace que toda la zona se puede hacer clic enlace (no sólo el texto), y que nos permite especificar el width (y padding, margin, height , etc. si quieres) Width: 60px; - Los elementos de bloque ocupan todo el ancho disponible de forma predeterminada. Queremos especificar un ancho de 60 píxeles

6 Ejemplo: li a { display: block; width: 60px; }

7 EVENTOS EN LAS BARRAS DE NAVEGACIÓN
Para crear eventos en las barras de navegación se debe utilizar: :hover Esto hace que cuando el usuario posicione el punto del mouse sobre alguna opción de la barra de navegación se ejecute o se muestre algún tipo de efecto. En el siguiente ejemplo se crea una barra de navegación vertical básico con un color de fondo gris y cambiar el color de fondo de los enlaces cuando el usuario mueve el ratón sobre ellos

8

9 Activo / Corriente Enlace de Navegación
Este atributo permite al usuario darse cuenta en que opción del menú se encuentra navegando actualmente, resaltando con algún tipo de efecto a este. Ejemplo: En este momento el usuario se encuentra navegando en el menú Casa

10 Centro de Enlaces y Agregar bordes
Añadir text-align:center a <li> o <a> para centrar los enlaces. Añadir la border propiedad a <ul> añadir un borde alrededor de la barra de navegación. Si usted también quiere fronteras dentro de la barra de navegación, añadir un border-bottom a todos los <li> elementos, a excepción de la última:

11 BARRA DE NAVEGACIÓN HORIZONTAL
Hay dos maneras de crear una barra de navegación horizontal. El uso de elementos de la lista en línea o flotante. Display: inline; - Por defecto, <li> elementos son elementos de bloque. A continuación, se elimina los saltos de línea antes y después de cada elemento de la lista, para mostrarlos en una sola línea

12 Flotante elementos de lista: otra forma de crear una barra de navegación horizontal es flotar los <li> elementos, y especificar un diseño para el menú de navegación

13 float: left; - utilización de flotación para obtener elementos de bloque para deslizar uno junto al otro display: block; - Viendo los enlaces como elementos de bloque hace que toda la zona se puede hacer clic enlace (no sólo el texto), y que nos permite especificar el relleno (y height, width, margins , etc. si quieres) padding: 8px; - Dado que los elementos de bloque ocupan todo el ancho disponible, no pueden flotar junto a la otra. Por lo tanto, especifique algo de relleno para que se vean bien background-color: #dddddd; - Añadir un fondo gris-color a cada elemento

14

15 ACTIVO CORRIENTE BARRA DE NAVEGACIÓN HORIZONTAL

16 Enlaces de alineación derecha Barra de Navegación Horizontal

17 DIVISORES DE FRONTERA BARRA DE NAVEGACIÓN HORIZONTAL

18