Elementy w linii przesuwają się, gdy są odważne po najechaniu myszą

Stworzyłem horyzontalne menu przy użyciu list HTML i CSS. Wszystko działa tak, jak powinno, chyba że najedziesz myszką na linki. Widzisz, stworzyłem pogrubiony stan najechania na linki, a teraz linki menu zmieniają się z powodu pogrubionej różnicy wielkości.

Napotykam ten sam problem, co ten post SitePoint . Jednak post nie ma odpowiedniego rozwiązania. Wszędzie szukałem rozwiązania i nie mogę go znaleźć. Z pewnością nie mogę być jedynym, który próbuje to zrobić.

Czy ktoś ma jakieś pomysły?

PS: Nie znam szerokości tekstu w elementach menu, więc nie mogę po prostu ustawić szerokości elementów 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>

Sprawdź działający przykład JSfiddle . Chodzi o to, aby zarezerwować miejsce na pogrubioną (lub dowolny :hoverstyl stanu) treść w :beforepseudoelemencie i użyć tagu tytułu jako źródła treści.

Rozwiązaniem zagrożonym jest fałszywe pogrubienie za pomocą cienia tekstu, np .:

cień tekstu: 0 0 0,01 pikseli czarny;

Dla lepszego porównania stworzyłem następujące przykłady:

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>

Przejście na text-shadownaprawdę niską wartość blur-radiusspowoduje, że efekt rozmycia nie będzie tak widoczny.

Ogólnie rzecz biorąc, im więcej powtórzysz, text-shadowtym odważniejszy będzie twój tekst, ale jednocześnie tracisz oryginalny kształt liter.

Ostrzegam, że ustawienie blur-radiusułamków nie spowoduje renderowania tego samego we wszystkich przeglądarkach! Safari na przykład potrzebuje większych wartości, aby renderować je tak samo, jak Chrome.

Jeśli nie możesz ustawić szerokości, oznacza to, że szerokość zmieni się wraz z pogrubieniem tekstu. Nie można tego uniknąć, z wyjątkiem kompromisów, takich jak modyfikowanie marginesów / marginesów dla każdego stanu.

Innym pomysłem jest użycie 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>

Jedna linia w jquery:

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

edycja: Chociaż może to doprowadzić do rozwiązania, należy wspomnieć, że nie działa ono w połączeniu z kodem w oryginalnym poście. „display: inline” należy zastąpić zmiennymi parametrami, aby ustawienie szerokości było skuteczne, a menu poziome działało zgodnie z przeznaczeniem.

Rozwiązanie CSS3 - eksperymentalne

Zastanawiałem się nad innym rozwiązaniem, którego nikt tutaj nie zaproponował. Jest tak zwana właściwość, text-strokektóra będzie do tego przydatna.

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

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

Tutaj celuję w tekst wewnątrz spantagu i gładzimy go pikselem, blackktóry będzie symulował boldstyl dla tego konkretnego tekstu.

Pamiętaj, że ta właściwość nie jest obecnie szeroko obsługiwana (podczas pisania tej odpowiedzi) tylko Chrome i Firefox wydają się to obsługiwać. Więcej informacji na temat obsługi przeglądarki text-strokemożna znaleźć w CanIUse .

Tylko do dzielenia się dodatkowymi rzeczami, możesz użyć, -webkit-text-stroke-width: 1px;jeśli nie chcesz ustawić colorswojego obrysu.

Możesz użyć czegoś takiego

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

a następnie w swoim css po prostu ustaw pogrubioną zawartość i ukryj ją z widocznością: ukryta, aby zachowała swoje wymiary. Następnie możesz dostosować marginesy następujących elementów, aby dopasować je prawidłowo.

Nie jestem jednak pewien, czy takie podejście jest przyjazne SEO.

Właśnie rozwiązałem problem z rozwiązaniem „cienia”. Wydaje się najprostszy i najskuteczniejszy.

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

Nie trzeba powtarzać cienia trzy razy (wynik był dla mnie taki sam).

Miałem problem podobny do twojego. Chciałem, aby moje linki stały się pogrubione, gdy najedziesz na nie kursorem, ale nie tylko w menu, ale także w tekście. Jak się domyślasz, ustalenie różnych szerokości byłoby prawdziwym obowiązkiem. Rozwiązanie jest dość proste:

Utwórz pole zawierające pogrubiony tekst linku, ale w kolorze podobnym do tła, ale prawdziwy link nad nim. Oto przykład z mojej strony:

CSS:

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

Oczywiście musisz zastąpić # FFFFE0 kolorem tła swojej strony. Wskaźniki Z nie wydają się konieczne, ale i tak je umieszczam (ponieważ element „hypo” pojawi się po elemencie „hyper” w kodzie HTML). Teraz, aby umieścić link na swojej stronie, dołącz następujące elementy:

HTML:

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

Drugi „tutaj” będzie niewidoczny i ukryty pod linkiem. Ponieważ jest to pole statyczne z pogrubionym tekstem łącza, reszta tekstu nie będzie się już przesuwać, ponieważ jest już przesunięta przed najechaniem kursorem na link.

Mam nadzieję, że udało mi się pomóc :).

Tak długo

Możesz pracować z właściwością „margin”:

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

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

Upewnij się tylko, że lewy i prawy margines są wystarczająco duże, aby dodatkowe miejsce mogło zawierać pogrubiony tekst. W przypadku długich słów możesz wybrać różne marginesy. To tylko kolejne obejście, ale wykonanie pracy dla mnie.

Zamiast tego wolę używać cienia tekstu. Zwłaszcza, że ​​możesz używać przejść do animowania cienia tekstu.

Wszystko, czego naprawdę potrzebujesz, to:

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

Aby uzyskać pełną nawigację, sprawdź ten jsfiddle: https://jsfiddle.net/831r3yrb/

Obsługa przeglądarki i więcej informacji na temat text-shadow: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Odradzałbym przełączanie czcionek (°) po najechaniu myszą. W tym przypadku poruszają się tylko elementy menu, ale widziałem przypadki, w których cały akapit jest formatowany, ponieważ poszerzenie powoduje dodatkowe zawijanie wyrazów. Nie chcesz, aby tak się działo, gdy jedyne, co robisz, to poruszanie kursorem; jeśli nic nie zrobisz, układ strony nie powinien się zmienić.

Zmiana może nastąpić również podczas przełączania między normalnym a kursywą. Spróbowałbym zmienić kolory lub przełączyć podkreślenie, jeśli masz miejsce pod tekstem. (podkreślenie powinno pozostać wolne od dolnej granicy)

Byłbym oburzony, gdybym użył przełączających czcionek w mojej klasie Form Design :-)

(°) Czcionka słowa jest często niewłaściwie używana. „Verdana” to krój pisma , „Verdana normal” i „Verdana pogrubione” to różne czcionki tego samego kroju pisma.

Korzystam z rozwiązania text-shadow, jak wspomniano tutaj:

text-shadow: 0 0 0.01px;

różnica polega na tym, że nie określam koloru cienia, więc to rozwiązanie jest uniwersalne dla wszystkich kolorów czcionek.

Alternatywnym podejściem byłoby „naśladowanie” pogrubionego tekstu za pomocą cienia tekstu. Daje to bonus (/ malus, w zależności od przypadku) do pracy także z ikonami czcionek.

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

Trochę hacky, choć oszczędza to powielania tekstu (co jest przydatne, jeśli jest dużo, jak w moim przypadku).

To jest rozwiązanie, które wolę. Wymaga trochę JS, ale nie potrzebujesz dokładnie tej samej właściwości title, a twój CSS może pozostać bardzo prosty.

$('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>

A co z tym? Javascript - bezpłatne rozwiązanie 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>

Niezbyt eleganckie rozwiązanie, ale „działa”:

a
{
    color: #fff;
}

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

Połączyłem kilka powyższych technik, aby zapewnić coś, co nie jest do kitu przy wyłączonym js, a jeszcze lepiej z odrobiną jQuery. Teraz, gdy poprawia się obsługa przeglądarek w zakresie odstępów między pikselami, naprawdę warto go używać.

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>

Lepiej jest użyć :: before zamiast :: :: w następujący sposób:

.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>

Aby uzyskać więcej informacji: https://jsfiddle.net/r25foavy/

Naprawiłem menu, gdy najechałem odważnym sukcesem. Obsługuje responsive, to jest mój kod:

(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);

Jeśli nie masz nic przeciwko używaniu Javascript, możesz ustawić odpowiednią szerokość po wyświetleniu strony. Oto jak to zrobiłem (używając Prototypu):

$$('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' });
}

Naprawdę nie mogę tego znieść, gdy ktoś mówi ci, abyś nie robił czegoś w ten sposób, gdy istnieje proste rozwiązanie problemu. Nie jestem pewien co do elementów li, ale właśnie naprawiłem ten sam problem. Mam menu składające się z tagów div.

Wystarczy ustawić tag div na „display: inline-block”. Inline, więc siedzą obok siebie i blokują, że możesz ustawić szerokość. Wystarczy ustawić szerokość wystarczająco szeroką, aby pomieścić pogrubiony tekst i wyrównać środek tekstu.

(Uwaga: Wygląda na to, że usuwam mój HTML [poniżej], ale każdy element menu był owinięty tagiem div z odpowiednim identyfikatorem i nazwą klasy SearchBar_Cateogory. Tj .: <div id="ROS_SearchSermons" class="SearchBar_Category">

HTML (miałem tagi zakotwiczone wokół każdego elementu menu, ale nie byłem w stanie przesłać ich jako nowy użytkownik)

<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;
}

Spróbuj tego:

.nav {
  font-family: monospace;
}

Możesz wypróbować również ujemne marginesy, jeśli pogrubiony tekst jest szerszy niż zwykły. (nie zawsze) Chodzi więc o użycie klas zamiast stylizować stan: 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;
}

Mam nadzieję, że mógłbym pomóc!