Creé un menú horizontal usando listas HTML y CSS. Todo funciona como debería, excepto cuando pasa el mouse sobre los enlaces. Verá, creé un estado de desplazamiento en negrita para los enlaces, y ahora los enlaces del menú cambian debido a la diferencia de tamaño en negrita.
Me encuentro con el mismo problema que esta publicación de SitePoint . Sin embargo, la publicación no tiene la solución adecuada. He buscado una solución en todas partes y no puedo encontrarla. Seguramente no puedo ser el único tratando de hacer esto.
¿Alguien tiene alguna idea?
PD: No conozco el ancho del texto en los elementos del menú, así que no puedo establecer el ancho de los elementos li.
.nav { margin: 0; padding: 0; }
.nav li {
list-style: none;
display: inline;
border-left: #ffffff 1px solid;
}
.nav li a:link, .nav li a:visited {
text-decoration: none;
color: #000;
margin-left: 8px;
margin-right: 5px;
}
.nav li a:hover{
text-decoration: none;
font-weight: bold;
}
.nav li.first { border: none; }<ul class="nav">
<li class="first"><a href="#">item 0</a></li>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
margin-top: -1pxa:afterevitar la creación de espacios de 1 píxel de altura.:vs::"Todos los navegadores que admiten la::sintaxis CSS3 de dos puntos también admiten solo la:sintaxis, pero IE 8 solo admite los dos puntos, por lo que, por ahora, se recomienda utilizar los dos puntos para obtener la mejor compatibilidad con el navegador". css-tricks.com/almanac/selectors/a/after-and-beforeULoa::after, en otras palabras, restablezca todos los rellenos / márgenes / alturas de línea / tamaños de fuente, etc.Una solución comprometida es simular negrita con text-shadow, por ejemplo:
Para una mejor comparación, creé estos ejemplos:
Pasar a
text-shadowun valor realmente bajo parablur-radiushará que el efecto de desenfoque no sea tan evidente.En general, cuanto más repita,
text-shadowmás audaz será su texto, pero al mismo tiempo perderá la forma original de las letras.¡Debo advertirle que configurar las
blur-radiusfracciones no va a representar lo mismo en todos los navegadores! Safari, por ejemplo, necesita valores más grandes para representarlo de la misma manera que lo hará Chrome.fuente
Si no puede establecer el ancho, significa que el ancho cambiará a medida que el texto se pone en negrita. No hay forma de evitar esto, excepto por compromisos como modificar el relleno / márgenes para cada estado.
fuente
Otra idea es usar
letter-spacingfuente
Una línea en jquery:
editar: Si bien esto puede generar la solución, uno debe mencionar que no funciona junto con el código en la publicación original. "display: inline" tiene que ser reemplazado con parámetros flotantes para que un ajuste de ancho sea efectivo y que el menú horizontal funcione según lo previsto.
fuente
ul.nav li aconatrabajos funciona?Solución CSS3 - Experimental
(Falsa audacia)Pensé en compartir una solución diferente que nadie sugirió aquí. Hay una propiedad llamada
text-strokeque será útil para esto.Aquí, estoy apuntando el texto dentro de la
spanetiqueta y lo trazamos un píxel con elblackque simulará elboldestilo de ese texto en particular.Tenga en cuenta que esta propiedad no es ampliamente compatible, a partir de ahora (al escribir esta respuesta), solo Chrome y Firefox parecen admitir esto. Para obtener más información sobre la compatibilidad del navegador
text-stroke, puede consultar CanIUse .Solo para compartir algunas cosas adicionales, puede usar
-webkit-text-stroke-width: 1px;si no está buscando establecer uncolorpara su accidente cerebrovascular.fuente
Podrías usar algo como
y luego en su CSS simplemente configure el contenido de la extensión en negrita y escóndelo con visibilidad: oculto, para que mantenga sus dimensiones. Luego puede ajustar los márgenes de los siguientes elementos para que se ajusten correctamente.
Sin embargo, no estoy seguro de si este enfoque es compatible con SEO.
fuente
Acabo de resolver el problema con la solución "sombra". Parece lo más simple y efectivo.
No es necesario repetir la sombra tres veces (el resultado fue el mismo para mí).
fuente
Tuve un problema similar al tuyo. Quería que mis enlaces se pusieran en negrita cuando pasas el mouse sobre ellos, pero no solo en el menú sino también en el texto. Como puede suponer, sería una verdadera tarea descubrir todos los diferentes anchos. La solución es bastante simple:
Cree un cuadro que contenga el texto del enlace en negrita pero coloreado como su fondo y con su enlace real encima. Aquí hay un ejemplo de mi página:
CSS:
Por supuesto, debe reemplazar # FFFFE0 por el color de fondo de su página. Los índices z no parecen ser necesarios, pero los pongo de todos modos (ya que el elemento "hipo" aparecerá después del elemento "hiper" en el código HTML). Ahora, para poner un enlace en su página, incluya lo siguiente:
HTML:
El segundo "aquí" será invisible y estará oculto debajo de su enlace. Como se trata de un cuadro estático con el texto del enlace en negrita, el resto del texto ya no cambiará, ya que ya está desplazado antes de pasar el cursor sobre el enlace.
Espero haber podido ayudar :).
Hasta la vista
fuente
Puede trabajar con la propiedad "margen":
Solo asegúrese de que el margen izquierdo y derecho sean lo suficientemente grandes para que el espacio adicional pueda contener el texto en negrita. Para palabras largas, puede elegir diferentes márgenes. Es solo otra solución pero haciendo el trabajo por mí.
fuente
Me gusta usar text-shadow en su lugar. Especialmente porque puedes usar transiciones para animar sombras de texto.
Todo lo que realmente necesitas es:
Para una navegación completa, consulte este jsfiddle: https://jsfiddle.net/831r3yrb/
Soporte del navegador y más información sobre text-shadow: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp
fuente
Aconsejaría no cambiar las fuentes (°) al pasar el mouse sobre ellas. En este caso, se trata solo de que los elementos del menú se mueven un poco, pero he visto casos en los que el párrafo completo se reformatea porque el ensanchamiento provoca un ajuste de palabra adicional. No desea ver que esto suceda cuando lo único que hace es mover el cursor; Si no hace nada, el diseño de la página no debería cambiar.
El cambio también puede ocurrir al cambiar entre normal y cursiva. Intentaría cambiar los colores o alternar el subrayado si tiene espacio debajo del texto. (el subrayado debe mantenerse alejado del borde inferior)
Sería abucheado si usara el cambio de fuentes para mi clase de Diseño de Formulario :-)
(°) La palabra fuente a menudo se usa incorrectamente. "Verdana" es un tipo de letra , "Verdana normal" y "Verdana bold" son fuentes diferentes del mismo tipo de letra.
fuente
fuente
Uso la solución de sombra de texto como algunas otras mencionadas aquí:
la diferencia es que no especifico el color de sombra, por lo que esta solución es universal para todos los colores de fuente.
fuente
Un enfoque alternativo sería "emular" texto en negrita mediante text-shadow. Esto tiene la ventaja (/ malus, dependiendo de su caso) para trabajar también en iconos de fuente.
Un poco hacky, aunque te ahorra la duplicación de texto (lo cual es útil si es mucho, como lo fue en mi caso).
fuente
Esta es la solución que prefiero. Requiere un poco de JS pero no necesita que su propiedad de título sea exactamente la misma y su CSS puede seguir siendo muy simple.
fuente
¿Qué hay de esto? Una solución libre de JavaScript - CSS3.
http://jsfiddle.net/u1aks77x/1/
fuente
Solución no muy elegante, pero "funciona":
fuente
He combinado un montón de las técnicas anteriores para proporcionar algo que no apesta totalmente con js desactivado y es aún mejor con un poco de jQuery. Ahora que está mejorando la compatibilidad con navegadores para el espaciado entre letras de subpíxeles, es realmente agradable usarlo.
fuente
Es mejor usar un :: before en lugar de un :: after así:
Para más detalles: https://jsfiddle.net/r25foavy/
fuente
a::beforesería mejor quea::after? Parece una pieza clave de su respuesta, pero no es obvio por qué una es preferible a la otra en este caso.Arreglé el menú al pasar por alto el éxito audaz. Es compatible con responsive, este es mi código:
fuente
Si no es reacio a usar Javascript, puede establecer el ancho adecuado una vez que se muestra la página. Así es como lo hice (usando Prototype):
fuente
Realmente no puedo soportarlo cuando alguien te dice que no hagas algo así cuando hay una solución simple al problema. No estoy seguro acerca de los elementos li, pero acabo de solucionar el mismo problema. Tengo un menú que consta de etiquetas div.
Simplemente configure la etiqueta div para que sea "display: bloque en línea". En línea para que se sientan uno al lado del otro y bloqueen para que pueda establecer un ancho. Simplemente configure el ancho lo suficientemente ancho para acomodar el texto en negrita y alinee el centro del texto.
(Nota: parece estar eliminando mi html [a continuación], pero cada elemento de menú tenía una etiqueta div envuelta alrededor con la identificación correspondiente y el nombre de la clase SearchBar_Cateogory. Es decir:
<div id="ROS_SearchSermons" class="SearchBar_Category">HTML (tenía etiquetas de anclaje alrededor de cada elemento del menú, pero no pude enviarlas como nuevo usuario)
CSS:
fuente
prueba esto:
fuente
También puede probar los márgenes negativos si el texto en negrita es más ancho que el normal. (no siempre) Entonces, la idea es usar clases en su lugar para diseñar el estado: hover.
jQuery:
CSS:
¡Espero poder ayudar!
fuente