Гиркало Вадим - программист фрилансер и разработчик (freelancer, developer) сайтов на TYPO3

|

Итак, поставленная задача примерно такова:
1. Домашнюю страницу нужно отобразить изображением - домиком (это 0-й уровень меню)
2. Меню 1-го уровня (About ICH) необходимо отобразить ссылкой серого цвета
3. Меню остальных уровней - обычные ссылки
4. Текущий пункт меню должен быть крупным и жирным
5. Пункты меню должны отображаться задом наперед, как на картинке.

Эту задачу я не решил, если бы не замечательное свойство optionSplit.

Так, что же такое optionSplit и что оно нам дает?

Само название свойства говорит о том, что оно что-то разбивает на части. Так и есть, optionSplit позволяет разбить любую субстанцию на 3 части с помощью специального разделителя - |*|. Эти три части устроены так: первая, последняя и все остальное, что осталось между ними:

...first part... |*| ...middle part... |*| ...last part...

Сразу для наглядности небольшой пример,
ACT.doNotShowLink = 1 |*| 0 |*| 1
Эта конструкция сделает первый и последний элемент меню простым текстом, а все остальные ссылками.

Если пока еще ничего не понятно, то сейчас при решении нашей конкретной задачи станет яснее:
1. Организуем наше меню с помощью списков UL и LI. Создаем скрипт-заготовку:
lib.breadcrumb = HMENU
lib.breadcrumb.special = rootline
lib.breadcrumb.special.range = 0|-1
lib.breadcrumb.wrap = <ul> | </ul>
lib.breadcrumb.1 = TMENU
lib.breadcrumb.1{
noBlur = 1
NO.allWrap = <li> | </li>

ACT = 1
ACT.allWrap = <li> | </li>

CUR = 1
CUR.allWrap = <li> | </li>
CUR.doNotLinkIt = 1
}

2. Делаем первый пункт навигационного меню изображением домика (следите за изменениями ACT.allWrap).

Сначала наш список пунктов меню делим на 3 части:

ACT.allWrap = <li class="firstcrumb">|</li>|*|<li>|</li>|*|<li class="lastcrumb">|</li>

Добавляем для первого меню картинку:
ACT.allWrap = <li class="firstcrumb">|<img src="fileadmin/templates/img/home.png" alt="Home" /></li>|*|<li>|</li>|*|<li class="lastcrumb">|</li>

Делаем изображение ссылкой:
ACT.allWrap = <li class="firstcrumb">|<a href="http://www.domain.com/"><img src="fileadmin/templates/img/home.png" alt="Home" /></a></li>|*|<li>|</li>|*|<li class="lastcrumb">|</li>

Удаляем текстовую ссылку возле домика:
ACT.allWrap = <li class="firstcrumb"><a href="http://www.domain.com/"><img src="fileadmin/templates/img/home.png" alt="Home" /></a></li>|*|<li>|</li>|*|<li class="lastcrumb">|</li>
# здесь делим список всего на 2 части - первый пункт меню и все остальные
# первый пункт меню - не ссылка!
ACT.doNotShowLink = 1 |*| 0

3. Меню 1-го уровня (About ICH) необходимо отобразить ссылкой серого цвета:
Данный пункт меню является вторым по счету и находится в промежутке между первым и последним пунктом меню. Но как ему задать персональный CSS-стиль? Оказывается optionSplit имеет дополнительные возможности по разбиванию на части. Дополнительная разбивка происходит с помощью специального разделителя - ||(две палки!). Таким образом, по левую сторону от первого разделителя |*|, мы создаем индивидуальные настройки для 1-го и 2-го уровня меню:
ACT.allWrap = <li class="firstcrumb"><a href="http://www.domain.com/"><img src="fileadmin/templates/img/home.png" alt="Home" /></a></li>||<li class="secondcrumb">|</li>|*|<li>|</li>|*|<li class="lastcrumb">|</li>
# здесь делим список всего на 2 части - первый пункт меню и все остальные
# первый пункт меню не отображаем
ACT.doNotShowLink = 1 |*| 0

4. Делаем текущий пункт меню крупным и жирным текстом.
CUR = 1
CUR.doNotLinkIt = 1
CUR.allWrap = <li><strong> | </strong></li>


5. Пункты меню должны отображаться задом наперед:
Тут я схитрил и воспользовался услугами CSS, хотя не исключаю, что все можно было сделать и с помощью TS.
ul, ul li{
display:inline;
list-style:none;
}
#navmenu ul{
float:left;
}
#navmenu li{
float:right;
}

Однако, данный способ не работает в злополучном IE7. Поэтому здесь можно выполнить реверс (обратную перестановку) пунктов меню при помощи свойства - itemArrayProcFunc, которое вызывает пользовательскую функцию, написанную на PHP.

Сначала создаем файл tools.php в директории fileadmin/userfuncs/ следующего содержания:
<?php
class user_tools {

function reverseMenuItemProcFunc($I,$conf) {
return array_reverse($I);
}
}
?>

Подключаем и вызываем нашу пользовательскую функцию к скрипту:

includeLibs.myFunc = fileadmin/userfuncs/tools.php
lib.breadcrumb.1.itemArrayProcFunc = user_tools->reverseMenuItemProcFunc

Теперь можно изменить css:
#navmenu li{
float:left;
}


6. Поставим разделитель в виде наклонного слэша между нашими пунктами меню:
ACT.allWrap = <li class="firstcrumb"><span class="delim">/</span><a href="http://www.domain.com/" title="Home"><img src="fileadmin/templates/img/home.png" alt="Home" /></a></li>||<li class="secondcrumb"><span class="delim">/</span>|</li>|*|<li><span class="delim">/</span>|</li>|*|<li class="lastcrumb"><span class="delim">/</span>|</li>


Готовый скрипт выглядит так:
#includeLibs.myFunc = fileadmin/userfuncs/tools.php
lib.breadcrumb = HMENU
lib.breadcrumb.special = rootline
lib.breadcrumb.special.range = 0|-1
lib.breadcrumb.wrap = <div id="navmenu"><ul> | </ul></div>
lib.breadcrumb.1 = TMENU
lib.breadcrumb.1{
noBlur = 1
NO.allWrap = <li> | </li>

ACT = 1
ACT.ATagParams.dataWrap = title="{field:subtitle}"
ACT.allWrap = <li class="firstcrumb"><span class="delim">/</span><a href="http://www.domain.com/" title="Home"><img src="fileadmin/templates/img/home.png" alt="Home" /></a></li>||<li class="secondcrumb"><span class="delim">/</span>|</li>|*|<li><span class="delim">/</span>|</li>|*|<li class="lastcrumb"><span class="delim">/</span>|</li>
ACT.doNotShowLink = 1 |*| 0

CUR = 1
CUR.doNotLinkIt = 1
CUR.allWrap = <li><strong> | </strong></li>
}
# Реверс пунктов меню пользовательской функцией
#lib.breadcrumb.1.itemArrayProcFunc = user_tools->reverseMenuItemProcFunc

Вот мои CSS-стили:

#navmenu ul, #navmenu ul li{
display:inline;
list-style:none;
height:30px;
line-height:30px;
}
#navmenu ul{
float:left;
}
#navmenu li{
float:right;
}

#navmenu strong{
font-size:22px;
color:#333333;
line-height:21px;
}
#navmenu .delim{
color:#333333;
padding:0 7px;
text-align:center;
}
#navmenu .secondcrumb a{
color:#333333;
}
/* end breadcrumb menu */