Я создал горизонтальное меню, используя списки HTML и CSS. Все работает как надо, кроме случаев, когда вы наводите курсор мыши на ссылки. Видите ли, я создал состояние жирного наведения для ссылок, и теперь ссылки меню смещаются из-за разницы в жирном размере.
Я столкнулся с той же проблемой, что и этот пост SitePoint . Однако у поста нет правильного решения. Я искал везде решение и не могу его найти. Конечно, я не могу быть единственным, кто пытается это сделать.
У кого-нибудь есть идеи?
PS: я не знаю ширину текста в пунктах меню, поэтому я не могу просто установить ширину элементов 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к:afterво избежание создания пространства 1px высоты.:vs::«Каждый браузер, который поддерживает::синтаксис CSS3 с двоеточием, также поддерживает только:синтаксис, но IE 8 поддерживает только двоеточие, поэтому на данный момент рекомендуется использовать только двоеточие для лучшей поддержки браузера». css-tricks.com/almanac/selectors/a/after-and-beforeULилиa::after, другими словами - сбросить все отступы / маркировку / высоту строки / размеры шрифта и т. Д.Скомпрометированное решение - подделать жирный шрифт с помощью text-shadow, например:
Для лучшего сравнения я создал эти примеры:
Переход к
text-shadowдействительно низкому значению дляblur-radiusсделает эффект размытия не столь очевидным.В общем, чем больше вы повторяете,
text-shadowтем смелее будет текст, но в то же время теряете первоначальную форму букв.Я должен предупредить вас, что установка
blur-radiusдробей не будет отображаться одинаково во всех браузерах! Safari, например, нужны большие значения, чтобы отобразить его так же, как в Chrome.источник
Если вы не можете установить ширину, то это означает, что ширина будет меняться, когда текст становится жирным. Нет способа избежать этого, кроме как путем компромиссов, таких как изменение отступов / полей для каждого состояния.
источник
Другая идея использует
letter-spacingисточник
Одна строка в jquery:
редактировать: хотя это может привести к решению, следует отметить, что оно не работает в сочетании с кодом в исходном посте. «display: inline» должен быть заменен плавающими параметрами, чтобы настройка ширины была эффективной и чтобы горизонтальное меню работало как задумано.
источник
ul.nav li aнаa?Решение CSS3 - Экспериментальное
(Поддельная смелость)Мысль поделиться другим решением, которое никто не предложил здесь. Есть свойство под названием,
text-strokeкоторое будет полезно для этого.Здесь я нацеливаюсь на текст внутри
spanтега, и мы обводим его пикселем,blackкоторый имитируетboldстиль для этого конкретного текста.Обратите внимание, что это свойство широко не поддерживается, на данный момент (при написании этого ответа) только Chrome и Firefox, кажется, поддерживают это. Для получения дополнительной информации о поддержке браузера
text-strokeвы можете обратиться к CanIUse .Просто для того, чтобы поделиться некоторыми дополнительными вещами, вы можете использовать,
-webkit-text-stroke-width: 1px;если вы не хотите, чтобы установитьcolorдля вашего удара.источник
Вы можете использовать что-то вроде
а затем в вашем CSS просто установите содержимое диапазона жирным шрифтом и скройте его с видимостью: скрытый, чтобы он сохранял свои размеры. Затем вы можете отрегулировать поля следующих элементов, чтобы они подходили по размеру.
Хотя я не уверен, что этот подход оптимизирован для SEO.
источник
Я только что решил проблему с "теневым" решением. Кажется, самый простой и эффективный.
Не нужно повторять тень три раза (результат был для меня одинаковым).
источник
У меня была проблема, похожая на вашу. Я хотел, чтобы мои ссылки выделялись жирным шрифтом, когда вы наводите на них курсор, но не только в меню, но и в тексте. Как вы можете догадаться, это была бы настоящая рутина, вычисляющая все ширины. Решение довольно простое:
Создайте коробку, которая содержит текст ссылки, выделенный жирным шрифтом, но цветной, как фон, но реальная ссылка над ним. Вот пример с моей страницы:
CSS:
Конечно, вам нужно заменить # FFFFE0 на цвет фона вашей страницы. По-видимому, z-индексы не нужны, но я все равно их помещаю (так как элемент «гипо» будет появляться после элемента «гипер» в HTML-коде). Теперь, чтобы разместить ссылку на своей странице, добавьте следующее:
HTML:
Второе «здесь» будет невидимым и скрытым под вашей ссылкой. Поскольку это статическое поле, в котором текст ссылки выделен жирным шрифтом, остальная часть текста больше не будет смещаться, поскольку она уже смещена до того, как вы наведете курсор на ссылку.
Надеюсь, я смог помочь :).
Пока
источник
Вы можете работать со свойством margin.
Просто убедитесь, что левый и правый поля достаточно велики, чтобы дополнительное пространство могло содержать жирный текст. Для длинных слов вы можете выбрать разные поля. Это просто еще один обходной путь, но он делает всю работу за меня.
источник
Мне нравится использовать текстовую тень вместо этого. Тем более, что вы можете использовать переходы для анимации текста-тени.
Все, что вам действительно нужно, это:
Для полной навигации проверьте это jsfiddle: https://jsfiddle.net/831r3yrb/
Поддержка браузера и дополнительная информация о text-shadow: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp
источник
Я бы посоветовал не переключать шрифты (°) при наведении курсора. В данном случае это всего лишь несколько пунктов меню, но я видел случаи, когда весь абзац переформатируется, потому что расширение вызывает дополнительную перенос слов. Вы не хотите, чтобы это произошло, когда единственное, что вы делаете, это перемещаете курсор; если вы ничего не делаете, макет страницы не должен меняться.
Сдвиг также может произойти при переключении между обычным и курсивом. Я бы попробовал изменить цвет или переключить подчеркивание, если у вас есть место под текстом. (подчеркивание должно оставаться четким от нижней границы)
Я был бы воодушевлен, если бы использовал переключающие шрифты для своего класса Form Design :-)
(°) Шрифт слова часто используется неправильно. «Verdana» - это шрифт , «Verdana normal» и «Verdana bold» - это разные шрифты одного и того же шрифта.
источник
источник
Я использую решение для тени текста, как некоторые другие, упомянутые здесь:
разница в том, что я не указываю цвет тени, поэтому это решение универсально для всех цветов шрифта.
источник
Альтернативный подход заключается в том, чтобы «эмулировать» жирный текст с помощью text-shadow. Это имеет бонус (/ malus, в зависимости от вашего случая), чтобы работать также на иконки шрифтов.
Что-то вроде хаки, хотя это спасает вас от дублирования текста (что полезно, если много, как это было в моем случае).
источник
Это решение, которое я предпочитаю. Это требует немного JS, но вам не нужно, чтобы ваше свойство title было таким же, и ваш CSS может оставаться очень простым.
источник
Как насчет этого? JavaScript - бесплатное решение CSS3.
http://jsfiddle.net/u1aks77x/1/
источник
Не очень элегантное решение, но «работает»:
источник
Я объединил кучу методов, описанных выше, чтобы обеспечить что-то, что не полностью отстой с отключенным js и даже лучше с небольшим количеством jQuery. Теперь, когда поддержка браузерами субпиксельного межбуквенного интервала улучшается, его очень приятно использовать.
источник
Лучше использовать :: before вместо a :: after так:
Для получения более подробной информации: https://jsfiddle.net/r25foavy/
источник
a::beforeбыло бы лучше, чемa::after? Это кажется ключевым элементом вашего ответа, но не очевидно, почему одно предпочтительнее другого в этом случае.Я исправил меню при наведении смелого успеха. Это поддерживает отзывчивый, это мой код:
источник
Если вы не против использования Javascript, вы можете установить правильную ширину после показа страницы. Вот как я это сделал (используя Prototype):
источник
Я действительно не могу этого вынести, когда кто-то говорит вам не делать что-то таким образом, когда есть простое решение проблемы. Я не уверен насчет элементов li, но я просто исправил ту же проблему. У меня есть меню, состоящее из тегов div.
Просто установите тег div в «display: inline-block». Встроенный, чтобы они сидели рядом друг с другом и заблокировать, чтобы вы могли установить ширину. Просто установите ширину, достаточную для размещения выделенного текста и выравнивания текста по центру.
(Примечание. Похоже, что он удаляет мой html [ниже], но каждый элемент меню имеет тег div, обернутый вокруг него с соответствующим идентификатором и именем класса SearchBar_Cateogory. Т.е.
<div id="ROS_SearchSermons" class="SearchBar_Category">HTML (у меня были привязанные теги вокруг каждого пункта меню, но я не смог отправить их как новый пользователь)
CSS:
источник
попробуй это:
источник
Вы также можете попробовать отрицательные поля, если полужирный текст шире обычного. (не всегда) Так что идея состоит в том, чтобы использовать классы вместо того, чтобы стилизовать состояние: hover.
JQuery:
CSS:
Я надеюсь, что смогу помочь!
источник