Создаем шаблон Joomlа по стандартам - Меню в шаблонах
Мы знаем, что существует множество опций, которые определяют способ отображения меню.
И снова, использование CSS-списков вместо таблиц приводит к уменьшению объема кода и более легкой разметке. После того, как мы настроили отображение всех меню в виде списков, у нас остается всего 12 таблиц (мы увидим, как убрать остальные, используя новую функциональность переопределения вывода в версии 1.5). Помните, что опция «list» (список) есть только в новой версии 1.5, а «flat list» (плоский список) пришла из версии 1.0, и ее использование не рекомендуется.
Списки также более хороши, чем таблицы, потому, что текстовые браузеры, устройства чтения с экрана, браузеры, не поддерживающие CSS или браузеры, в которых отключен CSS, а также поисковые роботы получат более удобный доступ к вашему контенту.
Еще одно из преимуществ использования CSS для меню — это то, что существует множество примеров на сайтах CSS-разработчиков. Посмотрите на любой из них и узнайте, как это можно использовать.
Веб-страница на maxdesign.com [примечание переводчика: судя по всему, сейчас на этом сайте уже нечто другое] предлагает выбор из более 30 меню, и все из них используют идентичный код. Это называется Listamatic. Нам нужно внести небольшие изменения в код, чтобы адаптировать эти меню для Joomla:
Изначально используется следующий код:
<div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="/ #" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a xhref="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div>
Это означает, что существует внешний <div>, называемый «navcontainer», а для <ul> задан id=«navlist». Чтобы повторить этот эффект в Joomla, нам нужен еще более внешний <div>.
Мы можем сделать это, используя суффиксы модулей. Если вы вспомните, вывод модуля в стиле XHTML выглядит следующим образом:
<div class="moduletable"> <h3>modChrome_xhtml</h3> modChrome_xhtml </div>
Если мы зададим суффикс модуля, он будет добавлен к классу moduletable, примерно так:
<div class="moduletablesuffix"> <h3>modChrome_xhtml</h3> modChrome_xhtml </div>
Так что, беря меню из Listamatic, вам нужно заменить в CSS стиль класса «navcontainer» на «moduletablesuffix».
Примечание
Суффиксы модулей в некоторой степени стирают грань между дизайном и администрированием сайта. Одной из задач дальнейшего развития ядра Joomla является четкое разграничение этих ролей. Нас это касается в том плане, что функциональность суффиксов модулей может быть удалена из версий, которые последуют за 1.5.
Использование суффикса класса модуля удобно. Оно позволяет создавать различные цветные блоки, изменяя только суффикс класса модуля.
Что необходимо знать.
Лучше всего всегда использовать маркированный или плоский список для отображения меню. Тогда вы сможете использовать многие бесплатные источники CSS-дизайна, доступные в сети.
Для нашего сайта мы будем использовать список Марка Ньюхауза. Наш CSS будет следующим:
.moduletablemenu {
color:#333;
margin-bottom:1em;
padding:0;
}
.moduletablemenu h3 {
background:#666;
color:#fff;
text-align:center;
font-size:1.1em;
border-bottom:1px solid #fff;
margin:0;
padding:0.25em 0;
}
.moduletablemenu ul {
list-style:none;
margin:0;
padding:0;
}
.moduletablemenu li {
border-bottom:1px solid #ccc;
margin:0;
}
.moduletablemenu li a {
display:block;
border-left:10px solid #333;
border-right:10px solid #9D9D9D;
background-color:#666;
color:#fff;
text-decoration:none;
padding:3px 5px 3px 0.5em;
}
html>body .moduletablemenu li a {
width:auto;
}
.moduletablemenu li a:hover,a#active_menu:link,a#active_menu:visited {
border-left:10px solid #1c64d1;
border-right:10px solid #5ba3e0;
background-color:#2586d7;
color:#fff;
}
После этого мы должны добавить суффикс модуля «menu» (без знака подчеркивания в данном случае) ко всем модулям меню, к которым мы хотим применить эти стили.
Подсказка:
Если вы пытаетесь заставить какое-то меню работать, используйте следующий полезный совет: создайте пустую инсталляцию Joomla и посмотрите на код, который образует mainmenu. Скопируйте этот код в HTML-редактор (например, Dreamweaver). Замените все ссылки на "#", и после этого вы можете применять CSS-правила до тех пор, пока не добьетесь нужного эффекта. Код для создания меню следующий:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!-- .astyle { } -->
</style>
</head>
<body>
<div class="moduletable">
<h3>Main Menu</h3>
<ul class="mainmenu">
<li id="current" class="item1 active"><a href="#">Home</a></li>
<li class="item2"><a href="#">Joomla! Overview</a></li>
<li class="item3"><a href="#">What's New in 1.5?</a></li>
<li class="item4"><a href="#">Joomla! License</a></li>
<li class="item5"><a href="#">More about Joomla!</a></li>
<li class="item6"><a href="#">FAQ</a></li>
<li class="item7"><a href="#">The News</a></li>
<li class="item8"><a href="#">Web Links</a></li>
<li class="item9"><a href="#">News Feeds</a></li>
</ul>
</div>
</body>
</html>
CSS специально вставлен прямо в HTML-код, чтобы было удобнее редактировать.