Éléments en ligne se déplaçant lorsqu'ils sont mis en gras en survol

J'ai créé un menu horizontal en utilisant une liste HTML et CSS. Tout fonctionne comme il se doit, sauf lorsque vous survolez les liens. Vous voyez, j'ai créé un état de survol en gras pour les liens, et maintenant les liens de menu changent en raison de la différence de taille en gras.

Je rencontre le même problème que ce message SitePoint . Cependant, le poste n'a pas de solution appropriée. J'ai cherché une solution partout et je n'en trouve pas. Je ne peux sûrement pas être le seul à essayer de faire ça.

Quelqu'un a-t-il une idée?

PS: Je ne connais pas la largeur du texte dans les éléments de menu, donc je ne peux pas simplement définir la largeur des éléments 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>

li {
    display: inline-block;
    font-size: 0;
}
li a {
    display:inline-block;
    text-align:center;
    font: normal 16px Arial;
    text-transform: uppercase;
}
a:hover {
    font-weight:bold;
}
a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

<ul>
    <li><a href="#" title="height">height</a></li>
    <li><a href="#" title="icon">icon</a></li>
    <li><a href="#" title="left">left</a></li>
    <li><a href="#" title="letter-spacing">letter-spacing</a></li>
    <li><a href="#" title="line-height">line-height</a></li>
</ul>

Vérifiez l'exemple de travail sur JSfiddle . L'idée est de réserver de l'espace pour le :hovercontenu en gras (ou tout style d'état) dans le :beforepseudo-élément et d'utiliser la balise de titre comme source pour le contenu.

Une solution compromise consiste à simuler le gras avec du texte, par exemple:

texte-ombre: 0 0 0,01 px noir;

Pour une meilleure comparaison, j'ai créé ces exemples:

a, li {
  color: black;
  text-decoration: none;
  font: 18px sans-serif;
  letter-spacing: 0.03em;
}
li {
  display: inline-block;
  margin-right: 20px;
  color: gray;
  font-size: 0.7em;
}
.bold-x1 a.hover:hover,
.bold-x1 a:not(.hover) {
  text-shadow: 0 0 .01px black;
}
.bold-x2 a.hover:hover,
.bold-x2 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black;
}
.bold-x3 a.hover:hover,
.bold-x3 a:not(.hover){
  text-shadow: 0 0 .01px black, 0 0 .01px black, 0 0 .01px black;
}
.bold-native a.hover:hover,
.bold-native a:not(.hover){
  font-weight: bold;
}

.bold-native li:nth-child(4),
.bold-native li:nth-child(5){
 margin-left: -6px;
 letter-spacing: 0.01em;
}

<ul class="bold-x1">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Bold (text-shadow x1)</li>
</ul>
<ul class="bold-x2">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Extra Bold (text-shadow x2)</li>
</ul>
<ul class="bold-native">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Bold (native)</li>
</ul>
<ul class="bold-x3">
  <li><a class="hover" href="#">Home</a></li>
  <li><a class="hover" href="#">Products</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
  <li>Black (text-shadow x3)</li>
</ul>

Le passage à text-shadowune valeur vraiment faible blur-radiusrendra l'effet de flou moins apparent.

En général, plus vous répétez, text-shadowplus votre texte sera audacieux, mais en même temps, il perdra la forme originale des lettres.

Je dois vous avertir que la définition des blur-radiusfractions ne rendra pas la même chose dans tous les navigateurs! Safari, par exemple, a besoin de valeurs plus élevées pour le rendre de la même manière que Chrome.

Si vous ne pouvez pas définir la largeur, cela signifie que la largeur changera lorsque le texte sera en gras. Il n'y a aucun moyen d'éviter cela, sauf par des compromis tels que la modification du remplissage / des marges pour chaque état.

Une autre idée utilise letter-spacing

li, a { display: inline-block; }
a {
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
  letter-spacing: 0.235px
}

a:hover, a:focus {
  font-weight: bold;
  letter-spacing: 0
}

<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>

Une ligne en jquery:

$('ul.nav li a').each(function(){
    $(this).parent().width($(this).width() + 4);
});

edit: Bien que cela puisse apporter la solution, il convient de mentionner que cela ne fonctionne pas en conjonction avec le code dans le message d'origine. "display: inline" doit être remplacé par des paramètres flottants pour qu'un réglage de largeur soit efficace et que ce menu horizontal fonctionne comme prévu.

Solution CSS3 - Expérimentale

Pensé à partager une solution différente que personne n'a suggérée ici. Il y a une propriété appelée text-strokequi sera utile pour cela.

p span:hover {
  -webkit-text-stroke: 1px black;
}

<p>Some stuff, <span>hover this,</span> it's cool</p>

Ici, je cible le texte à l'intérieur de la spanbalise et nous le frappons d'un pixel avec blacklequel simulera le boldstyle de ce texte particulier.

Notez que cette propriété n'est pas largement prise en charge, pour l'instant (lors de la rédaction de cette réponse), seuls Chrome et Firefox semblent le prendre en charge. Pour plus d'informations sur la prise en charge du navigateur pour text-stroke, vous pouvez vous référer à CanIUse .

Juste pour partager des trucs supplémentaires, vous pouvez les utiliser -webkit-text-stroke-width: 1px;si vous ne cherchez pas à définir un colorpour votre AVC.

Vous pouvez utiliser quelque chose comme

<ul>
   <li><a href="#">Some text<span><br />Some text</span></a></li>
</ul>

puis dans votre css, définissez simplement le contenu de l'intervalle en gras et masquez-le avec visibilité: caché, afin qu'il conserve ses dimensions. Ensuite, vous pouvez ajuster les marges des éléments suivants pour les adapter correctement.

Je ne sais pas si cette approche est compatible avec le référencement.

Je viens de résoudre le problème avec la solution "fantôme". Cela semble le plus simple et le plus efficace.

nav.mainMenu ul li > a:hover, nav.mainMenu ul li.active > a {
    text-shadow:0 0 1px white;
}

Pas besoin de répéter l'ombre trois fois (le résultat était le même pour moi).

J'ai eu un problème similaire au vôtre. Je voulais que mes liens deviennent audacieux lorsque vous les survolez, non seulement dans le menu mais aussi dans le texte. Comme vous pouvez le deviner, ce serait une vraie corvée de découvrir toutes les différentes largeurs. La solution est assez simple:

Créez une boîte qui contient le texte du lien en gras mais coloré comme votre arrière-plan et mais votre vrai lien au-dessus. Voici un exemple de ma page:

CSS:

.hypo { font-weight: bold; color: #FFFFE0; position: static; z-index: 0; }
.hyper { position: absolute; z-index: 1; }

Bien sûr, vous devez remplacer # FFFFE0 par la couleur d'arrière-plan de votre page. Les z-indices ne semblent pas nécessaires mais je les mets quand même (car l'élément "hypo" apparaîtra après l'élément "hyper" dans le code HTML). Maintenant, pour mettre un lien sur votre page, incluez les éléments suivants:

HTML:

You can find foo <a href="http://bar.com" class="hyper">here</a><span class="hypo">here</span>

Le deuxième "ici" sera invisible et caché sous votre lien. Comme il s'agit d'une boîte statique avec le texte de votre lien en gras, le reste de votre texte ne se déplacera plus car il est déjà déplacé avant de passer la souris sur le lien.

J'espère que j'ai pu aider :).

Si longtemps

Vous pouvez travailler avec la propriété "margin":

li a {
  margin: 0px 5px 0px 5px;
}

li a:hover {
  margin: 0;
  font-weight: bold;
}

Assurez-vous simplement que les marges gauche et droite sont suffisamment grandes pour que l'espace supplémentaire puisse contenir le texte en gras. Pour les mots longs, vous pouvez choisir différentes marges. C'est juste une autre solution de contournement, mais faire le travail pour moi.

J'aime plutôt utiliser text-shadow. Surtout parce que vous pouvez utiliser des transitions pour animer l'ombre du texte.

Tout ce dont vous avez vraiment besoin est:

a {
  transition: text-shadow 1s;
}
a:hover {
  text-shadow: 1px 0 black;
}

Pour une navigation complète, consultez ce jsfiddle: https://jsfiddle.net/831r3yrb/

Prise en charge du navigateur et plus d'informations sur text-shadow: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Je déconseille de changer de police (°) en survol. Dans ce cas, ce sont juste les éléments de menu qui bougent un peu, mais j'ai vu des cas où le paragraphe complet est reformaté parce que l'élargissement provoque un retour à la ligne supplémentaire. Vous ne voulez pas que cela se produise lorsque la seule chose que vous faites est de déplacer le curseur; si vous ne faites rien, la mise en page ne devrait pas changer.

Le décalage peut également se produire lors du basculement entre normal et italique. J'essaierais de changer les couleurs ou d'activer le soulignement si vous avez de la place sous le texte. (le soulignement doit rester éloigné de la bordure inférieure)

Je serais hué si j'utilisais des polices de commutation pour ma classe de conception de formulaire :-)

(°) Le mot police est souvent mal utilisé. "Verdana" est une police de caractères , "Verdana normal" et "Verdana bold" sont des polices différentes de la même police de caractères.

J'utilise la solution text-shadow comme certaines autres mentionnées ici:

text-shadow: 0 0 0.01px;

la différence est que je ne spécifie pas la couleur de l'ombre, donc cette solution est universelle pour toutes les couleurs de police.

Une autre approche consisterait à "émuler" du texte en gras via text-shadow. Cela a le bonus (/ malus, selon votre cas) pour fonctionner également sur les icônes de police.

   nav li a:hover {
      text-decoration: none;
      text-shadow: 0 0 1px; /* "bold" */
   }

Un peu hacky, même si cela vous évite de dupliquer du texte (ce qui est utile si c'est beaucoup, comme c'était le cas dans mon cas).

C'est la solution que je préfère. Cela nécessite un peu de JS mais vous n'avez pas besoin que votre propriété title soit exactement la même et votre CSS peut rester très simple.

$('ul a').each(function() {
  $(this).css({
    'padding-left': 0,
    'padding-right': 0,
    'width': $(this).outerWidth()
  });
});

li, a { display: inline-block; }
a {
  padding-left: 10px;
  padding-right: 10px;
  text-align: center; /* optional, smoother */
}
a:hover { font-weight: bold; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>

Et ça? Une solution sans Javascript - CSS3.

http://jsfiddle.net/u1aks77x/1/

ul{}
li{float:left; list-style-type:none; }
a{position:relative; padding-right: 10px; text-decoration:none;}
a > .l1{}
a:hover > .l1{visibility:hidden;}
a:hover > .l2{display:inline;}
a > .l2{position: absolute; left:0; font-weight:bold; display:none;}

<ul>
  <li><a href="/" title="Home"><span class="l1">Home</span><span class="l2">Home</span></a></li>
  <li><a href="/" title="Contact"><span class="l1">Contact</span><span class="l2">Contact</span></a></li>
  <li><a href="/" title="Sitemap"><span class="l1">Sitemap</span><span class="l2">Sitemap</span></a></li>
</ul>

Solution pas très élégante, mais "qui marche":

a
{
    color: #fff;
}

a:hover
{
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

J'ai combiné un tas de techniques ci-dessus pour fournir quelque chose qui ne craint pas totalement avec js désactivé et qui est encore mieux avec un peu de jQuery. Maintenant que les navigateurs prennent en charge l'espacement des lettres sous-pixels s'améliore, il est vraiment agréable de l'utiliser.

jQuery(document).ready(function($) {
  $('.nav a').each(function(){
      $(this).clone().addClass('hoverclone').fadeTo(0,0).insertAfter($(this));
    var regular = $(this);
    var hoverclone = $(this).next('.hoverclone');
    regular.parent().not('.current_page_item').hover(function(){
      regular.filter(':not(:animated)').fadeTo(200,0);
      hoverclone.fadeTo(150,1);
    }, function(){
      regular.fadeTo(150,1);
      hoverclone.filter(':not(:animated)').fadeTo(250,0);
    });
  });
});

ul {
  font:normal 20px Arial;
  text-align: center;
}
li, a {
  display:inline-block;
  text-align:center;
}
a {
  padding:4px 8px;
  text-decoration:none;
  color: #555;
}

.nav a {
  letter-spacing: 0.53px; /* adjust this value per font */
}
.nav .current_page_item a,
.nav a:hover {
  font-weight: bold;
  letter-spacing: 0px;
}
.nav li {
  position: relative;
}
.nav a.hoverclone {
  position: absolute;
  top:0;
  left: 0;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li class="current_page_item"><a  href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

Il vaut mieux utiliser un :: avant au lieu d' un :: après comme ceci:

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.breadcrumb li, 
.breadcrumb li a {
  display: inline-block;
}

.breadcrumb li:not(:last-child)::after {
  content: '>'; /* or anything else */
  display: inline-block;
}

.breadcrumb a:hover {
  font-weight: bold;
}

.breadcrumb a::before {
  display: block;
  content: attr(data-label);
  font-weight: bold;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

<ul class="breadcrumb">
  <li><a data-label="one" href="https://www.google.fr/" target="_blank">one</a></li>
  <li><a data-label="two" href="https://duckduckgo.com/" target="_blank">two</a></li>
  <li><a data-label="three" href="#">three</a></li>
</ul>

Pour plus de détails: https://jsfiddle.net/r25foavy/

J'ai corrigé le menu lorsque je survole un succès audacieux. Il supporte responsive, voici mon code:

(function ($) {
'use strict';

$(document).ready(function () {
    customWidthMenu();
});
$(window).resize(function () {
    customWidthMenu();
});
function customWidthMenu() {
    $('ul.nav li a').each(function() {
        $(this).removeAttr('style');
        var this = $(this);
        var width = this.innerWidth();
        this.css({'width': width + 12});
    });
}})(jQuery);

Si vous n'êtes pas opposé à l'utilisation de Javascript, vous pouvez définir la bonne largeur une fois la page affichée. Voici comment je l'ai fait (en utilisant Prototype):

$$('ul.nav li').each(this.setProperWidth);

setProperWidth: function(li)
{
  // Prototype's getWidth() includes padding, so we 
  // have to subtract that when we set the width.
  var paddingLeft = li.getStyle('padding-left'),
      paddingRight = li.getStyle('padding-right');

  // Cut out the 'px' at the end of each padding
  paddingLeft = paddingLeft.substring(0,paddingLeft.length-2);
  paddingRight = paddingRight.substring(0,paddingRight.length-2);

  // Make the li bold, set the width, then unbold it
  li.setStyle({ fontWeight: 'bold' });
  li.setStyle({ width: (li.getWidth() - paddingLeft - paddingRight) + 'px'});
  li.setStyle({ fontWeight: 'normal', textAlign: 'center' });
}

Je ne peux vraiment pas le supporter quand quelqu'un vous dit de ne pas faire quelque chose de cette façon quand il y a une solution simple au problème. Je ne suis pas sûr des éléments li, mais je viens de résoudre le même problème. J'ai un menu composé de balises div.

Définissez simplement la balise div sur "display: inline-block". Inline afin qu'ils s'assoient côte à côte et bloquent pour que vous puissiez définir une largeur. Il suffit de définir la largeur suffisamment large pour accueillir le texte en gras et aligner le centre du texte.

(Remarque: il semble supprimer mon code HTML [ci-dessous], mais chaque élément de menu était entouré d'une balise div avec l'ID correspondant et le nom de classe SearchBar_Cateogory. <div id="ROS_SearchSermons" class="SearchBar_Category">

HTML (j'avais des balises d'ancrage enroulées autour de chaque élément de menu, mais je n'ai pas pu les soumettre en tant que nouvel utilisateur)

<div id="ROS_SearchSermons" class="SearchBar_Cateogry bold">Sermons</div>|
<div id="ROS_SearchIllustrations" class="SearchBar_Cateogry">Illustrations</div>|
<div id="ROS_SearchVideos" class="SearchBar_Cateogry">Videos</div>|
<div id="ROS_SearchPowerPoints" class="SearchBar_Cateogry">PowerPoints</div>|
<div id="ROS_SearchScripture" class="SearchBar_Cateogry">Scripture</div>|

CSS:

#ROS_SearchSermons { width: 75px; }
#ROS_SearchIllustrations { width: 90px; }
#ROS_SearchVideos { width: 55px; }
#ROS_SearchPowerPoints { width: 90px; }
#ROS_SearchScripture { width: 70px; }

.SearchBar_Cateogry
{
    display: inline-block;
    text-align:center;
}

essaye ça:

.nav {
  font-family: monospace;
}

Vous pouvez également essayer les marges négatives si le texte en gras est plus large que le texte normal. (pas toujours) L'idée est donc d'utiliser des classes à la place pour styliser l'état: hover.

jQuery:

 $(".nav-main .navbar-collapse > ul > li > a").hover(function() {
    var originalWidth = $(this).outerWidth();

    $(this).parent().addClass("hover");
    $(this).css({
       "margin-left": -(($(this).outerWidth() - originalWidth) / 2),
       "margin-right": -(($(this).outerWidth() - originalWidth) / 2)
    });
 },
 function() {
    $(this).removeAttr("style");
    $(this).parent().removeClass("hover");
 });

CSS:

ul > li > a {
    font-style: normal;
}

ul > li > a.hover {
    font-style: bold;
}

J'espère que je pourrais aider!