Создание шаблона для Joomla 1.5. Стр. 8 | Веб-дизайн | Личная страничка Дмитрия Доброзракова

Как мы видели в Главе 5 «Создание меню и навигации», существует много параметров настройки генерации меню.

И в этом случае использование средств CSS вместо таблиц приводит к сокращению кода и более легкой разметке. После установки для всех наших меню параметра list («список») у нас осталось только 12 таблиц (мы рассмотрим как удалить остальные, используя новую функцию преобладания в версии 1.5). Помните, установка list относится к версии 1.5; flat list был 1.0 и нас не интересует. «Списки» также лучше таблиц, тем что текстовые браузеры, читалки экрана, браузеры без поддержки CSS или с выключенной поддержкой CSS, поисковые роботы будут получать более простой доступ к вашему контенту.

Еще одно преимущество использования CSS для меню — то, что есть масса разнообразных примеров кода на различных сайтах разработчиков CSS. Давайте посмотрим на один из них и подумаем, как такой код можно использовать.

Страница с примерами на maxdesign.com содержит более 30 меню, основанных на одном основном коде. Там он назван «Listamatic». мы должны кое-что подправить в коде, чтобы приспособить эти меню к Joomla.

Это означает, что обрамляющий <DIV> назван navcontainer а <UL> имеет ID navlist. Чтобы дублировать этот эффект в Joomla, мы должны иметь такой же обрамляющий <DIV>.

Мы можем достигнуть этого при использовании суффиксов модуля. Если вы вспомните вывод модуля при установке стиля XHTML:

Если мы укажем суффикс модуля, он будет добавлен к имени класса moduletable, примерно так:

тогда при переносе меню от Listamatic вам всего лишь понадобится заменить navcontainer на moduletablesuffix в описании класса в CSS.

Внимание! Суффиксы модуля до некоторой степени размывают границу между дизайном сайта и его администрированием. Одна из целей дальнейшего развития ядра Joomla состоит в разделении этих ролей. Результатом может стать отказ от использования суффиксов в версиях старше 1.5.

Такое использование суффикса класса модуля весьма полезно. Оно позволяет применять, скажем, различные цветные решения простым изменением суффикса класса модуля.

Стоит заметить… Лучше всегда использовать ненумерованный (bulleted) или простой список при формировании меню. Тогда вы можете использовать массу бесплатных решений для создания CSS-меню, которые можно найти в Сети.

Для нашего сайта мы возьмем Меню 10 Марка Ньюхауза. Тогда наш файл 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 (в этом случае без подчеркивания) во всех модулях, которые мы хотим оформить таким образом. В результате мы получим меню, как на рис. 9.7.

Для всех меню, которые мы хотим так оформить, достаточно указать «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">

</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>

Внедренные таблицы стилей вместо вынесенных в отдельный файл упростят отладку.

Меню в шаблоне