Código HTML y CSS para una barra de navegación con esquina redondeada

Escrito por sara williams | Traducido por analia moranchel
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Código HTML y CSS para una barra de navegación con esquina redondeada
Haz que tu barra de navegación sea fácil de usar y dale a cada enlace una visualización tipo "bloque". (Jupiterimages/Brand X Pictures/Getty Images)

El HTML proporciona la estructura para la información en páginas web. Según este principio, la mayoría de los desarrolladores web crean barras de navegación a partir de listas sin ordenar. Una de éstas crea una lista de bala por defecto en todos los navegadores web, pero puedes utilizar código de hojas de estilo en cascada (CSS, por sus siglas en inglés) más adelante para quitar balas y elementos de la lista de estilo según sea necesario.

Otras personas están leyendo

Lista desordenada

Aquí está el código para una lista desordenada básica que se convertirá en una barra de navegación:

<ul> <li><a href="algunapagina.html">Alguna página</a></li> <li><a href="otrapagina.html">Otra página</a></li> </ul>

Ten en cuenta que cada elemento de la lista, creada por la etiqueta "<ul>", se envuelve en un par de etiqueta de elemento de lista o "<li>". Puesto que los visitantes del sitio web necesitan hacer clic en los elementos de la lista, debes utilizar la etiqueta de anclaje para crear vínculos de cada elemento de la misma.

Quitar estilo por defecto

Antes de que puedas dar estilo a una lista no ordenada en una barra de navegación, debes quitar los estilos predeterminados. Si utilizas una hoja de estilos prefabricada, como la creada por Eric Meyers, puedes omitir este paso. Para quitar el estilo por defecto, necesitas establecer la propiedad "list-style" a "none" ("ninguna") para quitar las balas. Luego tendrás que eliminar el margen izquierdo y el relleno de la izquierda. El código CSS se ve así:

ul { list-style: none; margin-left: 0; padding-left: 0; }

Hacer la lista horizontal

Aunque algunos sitios web usan menús de barra lateral para la navegación, la orientación más común de la barra es horizontal y abarca la parte superior de la página web. Puedes hacer una lista desordenada horizontal estableciendo elementos de lista a "float: left" como sigue:

li { float: left; }

Enlaces de navegación

Dar a cada enlace a un tipo de presentación de "bloque" es la mejor manera de hacer que tu barra de navegación sea fácil de usar. Sin "display: block",("Mostrar: bloque"), no puedes agregar relleno a los enlaces que agregan espacio seleccionable alrededor de tu texto. El relleno también hace que la barra de navegación resalte con mayor facilidad. Este es un ejemplo de código CSS para enlaces en una barra de navegación:

li a { display: block; padding: 10px; background-color: #555555; color: #ffffff; text-decoration: none; } li a:hover { background-color: #333333; }

El código anterior añade 10 píxeles de relleno alrededor de cada enlace. Los enlaces tendrán un fondo de color gris medio y texto color blanco. Con "Text-decoration: none" ("Decoración de texto: ninguna") desactivarás el subrayado del enlace. Las reglas de estilo del selector "li a: hover" hacen que cuando el usuario desplaza el puntero del ratón sobre un enlace, el fondo se vuelve de un gris más oscuro.

Dar estilo a la barra en sí misma

Puedes darle a tu barra de navegación el estilo que quieras, con fondos, gradientes, sombras y esquinas redondeadas. Asegúrate de que tu estilo funcione en todos los navegadores, a menos que esté bien que en tu proyecto en particular permita que la barra se degrade con gracia. Por ejemplo, aquí hay un código para una barra con fondo negro y esquinas redondeadas:

ul { background: #000000; border-radius: 20px; }

La propiedad de "border-radius" no funciona en Internet Explorer 8 y anterior sin el uso de un polirelleno como "CSS3Pie". Una hoja de estilos separada envuelta en comentarios condicionales, junto con imágenes de esquina, también pueden crear una reserva para las esquinas redondeadas.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles