Вот мой вариант решения вертикального меню.
Правда я пошел более сложным путем - вывод пунктов меню в таблице. Дело в том, что мне нужно было, что бы изменялся фон при наведении мыши.
Возможно я сделал коряво и не рационально, но sorry... я не программер и не кодер, и это первый опыт работы с MODx. Не обессутьте, а если что не так, подскажите как сделать лучше.
Таблица вместо UL
Пример на сайте
http://www.porsr.com.ua
Вызывающий HTML в шаблоне:
…
<!-- Начало МЕНЮ -->
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0" class="menu">
[!Menu? &startId=`0`!]
</table>
<!-- Конец МЕНЮ -->
…
--------------------------------
Скопировал стиппет Wayfinder в новый – Menu и изменил/прописал параметры:
$hideSubMenus : TRUE – не выводить подпункты меню;
$rowTpl : ’menu’
$hereTpl : ’aktiv_menu’ - menu и menu_aktiv – Созданные чанки:
aktiv_menu - Вывод ссылки меню активной страницы:
<tr>
<td width="7%" valign="middle" bgcolor="#7DB3E2" onmouseout="bgColor=’#7DB3E2’" onmouseover="bgColor=’#68A4D6’"> <img src="images/str_menu.gif" width="9" height="5" hspace="5"></td>
<td align="left" valign="middle" bgcolor="#7DB3E2" onmouseout="bgColor=’#7DB3E2’" onmouseover="bgColor=’#68A4D6’">
<a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]><span class="menu_aktiv">[+wf.linktext+]</span></a>
</td>
</tr>
[+wf.wrapper+]
menu - Вывод всех пунктов меню:
<tr>
<td width="5%" valign="middle" bgcolor="#7DB3E2" onmouseout="bgColor=’#7DB3E2’" onmouseover="bgColor=’#68A4D6’"><img src="images/str_menu.gif" width="9" height="5" hspace="5"></td>
<td align="left" valign="middle" bgcolor="#7DB3E2" onmouseout="bgColor=’#7DB3E2’" onmouseover="bgColor=’#68A4D6’">
<a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]><span class="menu">[+wf.linktext+]</span></a>
</td>
</tr>
[+wf.wrapper+]
menu и menu_aktiv - стили прописанные в CSS:
.menu_aktiv {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000099;
text-decoration: none;
}
.menu_aktiv a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000099;
text-decoration: none;
}
.menu_aktiv a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000099;
text-decoration: none;
}
.menu_aktiv a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000099;
text-decoration: none;
}
.menu_aktiv a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000099;
text-decoration: none;
}
.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: none;
}
.menu a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: none;
}
.menu a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: none;
}
.menu a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: none;
}
.menu a:active{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: none;
В строках:
<td align="left" valign="middle" bgcolor="#7DB3E2" onmouseout="bgColor=’#7DB3E2’" onmouseover="bgColor=’#68A4D6’">
описаны параметры для того, что бы при наведении мыши изменялся цвет ячеек таблицы.
В ячейке:
<td width="5%" valign="middle" bgcolor="#7DB3E2" onmouseout="bgColor=’#7DB3E2’" onmouseover="bgColor=’#68A4D6’"><img src="images/str_menu.gif" width="9" height="5" hspace="5"></td>
выводится картинка «Стрелка».
