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

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.

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>

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; }

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

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

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

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

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:

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

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

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

ACTIVO CORRIENTE BARRA DE NAVEGACIÓN HORIZONTAL

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

DIVISORES DE FRONTERA BARRA DE NAVEGACIÓN HORIZONTAL