Cómo crear una navegación con pestañas con CSS y sin imágenes

La navegación en las páginas web es una forma de una lista, y la navegación con pestañas es como una lista horizontal. Es bastante fácil crear una navegación de pestañas horizontal con CSS, pero CSS 3 nos brinda algunas herramientas más para que se vean aún más agradables.

Este tutorial lo llevará a través del HTML y CSS necesarios para crear un menú de pestañas CSS. Haga clic en ese enlace para ver cómo se verá.

Este menú con pestañas utilizaSin imágenes, solo HTML y CSS 2 y CSS 3. Se puede editar fácilmente para agregar más pestañas o cambiar el texto en ellas.

Soporte del navegador

Este menú de pestañas funcionará entodos los principales navegadores. Internet Explorer no mostrará las esquinas redondeadas, pero de lo contrario, mostrará pestañas como Firefox, Safari, Opera y Chrome.

Escriba su lista del menú

Todos los menús y pestañas de navegación son en realidad solo una lista desordenada. Por lo tanto, lo primero que debe hacer es escribir una lista desordenada de enlaces a donde desea que vaya su navegación con pestañas.

Este tutorial asume que estás escribiendo tu HTML en un editor de texto y que sabes dónde colocar el HTML para tu menú en tu página web.

Escribe tu lista desordenada como esta:

• class = "tablist">
  • CSS 3
  • id = "actual"> Tabs
  • por
  • Menús
  Notarás que el código dice dos cosas: class = "tablist" y id = "actual". El primero es necesario. Si no pones el tablista clase en su lista desordenada, las pestañas no funcionarán. El segundo es opcional. Pon el id = "actual" en la pestaña que quieras resaltar en esa página. Normalmente usamos esto para resaltar la página en la que estamos, pero puede usarlo para resaltar la pestaña más importante. O puedes eliminarlo por completo.

Comience a editar su hoja de estilo

Puede utilizar una hoja de estilo externa o una hoja de estilo interna. La página del menú de muestra utiliza una hoja de estilo interna en el del documento.

Primero vamos a diseñar el UL en sí mismo

Aquí es donde usamos la clase.tablista .en el HTML. En lugar de diseñar la etiqueta UL, que aplicaría un estilo a todas las listas desordenadas de su página, debe diseñar solo la clase UL.tablista Así que la primera entrada en tu CSS debería ser:

.tablist {}

Nos gusta poner el corchete final (}) antes de tiempo, para que no lo olvidemos más tarde.

Mientras estamos usando una etiqueta de lista desordenada para la lista del menú de pestañas, pero no queremos que aparezcan balas o números. Por lo tanto, el primer estilo que debe agregar es.estilo de lista: ninguno; Esto le dice al navegador que, si bien es una lista, es una lista sin estilos predeterminados (como viñetas o números).

Luego, puede establecer la altura de su lista para que coincida con el espacio que desea que se llene. Elegimos 2em para nuestra altura, ya que es el doble del tamaño de fuente estándar, y da aproximadamente la mitad de un em por encima y por debajo del texto de la pestaña. Al aire librealtura: 2em; Pero puedes establecer tu ancho al tamaño que quieras. Las etiquetas UL ocuparán automáticamente el 100% del ancho, por lo que, a menos que desee que sea más pequeño que el contenedor actual, puede dejar el ancho fuera.

Finalmente, si su hoja de estilo maestra no tiene ajustes preestablecidos para las etiquetas UL y OL, querrá ponerlas. Esto significa que debe desactivar los bordes, márgenes y relleno de su UL. relleno: 0; margen: 0; frontera: ninguna; Si ya ha restablecido la etiqueta UL, puede cambiar los márgenes, el relleno o el borde a algo que se ajuste a su diseño.

Tu última clase de .tablist debería verse así:

.tablist {estilo de lista: ninguno; altura: 2em; relleno: 0; margen: 0; frontera: ninguna; }

Edición de los elementos de la lista de LI

Una vez que haya diseñado su lista desordenada, debe diseñar las etiquetas LI en su interior. De lo contrario, actuarán como una lista estándar y cada uno se moverá a la siguiente línea sin colocar las pestañas correctamente.

Primero, configura tu propiedad de estilo:

.tablist li {}

Entonces quieres flotar tus pestañas para que se alineen en el plano horizontal. flotador izquierdo;

Y no te olvides de agregar un margen entre las pestañas, para que no se fusionen. margen derecho: 0.13em;

Tus estilos de li deberían verse así:

.tablist li {float: left; margen derecho: 0.13em; }

Hacer que las pestañas se vean como pestañas con CSS 3

Para hacer la mayor parte del trabajo pesado en esta hoja de estilo, nos dirigimos a los enlaces dentro de la lista desordenada. Los navegadores reconocen que los enlaces hacen más en una página web que otras etiquetas, por lo que es más fácil hacer que los navegadores más antiguos cumplan con cosas como los estados de hover si los adjunta a la etiqueta de ancla (enlaces). Así que primero escribe tus propiedades de estilo:

.tablist li a {} .tablist li a: hover {}

Debido a que estas pestañas deben actuar como pestañas en una aplicación, desea que se pueda hacer clic en toda el área de la pestaña, no solo en el texto vinculado. Para hacer esto, debe convertir la etiqueta A de su estado normal "en línea" en un elemento de bloque. bloqueo de pantalla; (Si está interesado en saber más sobre la diferencia, lea Elementos a nivel de bloque vs. Elementos en línea).

Entonces, una forma fácil de forzar a sus pestañas a ser simétricas entre sí, pero aún así flexionar para que se ajuste al ancho del texto es hacer que el relleno a la derecha y la izquierda sea el mismo. Usamos la propiedad abreviada de relleno para establecer la parte superior e inferior en 0 y la derecha y la izquierda en 1em. relleno: 0 1em;

También optamos por eliminar los subrayados de los enlaces, para que las pestañas se parezcan menos a los enlaces.Pero si su audiencia podría confundirse con eso, deje de lado esta línea. Enlace de decoración: ninguno;

Al colocar un borde delgado alrededor de las pestañas, las hace parecer pestañas. Utilizamos la propiedad de la taquigrafía de la frontera para colocar la frontera alrededor de los cuatro lados borde: 0.06em sólido # 000; Y luego usó la propiedad de borde inferior para eliminarlo de la parte inferior. borde inferior: 0;

Luego hicimos algunos ajustes en la fuente, el color y el color de fondo de las pestañas. Establezca estos en los estilos que coinciden con su sitio. fuente: negrita 0.88em / 2em arial, ginebra, helvética, sans-serif; color: # 000; color de fondo: #ccc;

Todos los estilos anteriores deben ir en el selector..tablist li a, la regla para que afecten a las etiquetas de anclaje en general. Luego, para que las pestañas se vean más fáciles de hacer clic, debe agregar algunas reglas de estado.tablist li a: hover.

Nos gusta cambiar el color del texto y el fondo para hacer que la pestaña se abra al pasar el mouse por encima. fondo: # 3cf; color: #fff;

E incluimos otro recordatorio para los navegadores de que queremos que el enlace permanezca sin subrayar. texto-decoración: ninguno; Otro método común es volver a poner el subrayado cuando pasas el mouse sobre la pestaña. Si quieres hacer eso, cámbiate a texto-decoración: subrayado;

Pero, ¿dónde está el CSS 3?

Si ha prestado atención, es probable que haya notado que no se ha utilizado ningún estilo CSS 3 en la hoja de estilo. Esto tiene la ventaja de trabajar en cualquier navegador moderno, incluido Internet Explorer. Pero no hace que las pestañas parezcan más que cajas cuadradas. Al agregar un radio de borde de llamada al estilo CSS 3 (y sus llamadas asociadas al navegador) puede redondear los bordes para que se parezcan más a pestañas en una carpeta de manila.

Los estilos que debes agregar a la .tablist li a regla son: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; borde superior-derecho-radio: 0.50em; borde superior izquierdo del radio: 0.50em;

Estas son las reglas finales de estilo que escribimos:

.tablist li a {display: block; relleno: 0 1em; texto-decoración: ninguno; borde: 0.06em sólido # 000; borde inferior: 0; fuente: negrita 0.88em / 2em arial, ginebra, helvética, sans-serif; color: # 000; color de fondo: #ccc; / * Elementos de CSS 3 * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; borde superior-derecho-radio: 0.50em; borde superior izquierdo del radio: 0.50em; } .tablist li a: hover {background: # 3cf; color: #fff; texto-decoración: ninguno; }

Con estos estilos, tiene un menú con pestañas que funciona en todos los navegadores principales y se ve como bonitas pestañas impresas en los navegadores compatibles con CSS 3. La siguiente página te da una opción más que puedes usar para vestirte aún más.

Resalte la pestaña actual

En el HTML que creamos, el UL tenía un elemento de lista con un ID. Esto le permite darle a un LI un estilo diferente del resto. La situación más común es hacer que la pestaña actual se destaque de alguna manera. Otra forma de pensar en esto es que desea atenuar las pestañas que no están activas. A continuación, cambia donde está el ID en las diferentes páginas.

Diseñamos tanto la etiqueta #current A como la etiqueta #current A: hover sta para que ambas sean ligeramente diferentes. Puede cambiar el color, el color de fondo, incluso la altura, el ancho y el relleno de ese elemento. Haz que cualquier cambio tenga sentido en tu diseño.

.tablist li # current a {background-color: # 777; color: #fff; } .tablist li # current a: hover {background: # 39C; }

¡Y tu estas listo! Acaba de crear un menú con pestañas para su sitio web.