Всем привет, по многочисленным просьбам я выкладываю для рубрики разбор полётов, вид меню категорий модуля вашего сайта.
Перед тем как создавать нужный вид меню категорий для вашего сайта, нам необходимо включить нужные функции, для этого идём в Админ панель => Новости сайта => Настройки модуля
и устанавливаем:
Количество колонок в меню категорий: 1
Выводить количество сообщений в категории возле названия категории: да (устанавливаем галочку)
Теперь снова идём в Админ панель => Новости сайта => Управление категориями
и удаляем описание для каждой категории вашего модуля, мы пропишем там где нам это необходимо, тем самым разделив категории между собой нужным названием.
Теперь для отображения меню категорий модуля сайта, нам следует установить на страницу сайта специальную системную переменную:
HTML
Теперь когда uCoz сгенерировал для нас html код данной функции, давайте на него взглянем:
HTML
<!-- <bc> -->
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="catsTable">
<tbody>
<tr>
<td valign="top" class="catsTd" style="width: 100%;">
<a class="catName" href="#">Категория №1</a>
<span style="unicode-bidi: embed;" class="catNumData">[0]</span>
</td>
</tr>
<tr>
<td valign="top" class="catsTd" style="width: 100%;">
<a class="catName" href="#">Категория №2</a>
<span style="unicode-bidi: embed;" class="catNumData">[0]</span>
</td>
</tr>
<tr>
<td valign="top" class="catsTd" style="width: 100%;">
<a class="catName" href="#">Категория №3</a>
<span style="unicode-bidi: embed;" class="catNumData">[0]</span>
</td>
</tr>
<tr>
<td valign="top" class="catsTd" style="width: 100%;">
<a class="catName" href="#">Категория №4</a>
<span style="unicode-bidi: embed;" class="catNumData">[0]</span>
<div class="catDescr">Общая тема категорий</div>
</td>
</tr>
<tr>
<td valign="top" class="catsTd" style="width: 100%;">
<a class="catName" href="#">Категория №5</a>
<span style="unicode-bidi: embed;" class="catNumData">[0]</span>
</td>
</tr>
<tr>
<td valign="top" class="catsTd" style="width: 100%;">
<a class="catName" href=#">Категория №6</a>
<span style="unicode-bidi: embed;" class="catNumData">[0]</span>
</td>
</tr>
<tr>
<td valign="top" class="catsTd" style="width: 100%;">
<a class="catName" href="#">Категория №7</a>
<span style="unicode-bidi: embed;" class="catNumData">[0]</span>
</td>
</tr>
</tbody>
</table>
<!-- </bc> -->
Как мы видим, перед нами обычная таблица с классом class="catsTable" и ячейками тега td class="catsTd" в который установлена:
p>- ссылка на нужную категорию (class="
catName")
- контейнер
span, количество материалов в категории (class="
catNumData")
- контейнер
div с описанием категории (class="
catDescr")
все выше перечисленные классы помогут нам преобразовать внешний вид меню категорий, благодаря css стилям.
Шаг 2 - Установим CSS:
И так давайте пропишем нужные значения нашим классам:
CSS-Code
/* Рубрики блога
------------------------------------------*/
.catsTable {
width:240px; /* - прописываем длину таблице */
overflow: hidden; /* - Отображается только область внутри элемента */
border-collapse:0px; /* - Линия между ячейками таблицы = 0*/
}
.catsTd {
width:240px; /* - прописываем длину ячейки td */
height:22px; /* - прописываем высоту ячейки td*/
color:#9e9ea0; /* - цвет текста */
}
.catNameActive,
a.catName:link,
a.catName:visited,
a.catName:active {
font:11px Verdana,Arial,sans-serif; /* - шрифт и его размер */
color:#555; /* - цвет текста */
margin:0; /* - запрещаем внешние отступы */
float:left; /* - выравниваем элемент по левому краю */
width:230px; /* - прописываем длину ячейки с учётом внутренних отступов padding:3px 0px 0px 10px; */
height:19px; /* - прописываем высоту */
display:block; /* - Элемент показывается как блочный*/
position:absolute; /* - Указывает, что элемент абсолютно позиционирован,*/
padding:3px 0px 0px 10px; /* - внутренние отступы */
border-top: 1px solid #D0D0D0!important; /* - верхняя линия рамки */
}
.catNameActive,
.catsTd a:hover{
background:#fff /* - фон ссылки при нажатии */
}
.catNumData {
float:right; /* - выравниваем элемент по правому краю */
position: relative; /* - устанавливается относительно его исходного места */
margin: 5px 5px 0px 0px; /* - внешние отступы */
font:9px Verdana,Arial,sans-serif; /* - шрифт и его размер */
font-weight: bold; /* - делаем шрифт жирным */
}
.catDescr{
color:#555; /* - цвет текста */
font-weight: bold; /* - делаем шрифт жирным */
text-align:right; /* - Выравнивание текста по правому краю*/
margin: 22px 0px 5px 0px!important; /* - внешние отступы */
padding: 10px 7px 0px 0px; /* - внутренние отступы */
border-top: 1px solid #D0D0D0!important; /* - верхняя линия рамки */
}
Как вы видите из данного кода, мы установили таблице и ячейкам td нужный нам размер, в которых прописали контейнеру span отображение внутри ссылки с правой стороны таблицы, тем самым мы видим выделения фона нужной нам категории при наведении на неё стрелкой мыши.
А контейнер div как я уже писал выше, служил для описание между категориями.
На этом заканчиваем стилизацию вид меню категорий для uCoz, спасибо за внимание!
· 
20:29
