Меню

Как сделать каждый пункт меню разного цвета



Как изменить стиль отдельного пункта меню или отдельной рубрики

В предыдущей статье я сообщил вам о создании на блоге страницы “Поддержать блог”. После добавления этой страницы в меню появился еще один стандартный пункт такой же как “О сайте”, “Карта сайта” и т.п. Мне захотелось выделить его каким-то другим цветом, чтобы он отличался от других и немного привлекал на себя внимание. =)

В этой статье я расскажу вам как можно изменить цвет, да и стиль в целом, для отдельно взятого пункта меню. Аналогичное можно сделать и с отдельно взятой рубрикой, если у вас возникнет необходимость каким-то образом выделить название конкретной категории.

В WordPress при выводе списка страниц к каждому элементу этого списка добавляются классы page_item и page-item-xxx, где xxx – это номер страницы.

Аналогично и для рубрик: cat-item и cat-item-xxx, где xxx – это номер рубрики.

Например, в мое блоге для пункта “Поддержать блог” был добавлен класс page-item-996.

Узнать какой класс добавлен в вашем случае тому или иному пункту можно просто посмотрев код элемента нужного пункта.

Теперь, если вы будете изменять CSS свойства для класса page_item, то эти изменения затронут все пункты меню, а если вам нужно изменить стиль конкретного пункта, то прописывайте соответствующие свойства для класса page-item-xxx.

В моём случае мне нужно прописать свойства для класса page-item-996.

Источник

Drupal Русскоязычное сообщество

Помогите с советом!
Как создать пункты меню разного цвета?

Никаких модулей для меню не использую. Стили задаются для всего меню в целом. А мне надо каждый пункт меню раскрасить (фон) своим конкретным цветом.
Пробовал средствами JavaScript перебирать все пункты меню вызовом функции GetElementByTagName(«а»), которая возвращает массив, и для конкретных елементов массива менял свойства тега, но есть неувязочка. При раскрытии пункта меню меняется количество тегов . , которые я искал скриптом, и у меня нет возможности на каждой странице написать скрипт и посчитать какой тег на каком месте в массиве.

Как решить эту задачку? Подскажите.

  • Drupal6
  • Блог
  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Комментарии

Стили задаются для всего меню в целом.

Там классы задаются для всех пунктов мень один и тот же:

функция theme_links(); вам в руки.

Нашел функцию в файле \include\theme.inc.

А что надо дописать чтоб например для каждого пункта меню был свой ID независимо от выбраного пункта меню(тоесть открытой страницы) или раскрытого\закрытого пункта?

Вы с php дружите?
А с темизацией?

Дружим с php. С темизацией не очень, потому как не знаю откуда этот термин. Если создание тем — то да, сам делал, взяв за основы стандартные темы.
В принципе функция theme_links(); читабельна по коду и мне полностью понятна, что и где там делается.
Проблема в следующем — как сделать какой-то счетчик, который можно было бы использовать в этой функции, и который не зависел бы от глубины меню.

А где, когда и сколько раз вызывается эта фуннкция?

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии

А где, когда и сколько раз вызывается эта фуннкция?

счетчик там уже есть это $i
Вызывается она везде, где строятся списки из ссылок кроме праймари и секондари меню, они по умолчанию идут с уникальными классами для каждого пункта.
Подебажьте и сразу все поймете

  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Читайте также:  Каким бывает цвет океан

Решено с помощью JacaScript: получил обьект-контейнер с меню, перебрал в нём все тэги . / a > , из них с теми, у которых свойство href удовлетворяет необходимое условие, поменял стиль (раскрасил).

Источник

Изменение цвета для отдельного пункта меню

Как указать значение для отдельного пункта таблицы?
Например, у меня есть такая таблица

  • Красный
  • Зеленый .

Как вычислить середину высоты пункта родительского меню для выравнивания дочернего пункта
Нужно расположить открывающийся дочерний пункт меню (третьего уровня) его верхней границей по.

Изменение фона текущего пункта меню
Доброго времени суток. Начал писать сайт, изучил пока что только основы Html, самый простой сайт.

Настройки компонентов для всего сайта или для отдельного пункта меню
Здравствуйте.Подскажите пожалуйста,у меня на сайте есть меню.Для каждого пункта меню свои настройки.

Присвойте нужным
класс и задайте им свойства в css.

Я начинающий «специалист»
Вопрос
Для всего меню уже объявлен div и class
Теперь, мы для каждого пункта в меню даем еще один class, как правильно прописать это свойство в css
К примеру .Top-Menu red <

>
Или как?
Что то совсем ничего не получается 🙁

Решение

dimon888951, А как это прописать, не трогая классы?)
Не трогая классы, можно конечно стили прямо внутри тега написать:

Комментарий администратора
Правила форума пункт 5.19
Запрещено размещать ссылки на коды программ, расположенные на других сайтах. Коды программ должны размещаться на форуме.
Ссылка на песочницу — это бонус.

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Не могу понять как сделать изменение цвета выбранного пункта меню
Пробовал через присваивание нового класса не получилось, может кто-то поможет

Реализация каждого отдельного пункта меню с условием
Помогите пожалуйста реализовать пункты текстового меню, всего 5 категорий, но каждое меню должно.

Организовать диалоговое меню: обработка отдельного пункта, при наведении и клике мышкой
Здравствуйте! В Builder c++ -полный ноль. Задание организовать диалоговое меню.Значит я сделал.

Установка цвета фона пункта меню
Добрый день. Нужен совет знатоков Qt. Как установить цвет фона у одного пункта меню (QMenu)?

Изменение содержимого при выборе пункта из меню
Привет, парни, в общем есть один проект: есть пункты меню, допустим (мобильный интернет, домашний.

Изменение пункта меню после прокрутки страницы
Доброго времени суток! Существует меню с пунктами и отдельной ссылкой(справа «Тест») (скрин.

Источник

Как выделить цветом пункты меню фотошопа

Если Вы часто пользуетесь какими-либо командами фотошопа и желали бы их каким то образом выделить цветом, сделать заметными, то Вы будете рады узнать, что фотошоп может это осуществить!

Как Вам такой вид главного меню:

Цветом можно, например, логически сгруппировать команды, которыми Вы чаще всего пользуйтесь, или таким образом в большом меню сделать метку, чтобы быстрее отыскать эту команду, или вообще наоборот, указать цветом то, что не в коем случае использовать нельзя (если пытаетесь отучить себя от пользования какой-то командой). Вообщем найти повод использовать эту возможность будет не трудно.

Выделение пунктов меню цветом

Чтобы открыть окно с настройками, выберите Редактирование — Меню. Откроется окно уже знакомое по уроку как назначить свои комбинации горячих клавиш в фотошопе.

(Кликните, чтобы увеличить)

Обратите внимание на выпадающий список «Меню», выберите в нем какой тип меню следует отобразить для редактирования:

  • меню программы — это командная строка вверху фотошопа (как на первом скриншоте в этой статье);
  • меню панели — оно есть у каждой палитры фотошопа, если нажать на маленькую кнопку в правом верхнем углу, например, так выглядит палитра Операции:

Итак, определившись с тем, какую команду и где нужно выделить, ее нужно будет найти. Для этого опустим свой взгляд ниже в этом же окне.

В зависимости ото того какое меню было выбрано, фотошоп отобразит все команды, систематизированные на большие группы. Если это основное меню программы, то вкладки будут соответствовать названием основных блоков: Файл, Редактирование, Изображение, Слои, Выделение и так далее. Допустим, нужно пометить цветом команду Инверсия. Мы знаем, что она прячется во вкладке Выделение главного меню. Переходим туда, сделав двойной клик по общей группе:

(Кликните, чтобы увеличить)

После этого сделайте клик на строчку «Не показывать». Появится выпадающий список, в котором и выберите будущий цвет для пунктов меню фотошопа. На выбор представлено 7 вариантов цветов: красный, оранжевый, желтый, зеленый, синий, фиолетовый и градации серого.

Аналогичным образом построена работа и с менюшками палитр. Только все команды сгруппированы по названием палитр.

Источник

Как настроить свои стили для меню в WordPress

Вместе с WordPress в комплекте идет мощная система навигации при помощи меню, на основе которой разработчики и администраторы сайтов могут создавать кастомные красивые меню для собственных сайтов. Используя для этой цели редактор меню, пользователь вполне может самостоятельно добавлять и удалять навигационные меню, добавлять новые пункты и вкладки, создавать каскадные меню и выполнять ряд других кастомизаций по своему вкусу.

Когда была написана статья «WordPress плагины для организации меню«, я понял, что в ней речь пошла о плагинах лишь потому, что сам я никогда не старался до конца понять систему настройки и редактирования меню. Именно тогда я сделал себе «зарубку на память» относительно того, чтобы изучить, как создаются навигационные меню в WordPress. Ранее я научился модифицировать уже существующие меню; но в этот раз предлагаю вам вместе со мной научиться созданию собственных меню «с нуля».

Как устроена система меню в WordPress

Начиная с WordPress 3.0 разработчики тем получили возможность самостоятельно задавать навигационные меню в собственных темах для сайта. Большинство современных тем для WordPress поставляются сразу с заданным расположением и структурой меню навигации, так что в подавляющем большинстве случаев у вас не будет необходимости редактировать меню навигации. Но все же, давайте предположим, что у вас появилась необходимость создать меню самостоятельно. Именно в этом случае вам надо сначала разобраться, как работает система меню навигации в WordPress.

На первом шаге при создании меню разработчики тем задают заголовки меню и расположение их на странице путем регистрации меню в структуре темы. Следующим шагом является прикрепление меню к заданным локациям и выбор стилей для отображения. Также разработчик темы может задать поддержку множества навигационных меню в своей теме. И последним шагом в работе с меню является редактирование меню самими пользователями с помощью встроенного редактора Menu Editor.

Регистрация и отображение меню навигации в WordPress

Регистрация меню — сравнительно простая процедура, и все что вам надо, — это задать расположение меню, прописать его регистрацию и задать имя для нового меню в теме сайта:

После регистрации нового меню вы сможете добавлять его к вашим темам оформления сайта. Выглядит это вот так:

Работаем над стилем оформления меню для WordPress

Функция wp_nav_menu позволяет вам задать контейнер для меню, а также значения параметров container id, menu id и menu class. Делается это для того, чтобы позже можно было легко менять стиль вашего меню. Перед тем, как вы углубитесь в настройку стиля для вашего меню WordPress, важно разобраться в классах CSS , которые используются в настройке и работе с меню для WordPress.

Давайте сначала посмотрим на то, как мы будем подгонять стиль для нашего меню навигации:

Теперь мы стилизуем неупорядоченный список, добавим эффекты и создадим вложенные меню:

Стилизуем готовую страницу:

Изучение классов CSS используемых в системе меню для WordPress

WordPress отображает меню в виде неупорядоченного списка. Если вы новичок в работе с CSS, тогда вам стоит остановиться, не читать этот пост дальше, а вместо этого почитать довольно ветхое по времени, но все еще актуальное руководство » CSS Design: Taming Lists » для того, чтобы обрести базовое понимание того, как из неупорядоченного списка создать красивое навигационное меню для своего сайта.

В этом неупорядоченном изначально списке WordPress каждому компоненту меню назначает свой класс. Есть класс для контейнера, который содержит весь неупорядоченный список; есть класс container ID, есть класс css для меню и отдельные классы для каждого типа и компонента меню с собственным css.

Для начала все это может звучать немного запутанно и непонятно, но на практике все не настолько страшно. Здесь так много отдельных классов, потому что WordPress позволяет вам задавать очень много типов меню для своего сайта. Вдруг вы захотите добавить категорию, страницу, настраиваемую внутреннюю или внешнюю ссылку. Каждый тип таких данных определен в WordPress отдельно, и так у дизайнеров есть более широкий набор опций для настройки меню в зависимости от выбранного оформления и стиля вашей темы.

Класс CSS Описание класса
.menu-item Основной класс, который добавляется к каждому пункту в меню.
.menu-item-object-

Этот класс добавляется к каждому пункту меню, который является объектом вида категории, ссылки или тега и т.д.
.menu-item-object-category
.menu-item-object-tag
.menu-item-object-page
.menu-item-object-
.menu-item-type-

Здесь параметр используется либо для параметра “post_type”, либо для параметра “taxonomy”
.menu-item-type-post_type
.menu-item-type-taxonomy
.current-menu-item Класс, который используется на странице, которую в данный момент просматривает пользователь
.menu-item-home Этот класс связан с главной страницей сайта и меню, которое на ней отображается
.page_item Обеспечивает обратную совместимость, когда меню по умолчанию возвращает к wp_page_nav
.page-item-$ID
.current_page_item

Изучение возможностей разработки на базе WordPress — процесс сравнительно легкий и увлекательный. Лично мне даже немного не верится, насколько я смог продвинуться от простого блоггера к человеку, который неплохо может разобраться в коде и работе с CSS, HTML и функциями WordPress. С навигационными меню в WordPress не так сложно справиться, как может показаться на первый взгляд. Для того, чтобы поэкспериментировать и вдохновиться на собственные шаги в этом направлении, скачайте несколько тем для WordPress и посмотрите на то, как в них заданы и работают навигационные меню.

Источник