Codificación de un menú de navegación de migas de pan agraciado en CSS3
Los menús de navegación y los enlaces son posiblemente los elementos de interfaz más importantes para un diseño web. Estos son los únicos puntos de venta para los usuarios viajar entre páginas e interactuar con todo el contenido que hayas creado. Breadcrumb ofrece una funcionalidad similar con el beneficio agregado de seguimiento de su posición actual. Usted será capaz de Mostrar todas las rutas de enlace anteriores como el usuario atraviesa la jerarquía de su sitio.
En este tutorial, crearemos un menú de navegación de ruta de navegación brillante con algunos efectos CSS3. Se ha probado que esto funciona en todos los principales navegadores compatibles con CSS3, incluso los navegadores más antiguos que no son compatibles con CSS3 todavía lo mostrarán correctamente en la mayoría de los casos.
Antes de profundizar en el código, hablaremos un poco acerca de la funcionalidad de nuestra ruta de exploración, un tutorial completo en un salto.!
Ofreciendo el sendero
Un sendero de migas no es más complejo que cualquier otro menú. Nuestros estilos utilizarán propiedades de CSS mucho más complejas que la mayoría de los ejemplos, sin embargo, nuestra plantilla básica sigue en pie para guiar a los usuarios de una página a otra..
En este ejemplo, volveremos a crear un estilo similar al menú de soporte de Google. Puedes ver su menú en la página de soporte de Gmail para tener una idea de hacia dónde nos dirigimos. En definitiva queremos Proporcionar nuestra mejor experiencia de usuario para todos los usuarios., independientemente de su sistema operativo o software de navegador, por lo tanto, he construido 2 ejemplos de código diferentes para admitir una degradación elegante entre los navegadores más antiguos.
El primero se construye usando imágenes de fondo personalizadas y alineaciones CSS adecuadas. Todos los eventos activos y eventos activos están precompilados con solo unos pocos estilos CSS, ¡pero los usuarios que tienen imágenes desactivadas no podrán experimentar estos efectos! Por eso también he creado un menú de aspecto similar con gradientes de CSS, esquinas redondeadas y sombras de cuadro.
Si está nervioso por apoyar ambos estilos, puede elegir entre ellos para su propio sitio. La mayoría de los visitantes utilizarán imágenes de forma predeterminada, pero busque en la herramienta de análisis de su sitio web si desea obtener datos de visitantes más precisos..
Palabras suficientes, saltemos al proyecto! Comenzaremos por construir el marco HTML básico y pasaremos a diferentes efectos de estilo. Ante todo necesitas descargar la imagen requerido para el proyecto.
HTML Bare-Bones
Estoy empezando mi documento con el plantilla de página estándar de HTML5. Esto incluye el doctype predeterminado, CSS vinculado y todos los elementos básicos. He agregado el siguiente código si desea iniciar su propio documento de esta manera. Tenga en cuenta que no debería afectar la forma en que se muestra su ruta de navegación, así que no dude en utilizar su propia plantilla de página si lo desea..
Página por defecto
Dividiré el código en dos bloques diferentes. El primer bloque con imágenes se construye de una manera ligeramente diferente, seguido de nuestro menú sin imágenes. Cada conjunto tiene su propio CARNÉ DE IDENTIDAD Para que podamos identificar el contenido mucho más fácil. Si también eres fan de jQuery puedes usar el #ID selector Manipular todos los elementos internos del DOM..
Primero tenemos un que contiene div con el id “migaja de pan“. En el archivo de demostración, lo he usado para separar nuestro código y moverlo a través de la página con algunos márgenes adicionales. Podría quitar este div exterior, pero tendrá que cambiar el estilo de todo para que se ajuste a la nueva plantilla. Realmente no está mal dejar un contenedor, ya que podrás controlar el posicionamiento mucho más fácilmente..
Internamente, he construido las migas de pan utilizando una lista desordenada. Hay tantas formas únicas de personalizar listas de HTML con estilo, y las migajas son solo una de ellas. Puede notar que le he dado al elemento de la lista inicial un clase de “primero“. Esto es necesario para un poco de relleno adicional para mantener los elementos del menú en línea. Además una pequeña bloque de tramo se agrega así que tenemos un borde izquierdo adecuado que no se superpone a la imagen de fondo.
Además, cada enlace de anclaje se planta con un número decreciente para el índice z propiedad. Usando imágenes necesitaremos cada uno de nuestros enlaces se superponen para mostrar la flecha de la miga de pan correctamente. La forma más fácil de lograr esto es ajustando el índice z así que cada enlace se superpone al siguiente. Comencé con 9 y bajó de allí, pero si tiene más enlaces en su menú, simplemente comience con un número entero más alto.
Menú Sin Imágenes
A degradar con gracia nuestra migaja de pan Necesitamos un conjunto secundario de elementos de lista HTML. Si está intentando retroceder en una única navegación, puede usar jQuery para detectar el agente del navegador y aplicar una ID en consecuencia. Desafortunadamente, esto no siempre es confiable (por ejemplo, para ciertos usuarios móviles). Otra solución es incluir una hoja de estilo específica de IE y esconder o mostrar el menú que mejor funcione - Pero, por supuesto, esta opción es solo para Internet Explorer..
breadcrumb2 Es nuestra nueva identificación utilizada para apuntar al menú sin imágenes. Siguiendo con este patrón que he usado. migajas2 como la clase para la lista desordenada. Tenga en cuenta que la razón por la que estamos usando clases es por su Simplicidad para duplicar estos menús., por lo tanto, cuando desee un par de rutas de navegación diferentes en su página, con estas clases esto nunca será un problema.
Hemos mantenido el .primero clase pero adicionalmente anexada .últimoclase en el elemento de la lista final. Sin imágenes no podemos duplicar las flechas para cada elemento del menú de navegación, por lo tanto, he usado algunas esquinas redondeadas para condimentar el menú secundario. .primero clase y .último manipule el radio del borde en los bordes de nuestro menú para crear un estilo realmente atractivo para la web 2.0.
Imágenes de fondo deslizantes CSS
Para algunos de los efectos más simples, he juntado ambas migas de pan al construir propiedades. Esto es útil ya que no solo ahorra espacio, sino que al volver a editar estilos, más fácil de personalizar tu propia mirada.
Para ambos #migaja de pan y # breadcrumb2 He puesto estilo de lista: ninguno; por lo que todos los elementos internos no tendrán marcadores. Podría dejarlos si le gusta el efecto, pero me parece que es difícil trabajar con el código HTML y es mucho más fácil crear nuevos íconos. Así que vamos a empezar con nuestra .migas clase.
.migas display: block; .crumbs li display: inline; .crumbs li.first padding-left: 8px; .crumbs li a, .crumbs li a: link, .crumbs li a: visitó color: # 666; bloqueo de pantalla; flotador izquierdo; tamaño de fuente: 12px; margen izquierdo: -13px; relleno: 7px 17px 11px 25px; posición: relativa; texto-decoración: ninguno; .crumbs li a background-image: url ('… /img/bg-crumbs.png'); repetición de fondo: no repetición; posición de fondo: 100% 0; posición: relativa; .crumbs li a: hover color: # 333; posición de fondo: 100% -48px; cursor: puntero; .crumbs li a: active color: # 333; posición de fondo: 100% -96px; .crumbs li.first a span altura: 29px; ancho: 3px; borde izquierdo: 1px sólido # d9d9d9; posición: absoluta; arriba: 0px; izquierda: 0px; Nosotros configurar nuestra lista desordenada a bloquear así que nada más se arrastra por la zona. Observe que los elementos de la lista son se muestra en línea mientras que a cada enlace de anclaje se le da mucho más espacio para extenderse. Queremos que se pueda hacer clic en todo el espacio de nuestro menú, por lo que esto requiere Construyendo nuestros anclajes como elementos de bloque..
He usado una imagen llamada bg-migajas.png para el fondo. Esto se conoce como una hoja de sprite simple en CSS, o alternativamente una puertas corredizas técnica. Esto significa que cuando el usuario se desplaza o hace clic en un enlace, cambiamos la posición del fondo para mostrar el estilo actualizado. Esta única imagen contiene los 3 diseños que necesitamos para crear fondos de ruta de navegación en diferentes posiciones, por lo que podemos usar el posición de fondo Propiedad para reubicar basado en la interacción del usuario..
Efectos personalizados con CSS3
El diseño original de la miga de pan es mucho más simple de crear. Esto se nota porque muchas de las propiedades de CSS son más básicas de lo que imaginas, pero ahora empezamos a centrarnos en duplicar estos efectos solo con CSS3.!
Los estilos individuales ocupan mucho espacio, así que los dividiré en 2 bloques de código.
.crumbs2 display: block; margen izquierdo: 27px; relleno: 0; relleno superior: 10px; .crumbs2 li display: inline; .crumbs2 li a, .crumbs2 li a: link, .crumbs2 li a: visitó color: # 666; bloqueo de pantalla; flotador izquierdo; tamaño de fuente: 12px; relleno: 7px 16px 7px 19px; posición: relativa; texto-decoración: ninguno; borde: 1px sólido # d9d9d9; borde derecho-ancho: 0px; .crumbs2 li a background-image: -webkit-gradient (linear, left bottom, left top, color-stop (0.45, rgb (241,241,241)), color-stop (0,73, rgb (245,245,245)); imagen de fondo: -moz-lineal-gradiente (parte inferior central, rgb (241,241,241) 45%, rgb (245,245,245) 73%); / * Para Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * Para Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; .crumbs2 li.first a border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; .crumbs2 li.last a border-right-width: 1px; borde inferior-derecho-radio: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
los .migajas2 el menú está usando Gradientes CSS para duplicar los efectos de fondo. Si no está familiarizado con estos, le recomiendo la guía de CSS Tricks sobre los gradientes de CSS3 que le ayudará a utilizar los gradientes de CSS3 de manera eficiente. Han incluido algunas propiedades más para los navegadores Microsoft y Opera, pero no son totalmente compatibles en todos los casos. No los he incluido en el código de demostración aquí, pero es bueno entender todas las opciones.
-webkit-gradiente y -gradiente lineal de moz Son las soluciones centrales las que hacen la mayor parte del trabajo. He incluido código heredado para versiones anteriores de Internet Explorer, pero no esta garantizado para mostrar correctamente todo el tiempo (después de todo, estamos utilizando potentes técnicas de representación de imágenes). Observe que he establecido los códigos de color RGB y hexadecimal entre las propiedades de fondo. Podrías apegarte a uno u otro método si te sientes más cómodo.
los radio del borde El código solo se aplica a nuestra navegación de navegación secundaria. Esto le da un efecto limpio en la parte superior izquierda y en la parte inferior derecha de nuestro menú de ruta de navegación completa. La barra parece casi salirse de la página, lo que realmente es un efecto fantástico en los navegadores que admiten los estilos, pero solo cubren los estados predeterminados de nuestros enlaces. Ahora, vamos a crear efectos de desplazamiento similares a las imágenes que hemos usado anteriormente.
CSS3 Bordes y Sombras
Cada vez que un usuario se desplaza sobre un enlace, queremos actualizar algunas cosas. Primero necesitamos oscurecer los colores del borde en la parte superior e inferior de nuestro elemento activo. Esto se puede ver en las imágenes también para los estados activo y activo..
.crumbs2 li a: hover border-top-color: # c4c4c4; color de borde inferior: # c4c4c4; imagen de fondo: -webkit-gradient (lineal, izquierda inferior, superior izquierda, color stop (0,45, rgb (241,241,241)), color stop (0,73, rgb (248,248,248))); imagen de fondo: -moz-lineal-gradiente (parte inferior central, rgb (241,241,241) 45%, rgb (248,248,248) 73%); / * Para Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Para Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; color: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-box-shadow: 0px 2px 2px # e8e8e8; cuadro de sombra: 0px 2px 2px # e8e8e8; .crumbs2 li a: active border-top-color: # c4c4c4; color de borde inferior: # c4c4c4; imagen de fondo: -webkit-gradient (lineal, izquierda inferior, superior izquierda, stop de color (0.45, rgb (224,224,224)), stop de color (0,73, rgb (235,235,235))); imagen de fondo: -moz-lineal-gradiente (parte inferior central, rgb (224,224,224) 45%, rgb (235,235,235) 73%); / * Para Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Para Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; box-shadow: -1px 1px 1px 0px #dadada inset; -webkit-box-shadow: -1px 1px 1px 0px #dadada inset; -moz-box-shadow: -1px 1px 1px 0px #dadada inset; color: # 333;
Estoy usando exactamente el mismo código de gradiente que hemos usado anteriormente, pero esta vez los colores son muy diferentes si notaste nuestros valores RGB. Cada uno de los estados oscurecerá el color del texto para # 333, sin embargo, otros descriptores se han cambiado ligeramente para corresponder con los comandos del usuario.
Al pasar verás un efecto de relieve brillante que junto con bordes oscuros Da los estilos de la ventana emergente. Si hace clic y mantiene, entrará en el estado activo, que presenta una degradado de fondo oscuro. Este efecto hace que los botones se vean como están “presionado” en la pagina.
También estamos aplicando sombra de la caja Propiedades de las nuevas especificaciones de CSS3.. -webkit, -moz, y los estilos predeterminados se utilizan con la misma configuración. Al pasar el ratón se visualiza un sombra suave saliendo desde la parte inferior del enlace seleccionado. Cuando está activa, la sombra se formará en los bordes superior, derecho e inferior. Este efecto se crea con la recuadro palabra clave agregada al final de cada línea de propiedad box-shadow. Una vez más, CSS Tricks es tu mejor amigo aquí con un artículo impresionante en box-shadow, ya que habla sobre la sintaxis y su uso adecuado en CSS3..
Bono: Más estilos
Además del código del tutorial, he incluido imágenes de fondo adicionales con combinaciones de colores adaptadas. Tomé muestras de los fondos originales y utilicé Adobe Photoshop para crear algunas variaciones que puede aplicar en su propio sitio web.
Estas Los archivos de bonificación están incluidos en el archivo fuente. que puede descargar en formato de archivo .zip en la siguiente sección.
Puedes ver la imagen de arriba para tener una idea de lo que estoy hablando. Si necesitas un esquema de color específico abre Photoshop> Imagen> Ajustes> Tono / Saturación para modificar el esquema de colores para que coincida con su propia plantilla, recuerde Marque la opción Colorear en el panel Tono / Saturación si el color no cambió en absoluto.
Conclusión
Este tutorial debería haberte familiarizado con algunas de las técnicas más nuevas de CSS3. Hemos creado dos fantásticos menús de migas de pan de estilo similar y los hemos construido de manera que puedan degradarse con gracia en los navegadores más antiguos. Además, he ofrecido mi código de demostración y algunas imágenes de bonificación para que juegues con ellas..
¿Te gustan especialmente los estilos que hemos construido aquí? ¿O tal vez tiene preguntas o ideas sobre cómo mejorar el código de tutorial? Comparta sus opiniones con nosotros en el área de discusión a continuación, y no olvide descargar los archivos de origen para poder jugar con la demostración.!
Más tutoriales CSS3
¿Desea más CSS3? Abajo están nuestros artículos para que entiendas CSS3 teórica y prácticamente.!
- CSS3: Crear un logotipo de RSS feed
- CSS3: Crear un campo de búsqueda
- CSS3: Crear un formulario de contacto AJAX
- CSS3: Creación de páginas web HTML5 / CSS3
