Pan rallado css3. ¿Cómo diseñar migas de pan en css? Usar una plantilla

Si tiene, como cree, mucho material, se recomienda habilitar esta funcionalidad aquí. El estilo de la lista no será para evitar el punto negro de la lista u otro estilo que sea el predeterminado. Porque lo categoriza y ciertamente los módulos, comenzando desde la página principal, y todo se presenta de una manera elegante. En este material se observa una selección que está hecha en el mismo estilo, es en un estilo plano.

Aquí en forma son completamente diferentes, que alguien ni siquiera necesitará editar para que se ajusten a su diseño, ya que encajará perfectamente en él. Ahora usaremos el código css para hacer el ancla de la primera lista y configurar el ancla del último hijo para que sea el valor predeterminado para que el tringle no aparezca en el ancla del primer hijo para el ancla de la izquierda y el último niño por el lado derecho.

hacer migas de pan

1. En un tono amarillo claro:

2. Paleta de luces con tonos verdes:

3. En color frambuesa

4. Hecho en una paleta azul:

Será una simple lista directa con un fondo y relleno y algún otro estilo. Después de eso, crearé una estructura triangular en el lado derecho de cada ancla de la lista usando CSS, jugando con las propiedades del broder.

Como puede ver en la demostración, cuando colocamos cualquier ancla de lista en los cofres de empanado, da un efecto que significará visitado o está en esta sección.

O podemos imaginar su efecto para hacerlo activo como pan rallado activo. Puede decir que estas migas de pan css son solo migas de pan porque solo usaré css y css3 para hacer estas migas de pan.

Comencemos la instalación:

El estilo de la lista no será para evitar el punto negro de la lista u otro estilo que sea el predeterminado. Cada lista div en línea será lista en línea para convertirla en una lista horizontal usando css display: list-inline.

#breadcrumb-isanchogives1 (
alineación de texto: centro;
margen superior: 30px;
}

#breadcrumb-isanchogives1 ul (
estilo de lista: ninguno;
pantalla: tabla en línea;
}
#breadcrumb-isanchogives1 ul li (
pantalla: en línea;
}

#breadcrumb-isanchogives1 ul li a (
bloqueo de pantalla;
flotador izquierdo;
altura: 50px;
fondo: #ffd928;
alineación de texto: centro;
relleno: 30px 40px 0 80px;
posición: relativa;
margen: 0 10px 0 0;

tamaño de fuente: 20px
texto-decoración: ninguno;
color: #fff;

}
#breadcrumb-isanchogives1 ul li a:después (
contenido: "";

borde izquierdo: 40px sólido #ffd928;
índice z: 1;

#breadcrumb-isanchogives1 ul li a:before (
contenido: "";
borde superior: 40px sólido transparente;
borde inferior: 40px sólido transparente;

}

#breadcrumb-isanchogives1 ul li:primer hijo a (
}
#breadcrumb-isanchogives1 ul li:first-child a:before (
pantalla: ninguno;
}

#breadcrumb-isanchogives1 ul li:last-child a (
relleno derecho: 80px;
}
#breadcrumb-isanchogives1 ul li:last-child a:after (
pantalla: ninguno;
}

#breadcrumb-isanchogives1 ul li a:hover (
fondo: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum(
fondo: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a:hover:after (
borde-izquierda-color: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum:después (
borde-izquierda-color: #ff9a2d;
}

#breadcrumb-isanchogives2 (
alineación de texto: centro;
margen superior: 30px;
}

#breadcrumb-isanchogives2 ul (
estilo de lista: ninguno;
pantalla: tabla en línea;
}
#breadcrumb-isanchogives2 ul li (
pantalla: en línea;
}

#breadcrumb-isanchogives2 ul li a (
bloqueo de pantalla;
flotador izquierdo;
altura: 50px;
fondo: #56e9ae;
alineación de texto: centro;
relleno: 30px 40px 0 80px;
posición: relativa;
margen: 0 10px 0 0;

tamaño de fuente: 20px
texto-decoración: ninguno;
color: #fff;

}
#breadcrumb-isanchogives2 ul li a:después (
contenido: "";
borde superior: 40px sólido transparente;
borde inferior: 40px sólido transparente;
borde izquierdo: 40px sólido #56e9ae;
posición: absoluta; derecha: -40px; superior: 0;
índice z: 1;

#breadcrumb-isanchogives2 ul li a:before (
contenido: "";
borde superior: 40px sólido transparente;
borde inferior: 40px sólido transparente;
borde izquierdo: 40px sólido #f2f2f2;
posición: absoluta; izquierda: 0; superior: 0;
}

#breadcrumb-isanchogives2 ul li:primer hijo a (
}

#breadcrumb-isanchogives2 ul li:last-child a (
relleno derecho: 80px;
}

#breadcrumb-isanchogives2 ul li a:hover (
fondo: #49c593;
}
#breadcrumb-isanchogives2 ul li a.wesove-readcrum (
fondo: #49c593;
}
#breadcrumb-isanchogives2 ul li a:hover:after (
borde-izquierdo-color: #49c593;
}
#breadcrumb-isanchogives2 ul li a.wesove-readcrum:después (
borde-izquierdo-color: #49c593;
}

#breadcrumb-isanchogives3 (
alineación de texto: centro;
margen superior: 30px;
}

#breadcrumb-isanchogives3 ul (
estilo de lista: ninguno;
pantalla: tabla en línea;
}
#breadcrumb-isanchogives3 ul li (
pantalla: en línea;
}

#breadcrumb-isanchogives3 ul li a (
bloqueo de pantalla;
flotador izquierdo;
altura: 50px;
fondo: #ff818b;
alineación de texto: centro;
relleno: 30px 40px 0 80px;
posición: relativa;
margen: 0 10px 0 0;

tamaño de fuente: 20px
texto-decoración: ninguno;
color: #fff;

}
#breadcrumb-isanchogives3 ul li a:después (
contenido: "";
altura: 80px;
ancho: 40px;
fondo: #ff818b;
posición: absoluta; derecha: -40px; superior: 0;
índice z: 1;

#breadcrumb-isanchogives3 ul li a:before (
contenido: "";
altura: 80px;
ancho: 40px;
borde-radio:0px 40px 40px 0px;
fondo:#f2f2f2;
posición: absoluta; izquierda: 0; superior: 0;
}

#breadcrumb-isanchogives3 ul li:primer hijo a (
borde-superior-izquierda-radio: 10px; borde-inferior-izquierda-radio: 10px;
}
#breadcrumb-isanchogives3 ul li:primer-hijo a:antes (
pantalla: ninguno;
}

#breadcrumb-isanchogives3 ul li:last-child a (
relleno derecho: 80px;
borde-superior-derecho-radio: 10px; borde-inferior-derecho-radio: 10px;
}
#breadcrumb-isanchogives3 ul li:last-child a:after (
pantalla: ninguno;
}

#breadcrumb-isanchogives3 ul li a:hover (
fondo: #ea606b;
}
#breadcrumb-isanchogives3 ul li a.wesove-readcrum (
fondo: #ea606b;
}
#breadcrumb-isanchogives3 ul li a:hover:después de (
fondo: #ea606b;
}
#breadcrumb-isanchogives3 ul li a.wesove-readcrum:después (
fondo: #ea606b;
}

#breadcrumb-isanchogives4 (
alineación de texto: centro;
margen superior: 30px;
}

#breadcrumb-isanchogives4 ul (
estilo de lista: ninguno;
pantalla: tabla en línea;
}
#breadcrumb-isanchogives4 ul li (
pantalla: en línea;
}

#breadcrumb-isanchogives4 ul li a (
bloqueo de pantalla;
flotador izquierdo;
altura: 50px;
fondo: #2b97cc;
alineación de texto: centro;
relleno: 30px 40px 0 80px;
posición: relativa;
margen: 0 10px 0 0;

tamaño de fuente: 20px
texto-decoración: ninguno;
color: #fff;

}
#breadcrumb-isanchogives4 ul li a:después (
contenido: "";
altura: 80px;
ancho: 40px;
borde-radio:0px 40px 40px 0px;
fondo:#2b97cc;
posición: absoluta; derecha: -40px; superior: 0;
índice z: 1;

#breadcrumb-isanchogives4 ul li a:before (
contenido: "";
altura: 80px;
ancho: 40px;
fondo:#f2f2f2;
borde-radio:0px 40px 40px 0px;
posición: absoluta; izquierda: 0; superior: 0;
}

#breadcrumb-isanchogives4 ul li:primer hijo a (
borde-superior-izquierda-radio: 0px; borde-inferior-izquierda-radio: 0px;
}

#breadcrumb-isanchogives4 ul li:last-child a (
relleno derecho: 80px;
borde-superior-derecha-radio: 0px; borde-inferior-derecho-radio: 0px;
}

#breadcrumb-isanchogives4 ul li a:hover (
fondo: #207ca8;
}
#breadcrumb-isanchogives4 ul li a.wesove-readcrum (
fondo: #207ca8;
}
#breadcrumb-isanchogives4 ul li a:hover:after (
fondo: #207ca8;
}
#breadcrumb-isanchogives4 ul li a.wesove-readcrum:después (
fondo: #207ca8;
}

Estos identificadores tienen la misma estructura interna, separados por diferentes estilos según su identificador.

¡Buenos días, queridos lectores!

Cómo afectan las migas de pan a la optimización de motores de búsqueda y cómo hacerlas en un sitio de WordPress. Esto es lo que se discutirá en el artículo de hoy. De cara al futuro, las migas de pan ayudan a los usuarios a navegar por su sitio. También tienen un efecto positivo en el SEO.

Las migas de pan son pistas en el sitio que muestran al usuario dónde se encuentra. Una especie de cadena que se creó para la navegación.

Se puede hacer clic en ellos, lo que significa que el visitante en cualquier momento puede ir al "nivel" anterior, a una subsección o sección. Como regla general, las migas de pan se ven así: principal - encabezado - subtítulo - artículo. El último elemento se elimina muy a menudo, en la creencia de que esto crea una duplicación innecesaria.

Se cree que este nombre es una referencia a un cuento de hadas, donde los niños, al ir al bosque, dejaban un camino de migas de pan para navegar. Se suponía que debían seguir este camino de regreso. Una cadena de enlaces también es un camino, cuanto más lejos del sitio, más elementos hay en él. Y de hecho, a lo largo de esta cadena, puedes volver a la página principal. Como en un cuento de hadas.

Cómo se ve afectado el SEO

El uso de la fuente de navegación se considera una buena forma en el mundo de la optimización de motores de búsqueda.

En primer lugar, mejora los factores de comportamiento. Y esto, como saben, es casi el indicador más importante de la calidad del sitio. Si la usabilidad está en un buen nivel, el uso y la navegación son claros y convenientes, entonces los visitantes definitivamente lo apreciarán y permanecerán en el recurso por más tiempo. Además, cuanto mejores sean los factores de comportamiento, mayor será su recurso en los resultados de búsqueda.

En segundo lugar, la presencia de migas de pan ya se considera un buen factor para el motor de búsqueda. Los robots ven que el proyecto tiene un sistema de navegación, estructura, y esto tiene un buen efecto en la clasificación.

Naturalmente, la barra de navegación por sí sola no llevará su recurso a la parte superior. Esto funciona en conjunto con otros aspectos de un buen SEO.

En resumen, las migas de pan ayudan:

• mejorar los factores de comportamiento y la usabilidad,
• hacer que la estructura del sitio sea clara y accesible,
• fácil de navegar a través de las páginas,
• mejorar el SEO técnicamente,
• hacer un reenlace.

Es decir, el uso de un feed de navegación es estrictamente obligatorio para quien quiere que su proyecto sea cómodo, práctico y visitado.

Tipos de pan rallado

Sí, tienen variedades. No hay muchos de ellos, pero vale la pena considerar este momento.

Lineal

La tira habitual que muestra el camino desde la página principal hasta el artículo. El tipo de migas de pan más común. Solo tenemos un tipo de barra de navegación lineal.

Botón de retroceso

Un tipo de navegación muy inconveniente y muy habitual en las tiendas online. Como regla general, los usuarios no están particularmente contentos con esto y usan un botón similar en el navegador. Para un sitio informativo, esta opción es prácticamente inútil.

Híbrido

Esta opción combina las dos anteriores. Es decir, el recurso tiene navegación lineal y el botón "Atrás". Podemos decir que este es un compromiso que ayuda a complacer a todos. Pero, como dije anteriormente, las personas rara vez usan el botón "Atrás", prefiriendo un botón en el navegador; afortunadamente, existen en todas las aplicaciones modernas.

Normalmente, la barra de navegación se encuentra en todas las páginas excepto en la principal. En WordPress, estas son categorías, etiquetas, artículos y otras taxonomías.

Cómo crear migas de pan en WordPress

La forma más fácil de crear un feed de navegación en WordPress y otros sitios es a través de html. Más bien, será un híbrido de html y php; de lo contrario, tendrá que escribir cada cadena de navegación manualmente, y esta no es una tarea muy agradable.

Usar una plantilla

Sería prudente elegir una plantilla inmediatamente con migas de pan. Si solo está pensando en un sitio futuro y aún no ha comenzado a crearlo, debe buscar en alguna tienda de plantillas de WordPress y buscar un tema con esta función allí (recomiendo Root).

Esta será la opción más práctica porque no tendrás que instalar complementos adicionales. En este caso, no tiene que agregar o editar algo manualmente, todo funcionará, como se suele decir, listo para usar (inmediatamente después de la instalación).

Complementos

Puede instalar la barra de navegación junto con el complemento. Pero tenga en cuenta que cada complemento puede cargar aún más su CMS. Si hay tantos complementos, otro nuevo simplemente puede arruinar todo, ralentizando el sitio.

Yoast SEO: instrucciones detalladas para configurar migas

Si lo usa como complemento de SEO, tengo buenas noticias para usted. Las migas de pan están presentes en la funcionalidad, por lo que solo tiene que configurarlas.

Esta es una guía general que debería funcionar para la mayoría de los usuarios. Se basa en la información proporcionada por los propios autores del complemento.

Entonces, para que la fuente de navegación en Yoast SEO funcione, debemos colocar el siguiente código PHP en nuestros archivos de plantilla:

Por lo general, este código se inserta en plantillas de página comunes: single.php o page.php. Además, algunos usuarios pegan este código en header.php, al final. Si esto funcionará en su caso particular o no, no lo sé, pero puede intentarlo.

Las plantillas de página generales se pueden editar a través de las herramientas integradas de WordPress. Vaya a "Apariencia" - "Editor", busque el archivo deseado en la lista.

Aquí está el código PHP y el marcado HTML. Un usuario no preparado puede confundirse, pero debe reunirse y tratar de comprender qué y dónde.

Específicamente, en mi tema, ya se proporcionan migas de pan, justo después del encabezado hay una función que llama a la cadena de navegación nativa. Su código será diferente, pero el significado general sigue siendo el mismo.

Es mejor colocar las migas de pan justo debajo del encabezado con la función get_header(); - Solo sirve para llamarlo. Por lo tanto, será correcto colocar el código de Yoast SEO justo debajo.

Pero tenga en cuenta que personalizar la barra de navegación puede requerir algunos estilos CSS. Los proporciona el propio complemento, pero pueden no ser adecuados.

Incluso puede usar migas de pan en los artículos. Solo necesita dejar el siguiente código abreviado en el lugar correcto: .

Pero ni el código ni el shortcode funcionarán si la función de migas de pan está deshabilitada en el propio complemento. Para habilitarlo, debe ir a la configuración del complemento (pestaña "SEO") - mostrar en los resultados de búsqueda - migas de pan.

Cambie el control deslizante a "Habilitado", luego desplácese hacia abajo en la página y haga clic en "Guardar cambios". A partir de ahora, el pan rallado comenzará a funcionar.

Puedes personalizarlos si lo deseas. Por ejemplo, establecer un separador entre elementos, escribir el texto de un enlace a la página principal, prefijos para taxonomías, etc.

También puede poner en negrita la última página (o el título del artículo). Para hacer esto, cambie el control deslizante correspondiente.

Si Yoast SEO realmente no le conviene, puede buscar otros complementos que le permitan crear migas de pan en su sitio. Hay muchos de ellos en el catálogo gratuito, pero destacaré las opciones más populares.

Breadcrumb NavXT

Un complemento simple que puede crear migas de pan para su proyecto. Actualmente cuenta con más de 800.000 usuarios activos. El complemento tiene su propio panel de control y es adecuado para la mayoría de los sitios de WordPress.

Casi todo se puede personalizar en Breadcrumb NavXT. Apariencia, elementos expuestos y su orden. Aquí hay muchas más opciones que en el mismo Yoast SEO (es decir, en lo que respecta a configurar la cadena de navegación).

Esta extensión se puede instalar de forma totalmente gratuita desde el directorio de WordPress. Puedes encontrarlo por palabras clave.

Migaja de pan

Otra extensión que se puede instalar directamente desde el directorio. A diferencia del anterior, este complemento no tiene una audiencia tan grande. Sólo 10.000 usuarios activos. Pero si considera que muchas personas prefieren otras opciones para crear cadenas de navegación, este es un buen resultado.

El plugin es simple y ligero. Tiene un hermoso diseño (ver captura de pantalla), puedes cambiar los colores. Para usar en pequeños proyectos, es más que suficiente.

Hay otros complementos también. Son menos populares, pero aún puedes probarlos. Simplemente vaya al directorio de complementos e ingrese la palabra clave de migas de pan. WordPress le dará inmediatamente varias docenas de opciones adecuadas.

Conclusión

Las migas de pan son una excelente manera de navegar por su sitio. Mejoran el SEO, aumentan los factores de comportamiento y permiten a los usuarios navegar por las páginas del sitio.

Casi todos los sitios modernos intentan prestar atención a esto. Los diseñadores web no se quedan atrás, ahora la falta de migas de pan en la plantilla se considera un inconveniente muy importante. Alguien incluso se negará a comprar una plantilla de este tipo, solo por esta bagatela aparentemente insignificante. Asegúrese de considerar este hecho y trate de hacer que su sitio sea fácil de usar.

Si desea obtener más información sobre la creación de proyectos de información para obtener ganancias, le aconsejo que consulte. El autor habla sobre la creación de un sitio en WordPress, la optimización técnica y de motores de búsqueda competente y, lo que es más importante, sobre los métodos actuales de monetización.

La navegación con migas de pan ayuda a los visitantes del sitio a navegar por la estructura jerárquica de los documentos y a encontrar el camino al nivel superior. Por lo tanto, si se coloca una gran cantidad de documentos en el sitio, debe proporcionarse con "migas de pan". En este tutorial, se le presentará un código CSS para crear varias opciones de diseño para la herramienta de navegación deseada.

marcado HTML

El marcado es simple y mínimo. Se basa en una lista desordenada.

• lorem ipsum
• vivamus nisi eros
• Nulla sed lorem risus
• Nam iaculis comodo
• Estás aquí

CSS

Primero, hagamos un pequeño reinicio de CSS en nuestra lista desordenada:

Ul( margen: 0; relleno: 0; estilo de lista: ninguno; )

Se utilizarán pseudoelementos para diseñar nuestras migas de pan.

primer ejemplo

Este ejemplo utiliza una técnica muy simple. Se crea un triángulo en el marco de la derecha usando pseudo-elementos colocados uno encima del otro. El triángulo oscuro se desplaza para crear un efecto de borde.

#breadcrumbs-one( fondo: #eee; ancho del borde: 1px; estilo del borde: sólido; color del borde: #f5f5f5 #e5e5e5 #ccc; radio del borde: 5px; sombra del cuadro: 0 0 2px rgba(0, 0,0,.2); desbordamiento: oculto; ancho: 100 %; ) #breadcrumbs-one li( float: left; ) #breadcrumbs-one a( padding: .7em 1em .7em 2em; float: left; text- decoración: ninguna; color: #444; posición: relativa; sombra de texto: 0 1px 0 rgba(255,255,255,.5); color de fondo: #ddd; imagen de fondo: degradado lineal (a la derecha, #f5f5f5, # ddd); ) #breadcrumbs-one li:first-child a( padding-left: 1em; border-radius: 5px 0 0 5px; ) #breadcrumbs-one a:hover( background: #fff; ) #breadcrumbs-one a ::después, #breadcrumbs-one a::before( contenido: ""; posición: absoluta; superior: 50 %; margen superior: -1,5 em; borde superior: 1,5 em sólido transparente; borde inferior: 1,5 em sólido transparente; borde izquierdo: 1em sólido; derecho: -1em; ) #breadcrumbs-one a::after( z-index: 2; border-left-color: #ddd; ) #breadcrumbs-one a::before( borde-izquierdo-color: #ccc;ri luz: -1.1em; índice z: 1; ) #breadcrumbs-one a:hover::after( border-left-color: #fff; ) #breadcrumbs-one .current, #breadcrumbs-one .current:hover(font-weight: bold; background: none; ) # pan rallado-uno .actual::después, #pan rallado-uno .actual::antes( contenido: normal; )

Las formas CSS se crean con pseudoelementos colocados antes y después de un elemento.

#breadcrumbs-two( overflow: hidden; width: 100%; ) #breadcrumbs-two li( float: left; margin: 0 .5em 0 1em; ) #breadcrumbs-two a( background: #ddd; padding: .7em 1em ; flotante: izquierda; texto-decoración: ninguna; color: #444; texto-sombra: 0 1px 0 rgba(255,255,255,.5); posición: relativa; ) #breadcrumbs-two a:hover( background: #99db76; ) #breadcrumbs-two a::before( contenido: ""; posición: absoluta; parte superior: 50 %; margen superior: -1,5 em; ancho de borde: 1,5 em 0 1,5 em 1em; estilo de borde: sólido; borde- color: #ddd #ddd #ddd transparente; izquierda: -1em; ) #breadcrumbs-two a:hover::before( border-color: #99db76 #99db76 #99db76 transparent; ) #breadcrumbs-two a::after( content : ""; posición: absoluta; superior: 50%; margen superior: -1,5em; borde superior: 1,5em sólido transparente; borde inferior: 1,5em sólido transparente; borde izquierdo: 1em sólido #ddd; derecha: -1em; ) #breadcrumbs-two a:hover::after( border-left-color: #99db76; ) #breadcrumbs-two .current, #breadcrumbs-two .current:hover( font-weight: bold; fondo: ninguno; ) #breadcrumbs-two .current::after, #breadcrumbs-two .current::before( content: normal; )

La propiedad border-radius redondea las esquinas de rectángulos y cuadrados. El cuadrado gira para convertirlo en un diamante.

#breadcrumbs-tres( desbordamiento: oculto; ancho: 100%; ) #breadcrumbs-tres li( flotante: izquierda; margen: 0 2em 0 0; ) #breadcrumbs-tres a( relleno: .7em 1em .7em 2em; float: izquierda; texto-decoración: ninguno; color: #444; fondo: #ddd; posición: relativa; índice z: 1; texto-sombra: 0 1px 0 rgba(255,255,255,.5); border-radius: .4em 0 0 .4em; ) #breadcrumbs-tres a:hover( fondo: #abe0ef; ) #breadcrumbs-tres a::after( fondo: #ddd; contenido: ""; altura: 2.5em; margen superior: -1.25em ; posición: absoluta; derecha: -1em; superior: 50%; ancho: 2,5em; índice z: -1; transformación: rotar (45 grados); borde-radio: .4em; ) #breadcrumbs-tres a:hover: :después( fondo: #abe0ef; ) #breadcrumbs-tres .actual, #breadcrumbs-tres .actual:hover( font-weight: negrita; fondo: ninguno; ) #breadcrumbs-tres .actual::después( contenido: normal; )

Se agregan dos rectángulos usando pseudo-elementos. Luego redondean las esquinas.

#breadcrumbs-four( overflow: hidden; width: 100%; ) #breadcrumbs-four li( float: left; margin: 0 .5em 0 1em; ) #breadcrumbs-four a( background: #ddd; relleno: .7em 1em ; flotante: izquierda; texto-decoración: ninguna; color: #444; texto-sombra: 0 1px 0 rgba(255,255,255,.5); posición: relativa; ) #breadcrumbs-four a:hover( background: #efc9ab; ) #breadcrumbs-four a::before, #breadcrumbs-four a::after( content:""; position:absolute; top: 0; bottom: 0; width: 1em; background: #ddd; transform: skew(-10deg ); ) #breadcrumbs-four a::before( izquierda: -.5em; border-radius: 5px 0 0 5px; ) #breadcrumbs-four a:hover::before( background: #efc9ab; ) #breadcrumbs-four a ::after( right: -.5em; border-radius: 0 5px 5px 0; ) #breadcrumbs-four a:hover::after( background: #efc9ab; ) #breadcrumbs-four .current, #breadcrumbs-four .current :hover( font-weight: bold; background: none; ) #breadcrumbs-four .current::after, #breadcrumbs-four .current::before( content: normal; )

Beneficios del diseño de migas de pan CSS3

• No hay imágenes, solo actualice y mantenga.
• Fácil de escalar.
• Compatible con versiones anteriores de navegadores más antiguos.

En este tutorial, aprenderá a crear migas de pan en Bootstrap 3 y 4.

marcado de migas de pan

Las cadenas de navegación ("migas de pan", migas de pan) es un esquema de navegación que muestra la posición actual del usuario en el sitio. Se utilizan para mostrar información organizada jerárquicamente. Por ejemplo, en una tienda online, las migas de pan suelen ser secciones encadenadas. Con su ayuda, el usuario puede determinar en qué sección se encuentra actualmente y también le permiten ir a secciones de niveles superiores, es decir. proporcionar otra forma de navegar por la estructura del sitio.

Las migas de pan en Bootstrap son simplemente listas ordenadas con migas de pan de clase. El separador de lista se agrega automáticamente con CSS (bootstrap.min.css) a través de la siguiente clase:

Pan rallado > li + li:antes ( color: #cccccc; contenido: "/"; relleno: 0 5px; )

Ejemplo de migas de pan con Bootstrap.

1. hogar

1. hogar
2. Procesadores

1. hogar
2. Procesadores
3. Intel

Un ejemplo más:

1. hogar
2. 2013
3. Noviembre

Diseño de migas de pan no estándar

Considere un ejemplo de cómo crear la siguiente opción de diseño de migas de pan:

Un ejemplo del diseño de migas de pan en el sitio.

El proceso de creación de migas de pan consiste en desarrollar estructuras y estilos HTML (CSS).

CSS de migas de pan:

/* migas de pan */ #breadcrumb (list-style: none; display: inline-block; padding-left: 0px; ) #breadcrumb .icon (font-size: 14px; ) #breadcrumb li ( float: left; ) # breadcrumb li a (color: #fff; pantalla: bloque; fondo: #cc2eaa; decoración de texto: ninguna; posición: relativa; altura: 34px; altura de línea: 34px; relleno: 0 10px 0 5px; alineación de texto: centro; margin-right: 23px; -webkit-user-select: ninguno; -moz-user-select: ninguno; -ms-user-select: ninguno; user-select: ninguno; ) #breadcrumb li:first-child a ( padding -left: 15px; -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px; border-radius: 4px 0 0 4px; ) #breadcrumb li:first-child a:before ( border: none ; ) #breadcrumb li:last-child a ( padding-right: 15px; -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0; border-radius: 0 4px 4px 0; ) # breadcrumb li:último hijo a:después (borde: ninguno;) #breadcrumb li a:antes, #breadcrumb li a:después (contenido: ""; posición: absoluta; superior: 0; borde: 0 sólido # cc2eaa; ancho del borde: 17px 10px; ancho: 0; altura: 0; ) #breadcrumb li a:before (izquierda: -20px; border-left-color: transparente; ) #breadcrumb li a:after (left: 100%; border-color: transparent; border-left-color: #cc2eaa; ) #breadcrumb li a:hover ( color de fondo: #a22587; ) #breadcrumb li a:hover:before ( border-color: #a22587; border-left-color: transparent; ) #breadcrumb li a:hover:after ( border -left-color: #a22587; ) #breadcrumb li a:active (background-color: #a22587; ) #breadcrumb li a:active:before (border-color: #a22587; border-left-color: transparent; ) # breadcrumb li a:active:after ( border-left-color: #a22587; ) #breadcrumb li. current a (pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); -webkit-box -sombra: ninguna; box-shadow: ninguna; opacidad: .65; )

Los cambios de color se realizan editando los valores de las propiedades CSS correspondientes.

marcado HTML:

1. hogar
2. Accesorios
3. Procesos
4. Intel

El mantenimiento del elemento actual (si se utilizará en una cadena) se realiza agregando la clase actual al elemento li.

En sitios con muchas páginas, las migas de pan ( navegación de migas de pan) puede ayudar en gran medida a los visitantes a navegar por la estructura jerárquica de los documentos e indicar la ubicación actual de los usuarios en el sitio. Desde el punto de vista de la usabilidad, las migas de pan pueden reducir la cantidad de pasos que da un visitante para llegar al nivel superior de una página.

¿Qué es la miga de pan?

Migas de pan (Menú de Navegación, "Migas de pan", Inglés Migas de pan) es un elemento de navegación del sitio web que representa la ruta a través del sitio desde su "raíz" hasta la página actual en la que se encuentra el usuario.

El nombre "Breadcrumbs" es una referencia irónica al cuento de hadas alemán "Hansel y Gretel" en el que los niños, cuando fueron llevados al bosque por segunda vez, no pudieron encontrar el camino de regreso, porque esta vez en lugar de pequeños guijarros. dejaron migas de pan, posteriormente picoteadas por pájaros del bosque.

Por lo general, puede ver migas de pan en sitios con mucho contenido que se coloca en un orden jerárquico. En su forma más simple, la ruta de navegación se presenta como enlaces de texto horizontales y caracteres separados (> -"mayor"), lo que indica el nivel de esta página en relación con otras páginas.

¿Cuándo debe usar migas de pan?

Usa el pan rallado para sitios web grandes y sitios web con organización jerárquica de páginas.

Las migas de pan no deben usarse para sitios hermanos que no tienen ninguna jerarquía o agrupación lógica.

Una excelente manera de determinar si un sitio se beneficiaría del uso de migas de pan es crear un mapa del sitio o un diagrama que represente la arquitectura de navegación del sitio y luego analizar si las migas de pan facilitan que un usuario navegue dentro y entre categorías.

La navegación jerárquica debe considerarse una característica opcional y no debe reemplazar un menú de navegación principal eficiente. Este es un esquema de navegación secundario que permite a los usuarios establecer dónde se encuentran y es una forma alternativa de navegar por el sitio.

Tipos de pan rallado

Hay tres principalestipo de pan rallado.

Basado en la ubicación

Según la ubicación, las migas de pan muestran al usuario dónde se encuentra en la jerarquía del sitio.Por lo general, se usan para estructuras de navegación que tienen múltiples niveles (generalmente más de dos niveles).En el siguiente ejemplo (depunto del sitio ), cada enlace de texto en la página de la izquierda está un nivel más arriba.

Basado en la propiedad

Las migas de pan basadas en propiedades reflejan los atributos de una página en particular.

basado en ruta

Muestran la ruta que tomó el usuario hasta la página actual. Esta ruta es dinámica, una misma página puede tener diferentes direcciones.

Beneficios de usar migas de pan

Pueden ayudar al usuario

Las migas de pan se utilizan principalmente para proporcionar a los usuarios un medio adicional para navegar por el sitio.En sitios web grandes de varios niveles, al ofrecer visualización de ruta, puede proporcionar una transición bastante fácil para el usuario a categorías de nivel superior.

Reduce el número de clics o acciones para volver a páginas de nivel superior

En lugar de usar el botón Atrás del navegador o la navegación principal del sitio web, los usuarios pueden navegar de regreso a categorías superiores con migas de pan mientras hacen menos clics.

Por lo general, no obstruye la pantalla.

Suelen tener una orientación horizontal y por lo tanto no ocupan mucho espacio en la página.

Reducir la tasa de rebote

Las migas de pan pueden alentar a los nuevos visitantes a navegar por el resto de las páginas del sitio web. Por ejemplo, un usuario va a una página a través de una búsqueda en Google, ve las categorías que están colocadas arriba y puede estar interesado. Esto, a su vez, reduce la tasa de rebote del sitio.

Errores al usar Breadcrumbs

Las migas de pan son fáciles de usar. Pero antes de implementarlos en el sitio, debe considerar algunos errores que deben evitarse.

Usar migas de pan cuando no es necesario

Un error común es usar migas de pan cuando no hay ningún beneficio en hacerlo.

En el ejemplo anterior, podemos observar demasiadas opciones de navegación que se colocan muy cerca unas de otras: navegación principal, migas de pan y navegación secundaria.

Uso de migas de pan como navegación principal

Como se señaló anteriormente, las migas de pan deben usarse como una ayuda adicional para la navegación.

Uso de migas de pan cuando las páginas tienen múltiples categorías

Las migas de pan tienen una estructura lineal, por lo que serán difíciles de usar si sus páginas no se pueden dividir en categorías claras.Decidir si usar migas de pan depende mucho de cómo configure su sitio de jerarquía.En un nivel de página bajo, el uso de migas de pan es ineficiente, impreciso y confuso para el usuario.

diseño de migas de pan

A la hora de diseñar cadenas de navegación pueden surgir algunas dudas. Por ejemplo:

¿Qué carácter se debe usar para separar enlaces?

El símbolo más común y más reconocible para separar hipervínculos en migas de pan es el símbolo mayor que (>).

También puede usar comillas para indicar la esquina derecha (") y las barras inclinadas (/).

La elección depende del sitio en sí y del tipo de cadena que esté utilizando.Por ejemplo, si los enlaces en las migas de pan no tienen una relación jerárquica entre sí, es posible que el uso del símbolo "mayor que >" no transmita con precisión su significado.

¿Cuáles deberían ser?

No querrás que tus migas de pan dominen la página.Deben usarse como una ayuda adicional para los usuarios (para mayor comodidad), por lo que también deben tener un tamaño que coincida con este y transmitir esta característica a los usuarios correctamente; deben ser más pequeños o menos visibles que la navegación del menú principal.

Una buena regla general al medir la distancia recorrida es queno debe ser el primer elemento que llame la atención del usuario en la página.

¿Dónde se debe colocar el pan rallado?

Las migas de pan generalmente se muestran en la parte superior de la página, debajo del menú de navegación principal, si se usa un menú horizontal.

Estadísticas

A continuación se muestran las estadísticas recopiladas en mayo de 2002 sobre los 75 principales sitios de comercio electrónico.

Orientación de la cadena

95% - horizontales

5% verticales

Separador entre elementos (para cadenas horizontales)

Ejemplos de uso de migas de pan en diseño web

Ahora que hemos cubierto quién, cómo, cuándo y por qué usar migas de pan, echemos un vistazo a algunos ejemplos de cómo se usan las migas de pan en los sitios web.

El uso clásico de "pan rallado"

Uso de otros símbolos