Привет!

Нам нравится создавать сайты для интересных людей: о социальной и необычной деятельности, об удивительных человеческих и нечеловеческих существах, о чудесах и странностях, о том, что снится и о том, что стучится в двери.

Мы работаем с европейскими и русскими заказчиками, с теми, кто действительно любит то, чем он занимается.

Таким образом мы вкладываемся в игры Духа, и мир для нас становится глубже.

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

В главе 5 «Создание меню и элементов навигации» мы видели, что су­ществует несколько параметров, отвечающих за отображение меню.

Здесь также использование списков CSS вместо табличной разметки приводит к уменьшению объема генерируемого кода и его упрощению. После того как для всех наших меню был определен стиль List (Список), у нас осталось всего 12 таблиц (позднее мы увидим, как можно убрать оставшиеся таблицы с помощью новых возможностей, появившихся в Joomla 1.5). Запомните, стиль List (Список) в параметрах модуля впервые появился в версии Joomla 1.5. Стиль Flat List (Плоский список) перекочевал из Joomla 1.0 и не рекомендуется к использованию. Кроме того, исполь­зование стиля списка вместо табличной разметки предпочтительнее для пользователей, использующих текстовые броузеры, устройства чтения с экрана, броузеры, не имеющие поддержки CSS, броузеры с выключен­ной поддержкой CSS, и для поисковых роботов, которые при этом по­лучают более простой доступ к содержимому.

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

На странице имеется подборка более чем из 30 меню, в основе которых лежит один и тот же код. Эта подборка называется Lis tarn a tic. Этот код может использоваться в Joomla лишь с незначи­тельными переделками.

Для создания меню используется следующий код разметки:

<div> <ul>

<li><a href="/ #">Item one</a></li>

<lixa href=,,#">Item two</a></li>

<lixa xhref="#">Item three</a></li>

<lixa href=M#">Item four</a></li>

<li><a href="#">Item five</a></li>

</ul>

</div>

Здесь имеется контейнер <div>, который называется navcontainer, и список <ul> - его атрибут id имеет значение navlist. Чтобы воспроизвести анало­гичное меню в Joomla, нам также необходимо вставить контейнер <div>.

Сделать это можно с помощью суффикса модуля. Если помните, модуль, для которого атрибут style имеет значение 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 на moduletablesuf f ix.

 

Примечание ----------------------------------------------------------------------------------------------------------------------------------

Суффиксы модулей до некоторой степени размывают грань между разработкой дизайна сайта и его администрированием. Одна из целей дальнейшего развития Joomla состоит в четком разделении этих двух функций. Как следствие, возможно, в будущих версиях суффиксы модулей утратят свою значимость.

Использование суффиксов модулей обеспечивает дополнительные удоб­ства, поскольку при таком подходе можно легко менять цвет меню простым изменением суффикса.

Это нужно знать----------------------------------------------------------------------------------------------------------------------------

Для организации меню лучше использовать маркированные, или плоские, списки. Это позволит вам воспользоваться большим числом бесплатных ресурсов в Интернете, кото­рые посвящены теме CSS.

 

Для нашего шаблона мы будем использовать меню с номером 10, создан­ное Марком Ньюхаузом (Mark Newhouse)1. Таблицы стилей CSS будут выглядеть так:

.moduletablemenu{ padding:0; color: #333; margin-bottom:1em; }

.moduletablemenu h3 { background:#666; color:#fff; padding:0.25em 0; text-align:center; font-size:1.1em; margin:0;

border-bottom:1px solid #fff; }

.moduletablemenu ul{ list-style: none; margin: 0; padding: 0; }

.moduletablemenu li{ border-bottom: 1px solid #ccc; margin: 0; }

.moduletablemenu li a{

display: block;

padding: Зрх 5px 3px 0.5em;

border-left: 10px solid #333;

border-right: 10px solid #9D9D9D;

background-color:#666;

color: #fff;

text-decoration: none;

}

html>body .moduletablemenu li a {

width: auto;

}