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>
margin-top: -1px
do:after
uniknięcia tworzenia przestrzeni 1px wysokości.:
vs::
„Każda przeglądarka obsługująca podwójną::
składnię CSS3 obsługuje również:
samą składnię, ale IE 8 obsługuje tylko pojedynczy dwukropek, więc na razie zaleca się używanie pojedynczego dwukropka, aby uzyskać najlepszą obsługę przeglądarki”. css-tricks.com/almanac/selectors/a/after-and-beforeUL
luba::after
, innymi słowy - zresetuj wszystkie wypełnienia / marginesy / wysokości linii / rozmiary czcionek itp.Rozwiązaniem zagrożonym jest fałszywe pogrubienie za pomocą cienia tekstu, np .:
Dla lepszego porównania stworzyłem następujące przykłady:
Przejście na
text-shadow
naprawdę niską wartośćblur-radius
spowoduje, że efekt rozmycia nie będzie tak widoczny.Ogólnie rzecz biorąc, im więcej powtórzysz,
text-shadow
tym odważniejszy będzie twój tekst, ale jednocześnie tracisz oryginalny kształt liter.Ostrzegam, że ustawienie
blur-radius
uł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.źródło
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.
źródło
Innym pomysłem jest użycie
letter-spacing
źródło
Jedna linia w jquery:
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.
źródło
ul.nav li a
przeza
prace?Rozwiązanie CSS3 - eksperymentalne
(Fałszywa śmiałość)Zastanawiałem się nad innym rozwiązaniem, którego nikt tutaj nie zaproponował. Jest tak zwana właściwość,
text-stroke
która będzie do tego przydatna.Tutaj celuję w tekst wewnątrz
span
tagu i gładzimy go pikselem,black
który będzie symulowałbold
styl 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-stroke
można znaleźć w CanIUse .Tylko do dzielenia się dodatkowymi rzeczami, możesz użyć,
-webkit-text-stroke-width: 1px;
jeśli nie chcesz ustawićcolor
swojego obrysu.źródło
Możesz użyć czegoś takiego
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.
źródło
Właśnie rozwiązałem problem z rozwiązaniem „cienia”. Wydaje się najprostszy i najskuteczniejszy.
Nie trzeba powtarzać cienia trzy razy (wynik był dla mnie taki sam).
źródło
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:
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:
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
źródło
Możesz pracować z właściwością „margin”:
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.
źródło
Zamiast tego wolę używać cienia tekstu. Zwłaszcza, że możesz używać przejść do animowania cienia tekstu.
Wszystko, czego naprawdę potrzebujesz, to:
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
źródło
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.
źródło
źródło
Korzystam z rozwiązania text-shadow, jak wspomniano tutaj:
różnica polega na tym, że nie określam koloru cienia, więc to rozwiązanie jest uniwersalne dla wszystkich kolorów czcionek.
źródło
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.
Trochę hacky, choć oszczędza to powielania tekstu (co jest przydatne, jeśli jest dużo, jak w moim przypadku).
źródło
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.
źródło
A co z tym? Javascript - bezpłatne rozwiązanie CSS3.
http://jsfiddle.net/u1aks77x/1/
źródło
Niezbyt eleganckie rozwiązanie, ale „działa”:
źródło
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ć.
źródło
Lepiej jest użyć :: before zamiast :: :: w następujący sposób:
Aby uzyskać więcej informacji: https://jsfiddle.net/r25foavy/
źródło
a::before
byłby lepszy niża::after
? Wydaje się, że to kluczowy element twojej odpowiedzi, ale nie jest oczywiste, dlaczego w tym przypadku jedno jest lepsze od drugiego.Naprawiłem menu, gdy najechałem odważnym sukcesem. Obsługuje responsive, to jest mój kod:
źródło
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):
źródło
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)
CSS:
źródło
Spróbuj tego:
źródło
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:
CSS:
Mam nadzieję, że mógłbym pomóc!
źródło