Вертикальное раздвижное меню на Ucoz. Продолжение

Вертикальное раздвижное меню на Ucoz. Продолжение Обращу Ваше внимание, что эта статья для тех, кто уже ознакомился с предыдущей статьей и получил рабочее меню с рабочими стилями. Теперь давайте добавим следующую характеристику. Сделаем так, чтобы при открытии страницы, принадлежащей одному из подразделов меню, эти подразделы открывались. Будем работать с тем же кодом, что и в предыдущей статье:
Code
<a onclick=»hide(‘sub1’)» class=»menu2″ > Дети</a><br>  
   
  <span id=»sub1″ style=»display: none; «>  
  <a href=»http://otlichnica.ucoz.ru/publ/12″ class=»menu2sub»> Здоровье ребенка</a><br>  
  <a href=»http://otlichnica.ucoz.ru/publ/11″ class=»menu2sub»> Воспитание детей</a><br>  
  <a href=»http://otlichnica.ucoz.ru/publ/10″ class=»menu2sub»> Развитие ребенка</a><br>  
  <a href=»http://otlichnica.ucoz.ru/publ/19″ class=»menu2sub»> Няня для ребенка</a><br>  
  </span>
Здоровье, воспитание, развитие ребенка и няня для ребенка — это все категории раздела Дети, который имеет идентификатор 9 и вот ссылка на него http://otlichnica.ucoz.ru/publ/9 Обратиться к этой переменной можно с помощью кода $SECTION_URL$

Чтобы наши подпункты были открыты, надо убрать display: none. Все это реализуется следующим образом:
Code
<?if($SECTION_URL$==’http://otlichnica.ucoz.ru/publ/9’) ?><span id=»sub1″>
  <?else?><span id=»sub1″ style=»display: none;»> <?endif?>  
  <a href=»http://otlichnica.ucoz.ru/publ/12″ class=»menu2sub»> Здоровье ребенка</a><br>  
  <a href=»http://otlichnica.ucoz.ru/publ/11″ class=»menu2sub»> Воспитание детей</a><br>  
  <a href=»http://otlichnica.ucoz.ru/publ/10″ class=»menu2sub»> Развитие ребенка </a><br>  
  <a href=»http://otlichnica.ucoz.ru/publ/19″ class=»menu2sub»> Няня для ребенка </a><br>  
  </span>
Вот и все. Теперь при открытии любой странички раздела 9 эти подпункты будут открыты. Обращу внимание, что у Вас могут быть и другие варианты. Кроме $SECTION_URL$ есть и другие переменные, которые можно использовать. Все они представлены в Управление дизайном(шаблоны) для каждой странички внизу под окном редактирования. Чтобы знать, какую переменную они возвращают, если Вы не уверены в ней, достаточно просто в конце перед закрывающим тегом вставить ее и посмотреть на результат.

А теперь усложним задачу. Теперь нам надо выделить тот подпункт, который сейчас активен.
Для этого в первую очередь нужно добавить в css еще один класс, описывающий активный подпункт. У нас он будет называться menu2subA
Вот как он прописан в таблице стилей у меня
.menu2subA {background: #EEE;border: 1px dotted #CCC;float: left;margin:2px;padding:5px;width: 167px;font-weight:bold;}
a.menu2subA:link {text-decoration:none; color:#39435D}
a.menu2subA:active {text-decoration:underline; color:#39435D}
a.menu2subA:visited {text-decoration:none; color:#39435D}
a.menu2subA:hover {text-decoration:none; color:#A1B144}
Т.е. он аналогичен menu2sub , просто добавлен жирный шрифт font-weight:bold;
Теперь нам надо определить, когда нужно поставить этот класс.
Тут придется внести существенные изменения для каждого из подпунктов. Приведу код для подпункта Здоровье ребенка
Code<a href=»http://otlichnica.ucoz.ru/publ/12″ <?if($CAT_URL$=’http://otlichnica.ucoz.ru/publ/12′ or $CID$=12)?>class=»menu2subA»<?else?>class=»menu2sub»<?endif?>> Здоровье ребенка</a><br>
Поясняю. Я использую переменные $CAT_URL$ — она срабатывает на странице материалов категории и $CID$=12 — она срабатывает на странице самого материала. Стоит условие, если текущая категория 12, то устанавливаем для ссылки класс menu2subA , иначе menu2sub . Подобное надо сделать для всех подпунктов.
Работа утомительная, но не так уж и много пунктов бывает в меню. Это ведь разовая работа, зато красивая.
Уверена, что у Вас все равно возникнут вопросы — задавайте!

Комментарии на Facebook