Ниже приведен пример. К каждому элементу прикреплено 3 класса, кроме текущего элемента, у которого их 6. Могу ли я как-то сократить это?
<ul id="menu-global-nav" class="sf-menu">
<li id="menu-item-63" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-5 current_page_item menu-item-63"><a href="#">Home</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-30"><a href="#">Services</a>
<ul class="sub-menu">
<li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-39"><a href="#">Case Studies</a></li>
<li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-38"><a href="#">Story Discovery</a></li>
</ul>
</li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-32"><a href="#">Company</a></li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-29"><a href="#">Why Case Studies?</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-28"><a href="#">Case Study Showcase</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-27"><a href="#">Resources</a></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-26"><a href="#">Online Store</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-25"><a href="#">Contact Us</a></li>
</ul>
Я иду против большинства в этом вопросе 🙂
Да, это может быть хорошей идеей, чтобы раздеть его. Лично я сохраняю только
current-xxx
классы типов и заменяю их наactive
иactive-parent
(для активных родительских или предковых элементов).Почему?
Обновленный код:
Обновление: для тех, кто использует этот код,
active-parent
класс больше не требуется (если вам все еще не нужна поддержка IE 6). С помощью дочернего селектора (>
) вы можете эффективно стилизовать активный родительский и активный дочерний элементы любым удобным для вас способом.Не могли бы вы поделиться, как вы удаляете ненужные классы?
Спасибо, что поделились своим кодом, @One Trick Pony. Я попробую это при моей следующей новой установке. Для чего нужны целые числа «10» и «2»? Видел это в другом коде, связанном с меню; ни разу не видел объяснения.
приоритет фильтра (по умолчанию 10) и количество аргументов, переданных перехваченной функции, если оно больше 1.
Я согласен с тем, что инструменты JavaScript могут более эффективно работать с несколькими классами, но это также один из самых простых способов преодолеть отсутствие в IE6 поддержки множественных селекторов. Отклонить это использование как «сумасшедший разговор» никому не поможет.
ЕДИНСТВЕННЫЙ способ управления стилем для IE6 — это как минимум 3 класса для каждого элемента списка? Думаю, нет.
Не единственный способ, но это лучшая бесплатная альтернатива множественным селекторам. Если вы согласны использовать нестандартные приемы CSS или полагаться на JavaScript для исправления недостатков IE6, то есть альтернативы.
Итак, если я «могу» сократить классы, то как?
Мне это не нравится, потому что это в основном бесполезный мусор. 2 класса было бы хорошо для элемента списка. Но 6? Довольно смешно. Знаете ли вы, можно ли управлять этими классами или указывать их в файле функций?
@ Рэй Гулик: Но по большому счету это действительно имеет значение? Просто говорю…
По большому счету, мы все пыль на ветру, но в то же время я хотел бы контролировать, какие классы отображаются в элементах моего списка. Вроде многого и не просишь 😉
Это сводится к тому, чтобы иметь оптимизированное решение, требующее индивидуальной разработки, или решения, которые включают в себя больше, чем необходимо, но являются более гибкими и простыми для поддержки более широкого спектра потребностей. Один не лучше другого, просто оптимизирован для разных целей. Вы можете иметь то, что хотите с WordPress, вам просто нужно написать свой собственный генератор меню.
Функция wp_nav_menu дает вам возможность изменять идентификатор и класс как для контейнера, так и для меню. Но не элементы LI.
Если вы посмотрите на источник, где он создает элементы LI (функция start_el()); Вы можете видеть, что он использует фильтр nav_menu_css_class; Фильтр возьмет предоставленный вами массив (строк) и будет использовать его для построения тегов класса.
Примечание. Из того, что я вижу в коде, если вы передадите ему пустой массив. WordPress по-прежнему будет включать атрибут класса для элемента LI, он просто будет пустым.
Все эти классы предназначены для полезного подключения к javascript для чего-то вроде superfish, а не только из-за IE6.
Кроме того, без такого класса, как
current_page_item
, вы не сможете выделить текущую страницу в навигации.Гибкость является ключом. Добавьте все классы, уникальные для уникальных элементов в список, предоставьте конечному дизайнеру большую гибкость в стилях. Но я согласен, что это куча классов. Достойный HTML-программист, дизайнер мог бы сделать то же самое с гораздо меньшим количеством кода.
РЕДАКТИРОВАТЬ: сделал более ясным, что я имел в виду, без неуважения
Изменено из кода One Trick Pony, так как он не работал у меня с текущей версией WP (3.5.1).
Добавлены пунктирные классы, так как WP теперь включает как подчеркнутые, так и пунктирные версии классов иерархии страниц.
Изменен array_diff -> array_intersect, так как diff возвращает все классы вместо отфильтрованного списка.
Я бы не рекомендовал его урезать. Да, разметка может выглядеть раздутой, но это единственный способ действительно сузить стили, если вы хотите, чтобы ваш сайт хорошо выглядел, скажем, в IE6. Имейте в виду, что IE6 изначально не поддерживает несколько селекторов (т.е. li.menu-item.current сломается и по умолчанию будет li.current), поэтому, если вы делаете какой-нибудь причудливый CSS и хотите, чтобы он работал с IE6, лучше иметь много доступных селекторов классов, чем недостаточно.
Итак, на самом деле вы можете сократить список до class=»menu-item»… но если у вас когда-либо будет меню с более чем одним типом сообщений, вам понадобится menu-item-type- post_type… и если вы хотите сделать фильтрацию посложнее, вам также пригодится класс menu-item-##.
Помните, что никто, скорее всего, никогда не увидит реальный код вашего сайта, и определение нескольких классов ничему не повредит.
@Ray Gulick: Я ненавижу погружаться, но я согласен с @Dan Gale, @EAMann и @Insanity5902. «Раздувание» не вызывает каких-либо ощутимых проблем и позволяет дизайнеру изменять тему меню множеством гибких способов.
Мне интересно, почему вас беспокоит «наворот»? Я знаю, что это некрасиво, но рядом никто никогда этого не увидит. Если это проблема производительности, то в первую очередь нужно решить сотни других вещей, таких как сокращение HTTP-запросов и уменьшение размеров ваших изображений, последнее из которых, вероятно, принесет на порядок больше пользы.