Обрезка хлебной крошки
В настоящее время я борюсь с проблемой обрезки навигации по хлебным крошкам, чтобы она не разрушала дизайн моего сайта.
Проблема заключается в следующем: Навигация по хлебной крошке имеет фиксированную ширину (скажем, 900 пикселей) - Поэтому, если пользователь переходит к элементу, местоположение которого приводит к появлению хлебной крошки размером более 900 пикселей, мне придется обрезать ее, чтобы вписаться в дизайн.
Итак, часть, в которой я застрял, заключается в следующем: Как я могу решить, сколько обрезать и где обрезать? Я понял что я мог бы просто обрезать переполнение текста в середине хлебной крошки, чтобы это привело к
Некоторые > Навигация> Это>... > слишком > длинный
Но как я могу решить, где резать? И как я смогу сохранить якоря элементов от обрезки?!
Я действительно застрял на этом, есть ли какой-нибудь приемлемый способ решения таких проблем?!
4 answers
Сохраните корневой элемент, удалите следующие элементы, пока не поместится хлебная крошка. Я бы на самом деле рекомендовал вам сделать это в JavaScript, так как тогда у вас были бы методы для вычисления ширины хлебной крошки в пикселях, тогда как в PHP вам пришлось бы использовать фиксированное количество символов в качестве точки останова, что всегда приводило бы к разной длине. Использование JS в любом случае было бы лучше для SEO и тому подобного, так как ссылки все равно были бы там, только скрытые.
Предполагая, что у вас есть простой элемент списка в виде ваша хлебная крошка:
<ul id="breadcrumb">
<li><a href="/">Home</a></li>
<li><a href="/products/">Products</a></li>
<li><a href="/products/hats/">Hats</a></li>
<li><a href="/products/hats/large/">Large</a></li>
<li><a href="/products/hats/large/red/">Red</a></li>
<li><a href="/products/hats/large/red/round/">Round</a></li>
</ul>
Затем вы можете обрезать длину следующим образом (с помощью jQuery):
if($('#breadcrumb').width() > 900) {
$('#breadcrumb li:first').after('<li>...</li>');
while($('#breadcrumb').width() > 900) {
$('#breadcrumb li').eq(2).remove();
}
}
Простой пример и, вероятно, не работает, но должен дать вам некоторое представление.
Кстати, если вы хотите выполнить обрезку в PHP, вы должны сделать это, когда формируется хлебная крошка, если вы хотите, чтобы это было просто. Если вы начнете обрезку после этого, вам придется прибегнуть к некоторым довольно сложным регулярным выражениям или включить в свой проект какой-нибудь синтаксический анализатор DOM, чтобы сохранить привязку бирки целы.
Я понимаю, что мое решение больше ориентировано на дизайн, чем на программирование, но лично я бы не стал урезать хлебные крошки. Вместо этого, если содержимое панировочных сухарей превышает 900 пикселей, я бы наложил png, который переходит от полностью непрозрачного к полной прозрачности, и просто заставил бы его выглядеть так, как будто первая часть панировочных сухарей исчезает. Затем с помощью jQuery я бы прокручивал панировочные сухари влево или вправо, в зависимости от положения мыши над ним (в зависимости от процента слева от правого поля, где центр равен либо 0%, либо 100%). Таким же образом я бы использовал перевернутую версию того же прозрачного изображения png с правой стороны, когда курсор находится ближе к левому краю.
Вот пример, чтобы лучше проиллюстрировать то, что я говорю:
Надеюсь, это поможет!
Предполагая, что вы не хотите, чтобы панировочные сухари сделали перерыв, когда дойдете до конца, вот что вы делаете.
Используйте функцию, которая усекает слишком длинные слова. Поэтому примите решение о том, какой длины должно быть самое длинное слово. После определенного момента вместо того, чтобы продолжать его отображать, вы делаете то же самое, что и обычно... в конце слова и переходите к следующей части хлебной крошки.
Взгляните на эту страницу.
У Тату Улманена есть хорошая идея. Но внешность должна заменить li на span. Позже не будет заполнена целая строка. ссылка Вычисление ширины текста с помощью JavaScript