CSS спрайты в WordPress

Я создал спрайт-меню с 5 уровнями. 1-й уровень содержит "HOME" и т. Д., А также "SIGNUP" и "LOGIN". 2-й уровень - это когда 1-й уровень завис. 3-й уровень - когда активен. 4-й уровень аналогичен, однако вместо него есть "Мой СЧЕТ" и "ВЫХОД", а на 5-м уровне только "Мой СЧЕТ" и "ВЫХОД". Как бы я сказал WordPress использовать 4-й, если пользователь вошел в систему и 5-й уровень, если они нажимают / наводят курсор мыши на "Моя учетная запись" и "Выйти". Я использую последнюю версию Wordpress.

Источник

2 ответа

Я бы использовал спрайт в качестве фона меню / кнопок и давал различные уровни различным классам CSS.

Так что для 5-го уровня вы можете использовать класс: hover. Для 4-го уровня вы можете использовать WordPress, если пользователь вошел в функцию, чтобы дать вещи разные классы-так что-то вроде

<?php if ( is_user_logged_in() ) {  ?>
<div class="my-button class-5"></div>
<?php } else { ?>
<div class="my-button class-4"></div>
<?php }; ?>

где для 'class-4' задан фон для вашего спрайта 4-го уровня, а для 'class-5' задан фон для вашего спрайта 5-го уровня.

Источник

Работа с CSS-спрайтами в меню, где каждый элемент является собственным изображением ("Домой", "О...."), очень плохая идея.

  • Это яд для доступности
  • Это может быть вредно для SEO
  • Это много работы, чтобы сохранить спрайт изображения
  • Пункты меню не будут масштабироваться, когда пользователь использует функцию "увеличения" браузера
  • Пользователи с отключенными изображениями не могут видеть, что говорит пункт меню

Трудно дать альтернативное предложение, не видя предполагаемый дизайн, но наиболее распространенным способом, вероятно, является создание <ul> навигация на основе (каждый элемент <li>) и давая каждому элементу фоновое изображение. В зависимости от вашей ситуации, вы можете работать с CSS-спрайтами, чтобы отображать состояния перехода и отсутствия доступа.

Источник
Другие вопросы по тегам