01 de 06
Como crear navegación con pestañas con CSS e sen imaxes
A navegación nas páxinas web é unha forma de lista e a navegación por pestañas é como unha lista horizontal. É bastante sinxelo crear navegación con pestañas horizontais con CSS, pero CSS 3 dános algunhas máis ferramentas para facelas aínda mellores.
Este tutorial leva-lo a través do HTML e CSS necesarios para crear un menú con pestañas CSS. Fai clic nesa ligazón para ver como se verá.
Este menú separador non usa imaxes , só HTML e CSS 2 e CSS 3. É posible editar facilmente para engadir máis páxinas ou cambiar o texto nelas.
Apoio ao navegador
Este menú de páxinas funcionará en todos os navegadores principais . O explorador de Internet non mostrará os recunchos redondeados, pero doutro xeito mostrará pestanas coma Firefox, Safari, Opera e Chrome.
02 de 06
Escribe a túa lista de menús
Todos os menús de navegación e pestanas son realmente só unha lista desordenada. Entón, o primeiro que queres facer é escribir unha lista descoñecida de ligazóns a onde queres que vaia a túa navegación por pestanas.
Este tutorial suponse que está escribindo o seu HTML nun editor de texto e que sabe onde colocar o HTML para o seu menú na súa páxina web.
Escribe a túa lista desordenada como esta:
- class = "tablist">
- CSS 3
- id = "actual"> Cifras
- Por
- Menús
Notarás que o código chama dúas cousas: class = "tablist" e id = "actual". O primeiro é necesario . Se non coloca a clase de tabulación na súa lista desordenada, as pestañas non funcionarán. O segundo é opcional. Pon o id = "actual" en calquera que desexe destacar na páxina. Normalmente uso isto para destacar a páxina en que estou, pero pode usalo para destacar a pestana máis importante. Ou pode eliminar completamente.
03 de 06
Comezar a editar a folla de estilo
Podes usar unha folla de estilo externa ou unha folla de estilo interna . A páxina de menú de mostra usa unha folla de estilo interna no
Primeiro imos estilo a propia UL
Aquí é onde usamos a lista de clases. No HTML. En vez de estilizar a etiqueta UL, que estilo de todas as listas desordenadas na súa páxina, debe estilo só a clase UL. tablist Así que a primeira entrada no teu CSS debería ser:
.tablist {}Gústame poñer a punta bracket (}) antes de tempo, así que non o esquecer máis tarde.
Mentres estamos a usar unha etiqueta de lista desordenada para a lista de menús de tabulacións, pero non queremos que ningunha balas ou números se arrastren. Polo tanto, o primeiro estilo que debes engadir é. estilo de lista: ningún; Isto di ao navegador que, aínda que sexa unha lista, é unha lista sen estilos predefinidos (como balas ou números).
Entón, pode configurar a altura da súa lista para que coincida co espazo que quere que enche. Elixín 2em para a miña altura, xa que é o dobre do tamaño do tipo de letra estándar e dá preto de metade de em superior e inferior ao texto da pestana. altura: 2em; Pero podes configurar o ancho en calquera tamaño que queiras. As etiquetas UL recollerán automaticamente o 100% do ancho, polo que, a menos que queiras que sexa máis pequeno que o contenedor actual, podes deixar o ancho.
Finalmente, se a súa folla de estilo mestre non ten valores predefinidos para as etiquetas UL e OL, vai querer poñelos dentro. Isto significa que debe desactivar os bordos, as marxes e os rellenos na súa UL. padding: 0; marxe: 0; fronteira: ningún; Se xa ten restablecido a etiqueta UL, pode cambiar as marxes, o recheo ou o bordo a algo que se axuste ao seu deseño.
A túa clase definitiva .tablist debería ser así:
.tabist {list-style: none; altura: 2em; padding: 0; marxe: 0; fronteira: ningún; }04 de 06
Edición dos elementos da lista LI
Despois de ter estilizado a súa lista desordenada, necesitará etiquetar as etiquetas LI dentro. Se non, actúan como unha lista estándar e cada movemento á seguinte liña sen poñer as túas pestanas correctamente.
En primeiro lugar, configure a propiedade do teu estilo:
.tablist li {}Entón desexa flotar as pestanas para que se alineen no plano horizontal. flotar: esquerda;
E non te esquezas de engadir algunha marxe entre as pestanas, para que non se fusionen. marxe dereita: 0.13em;
Os teus estilos deben estar así:
.tablist li {float: left; marxe dereita: 0.13em; }05 de 06
Facendo que as pestanas parecen con pestanas con CSS 3
Para facer a maior parte do levantamento pesado nesta folla de estilo, estarei orientando as ligazóns dentro da lista desordenada. Os navegadores recoñecen que as ligazóns fan máis nunha páxina web que outras etiquetas, polo que é máis doado facer que os navegadores máis antigos cumpran cousas como os estados de desprazamento se os achega á etiqueta de ancoraxe (ligazóns). Entón primeiro escribe as propiedades do teu estilo:
.tablist li a {} .tablist li a: hover {}Debido a que estas lapelas deben actuar como pestanas nunha aplicación, quere que se faga clic na área completa da pestana, non só o texto ligado. Para iso, tes que converter a etiqueta A desde o seu estado normal " en liña " nun elemento de bloque . mostrar: bloque; (Se está interesado en saber máis sobre a diferenza, lea os Elementos de nivel de Bloqueo vs. Inline ).
A continuación, un xeito doado de forzar as súas fichas a ser simétricas entre si, pero aínda flexibles para axustarse ao ancho do texto é facer o recheo dereito e esquerdo igual. Eu usei a propiedade de taquigrafía de recheo para establecer a parte superior e inferior de 0 e da dereita e esquerda para 1em. padding: 0 1em;
Tamén escollín eliminar as ligazóns subliñadas, de xeito que as pestanas parecen menos enlaces. Pero se a túa audiencia pode estar confundida por iso, deixe esa liña. ligazón-decoración: ningún;
Ao poñer un borde delgado nas lapelas, fainos coma pestañas. Eu usei a propiedade de taquigrafía do borde para poñer o bordo en todos os bordes dos catro lados: 0.06em sólidos n. º 000; E entón usou a propiedade de borde inferior para eliminarla da parte inferior. límite inferior: 0;
Entón fixen algúns axustes para a fonte, cor e cor de fondo das pestanas. Configúdaos nos estilos que coinciden co teu sitio. fonte: negrita 0.88em / 2em arial, xeneva, helvética, sans-serif; cor: # 000; cor de fondo: #ccc;
Todos os estilos anteriores deben entrar no selector .tablist li a, a regra para que afecten as etiquetas de ancoraxe en xeral. A continuación, para facer que as páxinas aparecen máis clickables, debes engadir algunha regra de estado .tablist li a: pasar.
Gústame cambiar a cor do texto e o fondo para facer que a pestana apareza ao pasar o rato sobre ela. fondo: # 3cf; cor: #fff;
E eu incluíu outro recordatorio para os navegadores que quero que a ligazón permaneza non subliñado. text-decoration: ningunha; Outro método común é activar o subliñado de novo cando fas rato sobre a pestana. Se queres facelo, cambialo á decoración de texto: subliñado;
Pero onde está o CSS 3?
Se estivo a prestar atención, probablemente xa notou que non se utilizaron os estilos CSS 3 na folla de estilo. Isto ten a vantaxe de traballar en calquera navegador moderno, incluíndo Internet Explorer. Pero non fai que as pestanas se vexan máis que caixas cadradas. Ao engadir un radio de borde chamado estilo CSS 3 (e as súas chamadas específicas para o navegador asociado) pode facer que os bordos estean redondeados, para que se vexan máis as lapelas nunha carpeta manila.
Os estilos que debes engadir á ruleta .tablist que son: -webkit-border-top-right-radius: 0.50em; -webkit-border-radio superior esquerdo: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; límite superior-dereito-radio: 0.50em; radio superior esquerdo-frontal: 0.50em;
Estas son as regras de estilo final que escribín:
.tablist li a {display: block; padding: 0 1em; text-decoration: ningunha; bordo: 0.06em sólido n. º 000; límite inferior: 0; fonte: negrita 0.88em / 2em arial, xeneva, helvética, sans-serif; cor: # 000; cor de fondo: #ccc; / * Elementos CSS 3 * / webkit-border-top-right-radius: 0.50em; -webkit-border-radio superior esquerdo: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; límite superior-dereito-radio: 0.50em; radio superior esquerdo-frontal: 0.50em; } .tablist li a: hover {background: # 3cf; cor: #fff; text-decoration: ningunha; }Con estes estilos, tes un menú con pestañas que funciona en todos os navegadores principais e parece boas páxinas impresas en navegadores compatibles con CSS 3. A seguinte páxina ofrécelle unha opción máis que podes usar para vestirse aínda máis.
06 de 06
Destaque a ficha actual
No HTML que creo, o UL tiña un elemento de lista cunha ID. Isto permítelle darlle un estilo diferente ao resto. A situación máis común é facer que a pestana actual se destaque dalgunha forma. Outra forma de pensar nisto é que queres eliminar as pestanas que non están en directo. A continuación, cambia onde está a id nas páxinas diferentes.
Eu estilo tanto a etiqueta #current A como o #actual A: hover sta para que ambos sexan un pouco diferentes. Pode cambiar a cor, a cor de fondo, mesmo o alto, o ancho eo recheo dese elemento. Fai que os cambios teñan sentido no teu deseño.
.tablist li # current a {background-color: # 777; cor: #fff; } .tablist li # actual a: hover {background: # 39C; }E estás listo! Acabas de crear un menú con pestañas para o teu sitio web.