понедельник, 28 июня 2010 г.

Продвинутое меню breadcrumb или осваиваем optionSplit

 


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




Итак, поставленная задача примерно такова:
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 */
среда, 23 июня 2010 г.

Меню для футера (подвала) из столбцов

 




Если есть желание или необходимость сделать в подвале сайта меню состоящее из нескольких столбцов (как изображено на скриншоте), которые содержат пункты меню 1-го и 2-го уровня (черные и синие, соответственно), то могу поделиться следующим TS-кодом:

lib.footermenu = HMENU
lib.footermenu {
#wrap = <div class="footer_menu"> | </div>
# исключаем из нашего меню страницы со следующими id (если нужно что-то скрыть)
excludeUidList = 63,4
entryLevel = 0


1 = TMENU
1 {
noBlur = 1
expAll=1
#wrap = <ul class="footer_menu_bar"> | </ul>

NO {
linkWrap = <li class="footer_menu_item"><h3> | </h3></li>
wrapItemAndSub = <ul class="footer_menu_bar"> | </ul>
stdWrap.htmlSpecialChars = 1
doNotLinkIt = 1
}
CUR = 1
CUR {
linkWrap = <li class="footer_menu_item"><h3> | </h3></li>
wrapItemAndSub = <ul class="footer_menu_bar current"> | </ul>
stdWrap.htmlSpecialChars = 1
doNotLinkIt = 1
}
}

2 = TMENU
2 {
noBlur = 1
expAll=1
#wrap = <ul> | </ul>

NO {
linkWrap = |
wrapItemAndSub = <li class="footer_menu_item"> | </li>
stdWrap.htmlSpecialChars = 1
}
ACT = 1
ACT {
linkWrap = |
wrapItemAndSub = <li class="footer_menu_item current"><span> | </span></li>
stdWrap.htmlSpecialChars = 1
doNotLinkIt = 1
}
}

}

Результатом работы данного скрипта будет генерация HTML-кода такого рода:
<ul class="footer_menu_bar current">
<li class="footer_menu_item">
<h3> ABOUT US </h3>
</li>
<li class="footer_menu_item"><a href="about/vision/">Vision</a></li>
<li class="footer_menu_item"><a href="about/history/">History</a></li>
<li class="footer_menu_item"><a href="about/organisation/">Organisation</a></li>
<li class="footer_menu_item"><a href="about/process-of-harmonisation/">Process of harmonisation</a></li>
<li class="footer_menu_item"><a href="about/faq/">FAQ</a></li>
</ul>
<ul class="footer_menu_bar">
<li class="footer_menu_item">
<h3> ICH PRODUCTS </h3>
</li>
<li class="footer_menu_item"><a href="products/guidelines/">Guidelines</a></li>
<li class="footer_menu_item"><a href="products/meddra/">MedDRA</a></li>
<li class="footer_menu_item"><a href="products/ctd/">CTD</a></li>
<li class="footer_menu_item"><a href="products/electronic-standard/">Electronic standard</a></li>
<li class="footer_menu_item"><a href="products/consideration-documents/">Consideration Documents</a></li>
<li class="footer_menu_item"><a href="products/open-consultation/">Open Consultation</a></li>
</ul>
.
.
.

О себе

Моя фотография
Вадим Гиркало
Фрилансер, веб-разработчик сайтов на базе бесплатной, мощнейшей и очень гибкой CMS системы - TYPO3.
Просмотреть профиль

Позвонить мне в Skype

TOP - 3