Cómo hacer una barra de navegación en html. Barra de navegación СSS

Menú horizontal es una lista de secciones del sitio, por lo que es más lógico marcarlo dentro del elemento

y luego aplicar estilos CSS a sus elementos. Esta disposición del menú es la más común debido a las obvias ventajas en su posicionamiento en una página web.

Cómo hacer un menú horizontal: ejemplos de marcado y diseño

Marcado HTML y estilos básicos para menús horizontales

De forma predeterminada, todos los elementos de la lista se colocan verticalmente, ocupando todo el ancho del elemento contenedor en ancho, que a su vez ocupa todo el ancho de su bloque contenedor.

Marcado HTML para navegación horizontal

• Opción del menú
• Opción del menú
• Opción del menú
...

Opcionalmente, se puede colocar un menú horizontal dentro de una etiqueta dentro de un elemento.

y / o
...
... Gracias a esto, se le da un significado semántico al marcado html, y también hay una oportunidad adicional para formatear el bloque de menú.

Hay varias formas de colocarlos. horizontalmente... Primero, debe restablecer los estilos de navegador predeterminados para los elementos de navegación:

Ul (estilo de lista: ninguno; / * eliminar marcadores de lista * / margen: 0; / * eliminar margen superior e inferior igual a 1em * / padding-left: 0; / * eliminar margen izquierdo igual a 40px * /) a ( text-decoration: none; / * eliminar el subrayado del texto del enlace * /)

Método 1.li (pantalla: en línea;)

Ponemos los elementos de la lista en minúsculas. Como resultado, se colocan horizontalmente, en el lado derecho entre ellos se agrega un espacio igual a 0.4em (calculado en relación con el tamaño de la fuente). Para eliminarlo, agregue un margen derecho negativo li (margin-right: -4px;) para li. A continuación, aplicaremos el estilo que queramos a los enlaces.

Método 2.li (flotación: izquierda;)

Flotando los elementos de la lista. Como resultado, se colocan horizontalmente. La altura del bloque de contenedores ul se vuelve cero. Para resolver este problema, agregamos (overflow: hidden;) al ul, expandiéndolo y permitiendo así que contenga elementos flotantes. Para los enlaces, agregue un (display: block;) y modifíquelos como desee.

Método 3.li (pantalla: bloque en línea;)

Hacemos los elementos de la lista inline-block. Están ubicados horizontalmente, se forma un espacio en el lado derecho, como en el primer caso. Para los enlaces, agregue un (display: block;) y modifíquelos como desee.

Método 4.ul (pantalla: flex;)

Haciendo del ul un recipiente flexible usando un modelo. Como resultado, los elementos de la lista se organizan horizontalmente. Agregue un (display: block;) para los enlaces y modifíquelos como desee.

1. Menú adaptable con un efecto de subrayado al pasar el cursor sobre un enlace.

• Trabaja
• Sobre
• Blog
• Contacto
@import url ("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main (list-style: none; margin: 40px 0 5px; padding: 25px 0 5px; text-align: center; background: white;) .menu-main li (display: inline-block;) .menu- main li: after (content: "|"; color: # 606060; display: inline-block; vertical-align: top;) .menu-main li: last-child: after (contenido: ninguno;) .menu-main a (decoración de texto: ninguna; familia de fuentes: "Ubuntu Condensed", sans-serif; espaciado entre letras: 2px; posición: relativa; fondo de relleno: 20px; margen: 0 34px 0 30px; tamaño de fuente: 17px; text-transform: mayúsculas; display: inline-block; transición: color .2s;) .menu-main a, .menu-main a: visitado (color: # 9d999d;) .menu-main a.current, .menu- main a: hover (color: # feb386;) .menu-main a: before, .menu-main a: after (content: ""; position: absolute; height: 4px; top: auto; right: 50%; bottom : -5px; izquierda: 50%; fondo: # feb386; transición: .8s;) .menu-main a: hover: before, .menu-main .current: before (left: 0;) .menu-main a: hover: after, .menu-main .current: after (derecha: 0; ) @media (max-width: 550px) (.menu-main (padding-top: 0;) .menu-main li (display: block;) .menu-main li: after (content: none;) .menu- principal a (relleno: 25px 0 20px; margen: 0 30px; ))

2. Menú adaptable para un sitio de bodas

@import url ("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu (posición: relativa; fondo: #fff; box-shadow: inset 0 0 10px #ccc;) .top-menu: before, .top-menu: after (content: ""; display: block; height : 1px; border-top: 3px solid # 575350; border-bottom: 1px solid # 575350; margin-bottom: 2px;) .top-menu: after (border-bottom: 3px solid # 575350; border-top: 1px solid # 575350; caja-sombra: 0 2px 7px #ccc; margin-top: 2px;) .menu-main (estilo de lista: ninguno; relleno: 0 30px; margen: 0; tamaño de fuente: 18px; alineación de texto: centro; posición: relativa;) .menu-main: before, .menu-main: after (content: "\ 25C8"; line-height: 1; position: absoluta; top: 50%; transform: translateY (-50% );) .menu-main: before (left: 15px;) .menu-main: after (right: 15px;) .menu-main li (display: inline-block; padding: 5px 0;) .menu-main a (decoración de texto: ninguna; pantalla: bloque en línea; margen: 2px 5px; relleno: 6px 15px; familia de fuentes: "PT Sans", sans-serif; tamaño de fuente: 16px; color: # 777777; borde inferior : 1px sólido transparente; transitio n: .3s lineal; ) .menu-main .current, .menu-main a: hover (border-radius: 3px; background: # f3ece1; color: # 313131; text-shadow: 0 1px 0 #fff; border-color: # c6c6c6;) @media (ancho máximo: 500px) (.menu-main li (pantalla: bloque;))

3. Menú adaptable con vieiras

• Trabaja
• Sobre
• Blog
• Contacto
@import url ("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main (estilo de lista: ninguno; relleno: 0 30px; margen: 0; tamaño de fuente: 18px; alineación de texto: centro; posición: relativa; fondo: blanco;) .menu-principal: después (contenido: ""; posición: absoluta; ancho: 100%; alto: 20px; izquierda: 0; fondo: -20px; fondo: radial-gradient (blanco 0%, blanco 70%, rgba (255,255,255,0) 70%, rgba ( 255,255,255,0) 100%) 0 -10px; tamaño de fondo: 20px 20px; repetición de fondo: repetición-x;) .menu-main li (display: inline-block;) .menu-main a (texto-decoración: none; display: inline-block; margin: 0 15px; padding: 10px 30px; font-family: "PT Sans Caption", sans-serif; color: # 777777; transición: .3s lineal; posición: relativa;) .menu -main a: before, .menu-main a: after (content: ""; position: absolute; top: calc (50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: # F58262; opacidad: 0; transición: .5s entrada-salida fácil;) .menu-main a: before (izquierda: 5px;) .menu-main a: after (derecha: 5px;) .menu-main a. actual: antes, .menu-main a.cur rent: after, .menu-main a: hover: before, .menu-main a: hover: after (opacidad: 1;) .menu-main a.current, .menu-main a: hover (color: # F58262; ) @media (ancho máximo: 680px) (.menu-main li (pantalla: bloque;))

4. Menú adaptable en la cinta

@import url ("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu (margen: 0 60px; posición: relativa; fondo: # 5A394E; cuadro-sombra: recuadro 1px 0 0 rgba (255,255,255, .1), recuadro -1px 0 0 rgba (255,255,255, .1), recuadro 150px 0 150px -150px rgba (255,255,255, .12), recuadro -150px 0 150px -150px rgba (255,255,255, .12);) .top-menu: before, .top-menu: after (content: ""; position: absolute ; z-index: 2; left: 0; width: 100%; height: 3px;) .top-menu: before (top: 0; border-bottom: 1px dashed rgba (255,255,255, .2);) .top- menu: after (bottom: 0; border-top: 1px rgba discontinuo (255,255,255, .2);) .menu-main (estilo de lista: ninguno; relleno: 0; margen: 0; alineación de texto: centro;). menu-main: before, .menu-main: after (content: ""; posición: absoluta; ancho: 50px; altura: 0; parte superior: 8px; borde superior: 18px sólido # 5A394E; borde inferior: 18px sólido # 5A394E; transform: rotate (360deg); z-index: -1;) .menu-main: before (left: -30px; border-left: 12px solid rgba (255, 255, 255, 0);) .menu- main: after (right: -30px; border-right: 12px solid rgba (2 55, 255, 255, 0); ) .menu-main li (display: inline-block; margin-right: -4px;) .menu-main a (text-decoration: none; display: inline-block; padding: 15px 30px; font-family: "PT Sans Caption ", sans-serif; color: blanco; transición: .3s lineal;) .menu-main a.current, .menu-main a: hover (background: rgba (0,0,0, .2);) @media (max-width: 680px) (.top-menu (margin: 0;) .menu-main li (display: block; margin-right: 0;) .menu-main: before, .menu-main: after (contenido: ninguno;) .menu-main a (pantalla: bloque;))

5. Menú adaptable con un logotipo en el medio

@import url ("https://fonts.googleapis.com/css?family=Arimo"); .top-menu (posición: relativa; fondo: rgba (34,34,34, .2);) .menu-main (estilo de lista: ninguno; margen: 0; relleno: 0;) .menu-main: después (contenido: ""; display: table; clear: both;) .left-item (float: left;) .right-item (float: right;) .navbar-logo (position: absoluta; left: 50%; top : 50%; transform: translate (-50%, - 50%);) .menu-main a (text-decoration: none; display: block; line-height: 80px; padding: 0 20px; font-size: 18px ; espaciado entre letras: 2px; familia de fuentes: "Arimo", sans-serif; peso de fuente: negrita; color: blanco; transición: .3s lineal;) .menu-main a: hover (background: rgba (0, 0,0, .3);) @media (ancho máximo: 830px) (.menu-main (padding-top: 90px; text-align: center;) .navbar-logo (posición: absoluta; izquierda: 50% ; top: 10px; transform: translateX (-50%);) .menu-main li (float: none; display: inline-block;) .menu-main a (line-height: normal; padding: 20px 15px; font -tamaño: 16px;)) @media (ancho máximo: 630px) (.menu-main li (display: block;))

6. Menú adaptable con logotipo a la izquierda

@import url ("https://fonts.googleapis.com/css?family=Arimo"); .top-menu (fondo: rgba (255,255,255, .5); box-shadow: 3px 0 7px rgba (0,0,0, .3); padding: 20px;) .top-menu: after (content: "" ; display: table; clear: both;) .navbar-logo (display: inline-block;) .menu-main (list-style: none; margin: 0; padding: 0; float: right;) .menu-main li (display: inline-block;) .menu-main a (text-decoration: none; display: block; position: related; line-height: 61px; padding-left: 20px; font-size: 18px; letter-spacing : 2px; font-family: "Arimo", sans-serif; font-weight: bold; color: # F73E24; transición: .3s linear;) .menu-main a: before (content: ""; ancho: 9px; altura: 9px; fondo: # F73E24; posición: absoluta; izquierda: 50%; transformar: rotar (45deg) translateX (6.5px); opacidad: 0; transición: .3s lineal;) .menu-main a: hover: before (opacidad: 1;) @media (max-width: 660px) (.menu-main (float: none; padding-top: 20px;) .top-menu (text-align: center; padding: 20px 0 0 0; ) .menu-main a (relleno: 0 10px;) .menu-main a: be fore (transform: rotate (45deg) translateX (-6px);)) @media (max-width: 600px) (.menu-main li (display: block;))

Para navegar cómodamente por el sitio, necesita la navegación, que hice usando scripts HTML y CSS. Como resultado de mi trabajo, puedes ver 2 tipos de menús (vertical y horizontal). Y ahora, intentaré contarte las tareas que, según me parece, debe realizar el menú del sitio:

• Facilidad de uso;
• Debe crearse la navegación a través de todas las secciones del sitio;
• Cada página del sitio debe tener una salida a la página principal;
• Vaya a cualquier página del sitio con un máximo de 3 clics.

Aquí intentaré resumir el material sobre la creación de un menú tanto como sea posible, prepárate, muchos pueden tener dificultades, al menos me han surgido. ¡Vamos a empezar!

En primer lugar, te diré cómo hacerlo. Primero, escribimos el script en la hoja de estilo:

# navegación (ancho: 560px; alto: 50px; margen: 0; relleno: 0; imagen de fondo: url (img / gor_menu.jpg); repetición de fondo: no-repetición; posición de fondo: centro;) # navegación ul (estilo de lista: ninguno; margen: 0; relleno: 0;) # navegación ul li (display: inline; margin: 0px;) #navigation ul li a (height: 28px; display: block; float: left; color: # 333333; decoración de texto: ninguna; familia de fuentes: Arial; tamaño de fuente: 12px; peso de fuente: negrita; imagen de fondo: url (img / menu_separatorline.jpg); repetición de fondo: no repetición; fondo- position: right center; padding-top: 17px; padding-right: 15px; padding-bottom: 0; padding-left: 15px;) # navegación ul li a: hover (color: #FFF; background-image: url (img /button_hover.jpg); background-repeat: repeat-x; background-position: left top;) #navigation ul li # active a (background-image: url (img / button_hover.jpg); background-repeat: repeat-x ; posición de fondo: arriba a la izquierda;)

No se alarme, no hay nada de malo en este código. Para que le quede más claro, escribiré inmediatamente el código HTML para este menú:

• hogar
• Sobre el sitio
• ¿Por qué necesita un sitio web?
• Del autor
• Contactos
• Foro

Como puede ver, estamos tratando con una lista, que no es nada bueno sin una hoja de estilo. El operador div llama a las variables de una hoja de estilo CSS externa, luego nuestra lista se transforma y se convierte en un bonito menú horizontal, en mi opinión.

• Introducción
• Creación de esqueletos de sitios web
• Creación del menú del sitio web
• Llenado del sitio
• Usando bloques PHP
• Creación de base de datos
• Selección de alojamiento
• Exportar sitio a hosting

Ahora necesita aclarar un poco qué se refiere a qué, luego creo que usted mismo lo resolverá:

...
- contiene toda la estructura del menú. La imagen superior, que preparé de antemano en Photoshop, se insertará en ella;



...
- el cuerpo del menú, contiene una lista desordenada. Se insertará una imagen en él, que se repetirá verticalmente y creará un fondo. Quizás elegí colores demasiado brillantes, pero en mi opinión, no lastiman los ojos;

- contiene el esqueleto del menú en sí;

• Creación del menú del sitio web
- esta es una de las posiciones en las que deberá insertar el enlace necesario en un href = "#";
- contiene la parte inferior.

Y este es en realidad el script en nuestra hoja de estilo CSS:

Div # menu (ancho: 144px; background: url (img / menu_1.jpg) top no-repeat; padding-top: 40px;) div # menubody (fondo: url (img / menu_2.jpg) repeat-y; padding- left: 15px;) div # menubottom (height: 16px; background: url (img / menu_4.jpg) bottom no-repeat;) ul # menulist (width: 100px; list-style-type: none;) ul # menulist li (altura: 32 px; fondo: url (img / menu_3.gif) repetición inferior-x;) ul # menulist a (ancho: 100 px; altura: 25 px; borde izquierdo: # 75c5de 10 px sólido; fuente: negrita 10 px Verdana, Arial , sans-serif; color: #ffffff; text-decoration: none; padding: 5px 0 0 5px; display: block! important; display: inline-block;) ul # menulist a: hover (background: url (img / menu_5 .jpg) left repeat-y; color: # 000) ul # menulist #active a (background: url (img / menu_5.jpg) left repeat-y;)

No creo que necesites explicar el código CSS. Si algo no está claro, siempre puede preguntar.

Ambos tipos de menús están listos. Tenga en cuenta que no usamos JavaScript en ellos, y esto es más bien un "más" cuando los motores de búsqueda indexan nuestro sitio, bueno, ciertamente no un "menos" porque los motores de búsqueda no indexan JavaScript. Aunque de momento el buscador de Google ya empieza a reconocerlo.

Probablemente ya hayas notado hace mucho tiempo que hay más de dos menús en el sitio y tienen una estructura diferente. El artículo, como el anterior, no lo edité.

Queda por llenar las páginas de nuestro sitio con contenido y podemos decir con seguridad que se ha hecho la mitad del trabajo, pero hablaré de esto en el próximo artículo.

En este tutorial, hablaremos sobre cómo crear un menú con transiciones usando pseudoelementos. : antes de y : después.

Aquí se puede ver un ejemplo de menú:

Descargar

Desafortunadamente, solo Mozilla admite transiciones de pseudoelementos.

Parte HTML

La estructura del menú es normal: una lista con viñetas y cada elemento de la lista tiene una clase efectos:

1 2 3 4 5 6 7

<ul> <li class = "efectos"> HOGAR</ a> <li class = "efectos"> SOBRE EL AUTOR</ a> <li class = "efectos"> PORTAFOLIO</ a> <li class = "efectos"> BLOG</ a> <li class = "efectos"> CONTACTOS</ a> </ ul>

Parte CSS

Primero, hagamos un menú horizontal a partir de esta lista:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

ul (estilo de lista: ninguno; padding-top: 50px;) li (posición: relativa; flotador: izquierda; ancho: 150px; alineación de texto: centro; padding-top: 35px; padding-bottom: 35px; color: # fff; margin-right: 20px; border-radius: 5px; background: # 161616; border-bottom: 1px solid # 333; border-left: 1px solid # 000; border-right: 1px solid # 333; border-top: 1px sólido # 000; cursor: puntero;)

Ahora agreguemos algunos efectos:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

.effects: after, .effects: before (-moz-transición: ancho 0.5s facilidad 0s; alto: 0px; ancho: 0px; posición: absoluta; contenido: ""; pantalla: bloque; opacidad: 0; sombra de cuadro: 0px 0px 5px # 00c6ff;) .efectos: after (background: -moz-linear-gradient (left, # 0ad, # 08b); top: 84px; left: 75px;) .effects: before (background: -moz-linear -gradient (derecha, # 0ad, # 08b); arriba: 84px; derecha: 75px;) .effects: hover: after, .effects: hover: before (width: 72px; height: 1px; opacity: 1;)

Producción

La lección resultó ser pequeña, pero creamos un menú muy bueno. El único inconveniente es que las transiciones solo funcionarán correctamente en el navegador Mozilla.

horizontal

Barras de navegación

Tener una navegación fácil de usar es esencial para cualquier sitio web.

Con CSS puedes convertir los aburridos menús HTML en bonitas barras de navegación.

Barra de navegación = Lista de enlaces

La barra de navegación necesita HTML estándar como base.

En nuestros ejemplos, crearemos una barra de navegación a partir de una lista HTML estándar.

La barra de navegación es básicamente una lista de enlaces, por lo que al usar

y
• elementos tiene sentido:

  ejemplo

  
  
  • Hogar
  
  
  • Noticias
  
  
  • Contacto
  
  
  • Sobre
  
  
  Inténtalo tú mismo "

  Ahora eliminemos las viñetas, los márgenes y el relleno de la lista:

  Explicación del ejemplo:

  • tipo de estilo de lista: ninguno; - Elimina balas. La barra de navegación no necesita una lista de viñetas
  • Margen establecido: 0; y acolchado: 0; para eliminar la configuración predeterminada del navegador

  El código del ejemplo anterior es el código estándar utilizado en las barras de navegación verticales y horizontales.

  Barra de navegación vertical

  Para crear una barra de navegación vertical, puede diseñar elementos dentro de la lista, además del código anterior:

  Explicación del ejemplo:

  • bloqueo de pantalla; - Mostrar enlaces como un bloque de elementos hace que se pueda hacer clic en toda el área del enlace (no solo en el texto) y esto nos permite especificar el ancho (y el relleno, margen, alto, etc. si lo desea)
  • ancho: 60px; - los elementos de bloque ocupan todo el ancho disponible por defecto. Queremos establecer el ancho en 60 píxeles.

  También puede establecer el ancho

  y quitar el ancho ya que ocuparán todo el ancho disponible cuando se muestren como elementos de bloque. Esto producirá el mismo resultado que en el ejemplo anterior:

  Ejemplos de barras de navegación vertical

  Cree una barra de navegación vertical básica con un color de fondo gris y cambie el color de fondo de los enlaces cuando el usuario mueva el cursor del mouse sobre ellos:

  ejemplo

  Ul (
  tipo de estilo de lista: ninguno;
  margen: 0;
  acolchado: 0;
  ancho: 200px;
  color de fondo: # f1f1f1;
  }

  li a
  bloqueo de pantalla;
  color: # 000;
  relleno: 8px 0 8px 16px;
  decoración de texto: ninguna;
  }

  / * Cambiar el color del enlace al pasar el mouse * /
  li a: flotar (
  color de fondo: # 555;
  color blanco;
  }

  Inténtalo tú mismo "

  Vínculos centrales y agregar bordes

  Agregar alineación de texto: centro para

  • o al centro del enlace.

    Agregar la propiedad de borde

    agregue un borde alrededor de la barra de navegación. Si también desea bordes dentro de la barra de navegación, agregue el borde inferior para todos
    • elementos, excepto el último:

      Barra de navegación vertical congelada de tamaño completo

      Crear navegación lateral "adhesiva" de altura completa:

      ejemplo

      Ul (
      tipo de estilo de lista: ninguno;
      margen: 0;
      acolchado: 0;
      ancho: 25%;
      color de fondo: # f1f1f1;
      altura: 100%; / * Altura completa * /
      posición: fija; / * Haz que se pegue, incluso en el desplazamiento * /
      desbordamiento: automático; / * Habilitar el desplazamiento si la navegación lateral tiene demasiado contenido * /
      }

      Inténtalo tú mismo "

      Nota: Es posible que este ejemplo no funcione como se esperaba en dispositivos móviles.

      Barra de navegación horizontal

      Hay dos formas de crear una barra de navegación horizontal. Uso incrustado o flotante elementos de la lista.

      Elementos de lista en línea

      Una forma de crear una barra de navegación horizontal para indicar

    • elementos como en línea, además del código "estándar" anterior:

      Explicación del ejemplo:

      • pantalla: en línea; - Defecto
      • los elementos son elementos de bloque. Aquí eliminamos los saltos de línea antes y después de cada elemento de la lista para mostrarlos en una sola línea.

      Elementos de lista flotante

      Otra forma de crear una barra de navegación horizontal para flotar

    • elementos, y también especifique el diseño de los enlaces de navegación:

      Explicación del ejemplo:

      • flotador izquierdo; - uso de punto flotante para hacer que un bloque de elementos se deslice uno al lado del otro
      • bloqueo de pantalla; - Mostrar enlaces como un bloque de elementos hace que se pueda hacer clic en toda el área del enlace (no solo en el texto) y esto nos permite especificar el relleno (y altura, ancho, márgenes, etc. si lo desea)
      • relleno: 8px; - Dado que los elementos de bloque ocupan todo el ancho disponible, no pueden flotar uno al lado del otro. Por lo tanto, indique alguna adición para que se vean bien.
      • color de fondo: #dddddd; - agregue color de fondo gris para cada elemento

      Consejo: agregar color de fondo para

      en lugar de cada uno elemento si desea color de fondo de ancho completo:

      Ejemplos de barra de navegación horizontal

      Cree una barra de navegación horizontal básica con un color de fondo oscuro y cambie el color de fondo de los enlaces cuando el usuario mueva el mouse sobre ellos:

      ejemplo

      Ul (
      tipo de estilo de lista: ninguno;
      margen: 0;
      acolchado: 0;
      desbordamiento: oculto;
      color de fondo: # 333;
      }

      li
      flotador izquierdo;
      }

      li a
      bloqueo de pantalla;
      color blanco;
      alineación de texto: centro;
      relleno: 14px 16px;
      decoración de texto: ninguna;
      }

      / * Cambia el color del enlace a # 111 (negro) al pasar el mouse * /
      li a: flotar (
      color de fondo: # 111;
      }

      Inténtalo tú mismo "

      Enlace de navegación activo / actual

      Agregue una clase "activa" al enlace actual para que el usuario pueda saber en qué página se encuentra:

      Haga clic derecho en la alineación del enlace

      En este tutorial, crearemos un sistema de navegación del sitio utilizando solo CSS3. La idea es organizar múltiples diapositivas o capas de contenido para que se muestren y oculten usando la pseudoclase: target. Con las transiciones CSS, puede crear excelentes efectos visuales para la apariencia de sus diapositivas. Además, nuestra navegación será receptiva.

      Nota: el resultado de este tutorial funciona completamente en navegadores que admiten CSS3.

      Marcado HTML

      Para cada diapositiva individual, que contendrá un conjunto de enlaces, información o una sub-diapositiva, cree un div con la clase cn-slide... Para las sub-diapositivas que contienen dos enlaces por línea, usaremos una clase diferente cn-slide-sub... La diapositiva de información simplemente tendrá una clase. cn-slide.

      En nuestro ejemplo, habrá una diapositiva principal que contiene tres sub-diapositivas. Cada sub-diapositiva contiene cuatro enlaces que apuntan a una diapositiva de información. Toda la estructura será una construcción de una diapositiva principal, tres sub-diapositivas y doce diapositivas con información:

      Descripción

      Filosofía

      atrás

      Epistemología

      atrás

      Texto...

      Mantenga presionada la tecla izquierda para ver el fondo

      Metafísica

      . . .

      Estética

      . . .

      Ética

      . . .
      . . .

      Las diapositivas secundarias y de información contienen enlaces a la capa anterior.

      CSS

      El contenedor principal tiene las propiedades min-width y max-width, que nos permiten usar porcentajes para establecer el ancho en condiciones ganathic, para que el elemento no se vuelva demasiado grande o pequeño:

      Cn-container (ancho: 60%; ancho mínimo: 300px; ancho máximo: 820px; margen: 10px auto 0 auto; alineación de texto: izquierda; posición: relativa;)

      El título principal estará absolutamente posicionado y mostrado usando efectos cuando la diapositiva "se abra". Las transiciones se establecen con un retraso para que el título aparezca después de la salida de los bloques de enlaces:

      Cn-container h2 (familia de fuentes: "PT Sans Narrow", "Arial Narrow", Arial, sans-serif; variante de fuente: versalitas; peso de fuente: 700; color: #fff; posición: absoluta; z -index: 1000; text-shadow: 0 0 1px rgba (255,255,255,0.8), 1px 1px 1px rgba (0,0,0,0.2); font-size: 80px; line-height: 80px; top: 0px; right : 200px; espacio en blanco: nowrap; opacidad: 0; -webkit-transición: todos los 0,3 s lineales 0,4 s; -moz-transición: todos los 0,3 s lineales 0,4 s; -o-transición: todos los 0,3 s lineales 0,4 s; - ms-transición: todos los 0,3 s lineales 0,4 s; transición: todos los 0,3 s lineales 0,4 s;) .cn-container .cn-slide: target h2 (derecha: 0px; opacidad: 1;)

      Las diapositivas también están absolutamente posicionadas. La opacidad inicial de las diapositivas se establece en 0. Se muestran solo cuando son el objetivo:

      Cn-slide (text-align: center; position: absolute; left: -100%; padding-top: 80px; margin: 0 5%; width: 90%; opacity: 0; -webkit-transition: izquierda 0.4s lineal , opacidad 0,4 s lineal; -moz-transición: izquierda 0,4 s lineal, opacidad 0,4 s lineal; -o-transición: izquierda 0,4 s lineal, opacidad 0,4 s lineal; -ms-transición: izquierda 0,4 s lineal, opacidad 0,4 s lineal ; transición: izquierda 0,4 s lineal, opacidad 0,4 s lineal;) .cn-slide: target (izquierda: 0px; opacidad: 1;)

      Eche un vistazo a los otros archivos de demostración. Utiliza otras secuencias de transiciones para crear efectos visuales.

      Ahora veamos los elementos del enlace. Tendrán una imagen de fondo, que luego se redefinirá para cada elemento. El archivo predeterminado es 1.jpg. Cuando pasa el cursor del mouse sobre el elemento, el color de la sombra del texto y el bloque en sí cambiarán:

      Cn-slide nav a (text-align: left; display: block; font-family: "PT Sans Narrow", "Arial Narrow", Arial, sans-serif; font-variant: small-caps; font-weight: 700 ; borde: 8px sólido #fff; relleno: 2%; tamaño de fuente: 66px; espaciado entre letras: 7px; sombra de texto: 0px 0px 10px rgba (255,255,255,0.9); color: rgba (255,255,255,0.1); línea- altura: 66px; margen: 0 0 10px 0; contorno: ninguno; caja-sombra: 1px 1px 3px rgba (0,0,0,0.1); fondo: #fff url (../ images / 1.jpg) no- repetir centro centro; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; background-clip: padding-box; - webkit-transición: todos los 0.3s de entrada y salida; -moz-transición: todos los 0.3s de fácil entrada y salida; -o-transición: todos los 0.3s de fácil entrada y salida; -ms-transición: todos los 0.3s de facilidad -in-out; transición: todos los 0.3s con facilidad de entrada y salida;) .cn-slide nav a: hover (box-shadow: 1px 3px 7px rgba (0,0,0,0.25); text-shadow: 1px 1px 1px rgba (0,0,0,0.1); color: rgba (255,255,255,0.9);)

      Cn-slide-sub nav a (ancho: 42%; pantalla: bloque en línea; tamaño de fuente: 40px;)

      Para crear un pequeño espacio entre los elementos, establezca el margen derecho para los descendientes impares:

      Cn-slide-sub nav a: nth-child (impar) (margen-derecho: 5px;)

      La diapositiva de información es el punto final de las transiciones:

      Cn-content (background: # 80B8CE url (../ images / 1.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; text-align: left; padding: 20px 20px 5px; box-shadow: 1px 1px 3px rgba (0,0,0,0.1); border: 8px solid #fff; margin-top: 5px ; cursor: puntero;)

      Cada área de contenido corresponde a un bloque de enlaces. La imagen de fondo se instalará más tarde:

      El párrafo también tendrá transiciones. Con la pseudo-clase: active permitimos al usuario mirar el fondo mientras mantiene presionado el botón izquierdo del mouse.

      Cn-content: active p (opacidad: 0;) .cn-content p (line-height: 24px; text-shadow: 1px 1px 1px rgba (255,255,255,0.9); color: rgba (103,59,77,0.9) ; padding: 15px 20px; margin-bottom: 10px; background: rgba (255,255,255,0.96); font-style: italic; border-top: 7px solid rgba (103,59,77,0.6); -webkit-transition: opacity 0.3s lineal; -moz-transición: opacidad 0.3s lineal; -o-transición: opacidad 0.3s lineal; -ms-transición: opacidad 0.3s lineal; transición: opacidad 0.3s lineal; -webkit-touch-callout: ninguno; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;)

      La flecha de retorno se desliza hacia la izquierda. Inicialmente tiene una posición de -100px, y cuando se activa la diapositiva, se desliza hacia una posición de 3px:

      Cn-back (contorno: ninguno; sangría de texto: -9000px; ancho: 49px; alto: 42px; fondo: url transparente (../ images / arrow.png) centro central sin repetición; posición: absoluta; parte superior: 22px ; izquierda: -100px; cursor: puntero; opacidad: 0; -webkit-transición: todos los 0.4s facilidad de entrada-salida 0.5s; -moz-transición: todos los 0.4s facilidad de entrada-salida 0.5s; -o-transición : todos los 0,4 segundos de entrada y salida 0,5 segundos; -ms-transición: todos los 0,4 segundos de entrada y salida fáciles de 0,5 segundos; transición: todos los 0,4 segundos de entrada y salida fáciles de 0,5 segundos;) .cn-slide: target .cn -back (izquierda: 3px; opacidad: 1;)

      Ahora definamos una imagen de fondo para cada elemento de enlace. Con un práctico selector de atributos, podemos especificar un elemento específico. Observamos el valor del atributo href y definimos la imagen:

      / * Highlights * / .cn-slide nav a (background-image: url (../ images / 1.jpg);) .cn-slide nav a (background-image: url (../ images / 2. jpg );) .cn-slide nav a (background-image: url (../ images / 3.jpg);) / * Cláusulas y subcláusulas para la diapositiva 1 * / .cn-slide nav a, # slide-1- 1 .cn-content (background-image: url (../ images / 4.jpg);) .cn-slide nav a, # slide-1-2 .cn-content (background-image: url (../ images / 5.jpg);) .cn-slide nav a, # slide-1-3 .cn-content (background-image: url (../ images / 6.jpg);) .cn-slide nav a, # slide-1-4 .cn-content (background-image: url (../ images / 7.jpg);) / * Cláusulas y subcláusulas para la diapositiva 2 * / .cn-slide nav a, # slide-2- 1 .cn-content (background-image: url (../ images / 8.jpg);) .cn-slide nav a, # slide-2-2 .cn-content (background-image: url (../ images / 9.jpg);) .cn-slide nav a, # slide-2-3 .cn-content (background-image: url (../ images / 10.jpg);) .cn-slide nav a, # slide-2-4 .cn-content (background-image: url (../ images / 11.jpg);) / * Cláusulas y subcláusulas para la diapositiva 3 * / .cn-s lide nav a, # slide-3-1 .cn-content (background-image: url (../ images / 12.jpg); ) .cn-slide nav a, # slide-3-2 .cn-content (background-image: url (../ images / 13.jpg);) .cn-slide nav a, # slide-3-3. cn-content (background-image: url (../ images / 14.jpg);) .cn-slide nav a, # slide-3-4 .cn-content (background-image: url (../ images / 15.jpg);)

      Finalmente, definimos algunas consultas de medios para dar forma a la plantilla en tamaños de pantalla pequeños. Es mejor identificar los puntos de interrupción de la plantilla y establecer reglas de cambio para ellos. En nuestro caso, hay dos puntos de este tipo: 1060 px y 900 px. Cambiemos el tamaño de la fuente, y en las sub-diapositivas usaremos solo un elemento por línea.

      @media screen y (max-width: 1060px) (.cn-slide-sub nav a (font-size: 28px;)) @media screen y (max-width: 900px) (.cn-container h2 (font-size : 48px; altura de línea: 95px;) .cn-slide nav a (tamaño de fuente: 38px;) .cn-slide-sub nav a (ancho: automático; tamaño de fuente: 36px; pantalla: bloque;) .cn -slide-sub nav a: nth-child (impar) (margen derecho: 0px;))