Как изменить пункт (ы) в стандартном меню (скрипты для юКоз, uCoz)
Как изменить один пункт в стандартном меню
Этот вопрос прозвучал на форуме юКоз (uCoz ) и, ответа на него, полного, приемлемого и с примерами, не нашлось. Исправляю эту ситуацию так, как считаю возможным.
Сам вопрос, если интересно, звучал вот так:
Quote (VanoONLINE)
Здравствуйте. Подскажите, как в стандартном 956ом дизайне изменить цвет одной строчки в меню. Как менять цвет всего меню понятно (в css)
...
Итак. Как же изменить строчку в стандартном, генерируемом системой, меню, который вставляется в шаблон оператором $SMЕNU_1$, а само меню формируется и изменяется/корректируется в «Конструкторе меню»?
Выходов, как минимум несколько.
Задать свой класс в Конструкторе меню ...
И прописать соответствующие стили к установленным классам в CSS
Но, только для ссылок - элементов «a», иногда это не совсем то ...
Либо с помощьюJavaScript - любому элементу меню. А если уж быть конкретным, то с совмещением чистого JavaScript и библиотеки (фреймворка)jQuery, для удобства.
Информация:
Если у вас сайт на хостинге юКоз, и вы не совершали никаких действий по отключению скрипта - jQuery у вас есть, так как подключена «по умолчанию». Это, тот самый, скрипт «u.js» - который включает в себя эту библиотеку (фреймворк)(v1.3.2 на момент написания).
Для примера, приведу фрагмент исходного кода меню. Вот он:
Как четко видно по исходнику, меню имеет свой ID по которому его проще всего «вычислить» на странице. Так и поступим. Причём, каждое меню, если их несколько, имеет свой, уникальный в пределах страницы, ID.
Изменять пункты меню, можно как прописывая дополнительные стили к ним, так и через CSS, добавляя свой класс к необходимому (нужному) элементу.
Второе - лично мне ближе (я считаю, что так более грамотно управлять отображением элементов дизайна).
Назначаем класс одному элементу списка (меню)
Допустим, вам нужно прописать другой цвет фона к 3-му пункту и всё. Сделать это можно/лучше найдя элемент по его индексу.
Где: $(document).ready(function() - Ожидаем когда объектная модель документа (DOM) будет готова к использованию.
$('#uMenuDiv1 li:eq(2)') - ищем третий пункт li:eq(2) - отсчёт идет с нуля - в блоке с ID = «uMenuDiv1». Пункты в стандартном меню - это элементы неупорядоченного списка, то есть элементы «li». Что, кстати, видно по коду.
.addClass('myClass'); - добавляем (если есть, если нет - назначаем) найденному элементу класс «myClass».
или как во втором случае:
.css({backgroundColor:'#F00'}); - прописываем ему стиль «background-color:#F00;» - то есть фоновый цвет - красный.
Но, зачастую, не всегда, но всё же, бывает нужно иметь «под рукой» несколько, если не все элементы меню, причем с разными классами. В таком случае, проще скриптом пройтись, перебрать все элементы меню, и назначить им класс автоматически, в зависимости от «индекса» данного элемента.
$('#uMenuDiv1 ul.uMenuRoot>li') - выбираем всех прямых потомков «ul.uMenuRoot» - то есть все верхние элементы «li».
for(var i=0;i<b;i++){a[i].className+=' myClass'+[i];}; - проходимся по ним циклом, и назначаем (добавляем) класс, в зависимости от порядкового номера элемента на текущий момент цикла - a[i].className+=' myClass'+[i];
Где:
a[i] - текущий элемент.
.className+=' myClass'+[i] - добавляем класс плюс номер элемента.
Получаем диапазон классов начиная от «myClass0» и заканчивая, в данном случае - «myClass15» .... В зависимости от количества пунктов в меню - b=a.length;.
Далее - мы можем управлять любым элементом меню при помощи стилей:
$('#uMenuDiv1 ul.uMenuRoot>li:contains("Обратная")') - выбираем всех прямых потомков «ul.uMenuRoot» - то есть все верхние элементы «li» в которых есть текст, в данном случае - со словом «Обратная».
