Стилизация меню категорий для uCoz


Стилизация меню категорий для uCoz

2705
8.4 из 10
Проголосовало: 5






Перед тем как создавать нужный вид меню категорий для вашего сайта, нам необходимо включить нужные функции, для этого идём в Админ панель => Новости сайта => Настройки модуля
и устанавливаем:
Количество колонок в меню категорий: 1
Выводить количество сообщений в категории возле названия категории: да (устанавливаем галочку)
Теперь снова идём в Админ панель => Новости сайта => Управление категориями
и удаляем описание для каждой категории вашего модуля, мы пропишем его там, где нам это необходимо, тем самым разделив категории между собой нужным названием.
Теперь для отображение меню категорий модуля сайта, нам следует установить на страницу сайта специальную системную переменную:

Code
$CATEGORIES$


Теперь когда uCoz сгенерировал для нас html код данной функции, давайте на него взглянем:

Code
<!-- <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" в который установлена:
- ссылка на нужную категорию (class="catName")
- контейнер span, количество материалов в категории (class="catNumData")
- контейнер div с описанием категории (class="catDescr")
все выше перечисленные классы помогут нам преобразовать внешний вид меню категорий, благодаря css стилям.

И так давайте пропишем нужные CSS значения нашим классам:

Code
/* Рубрики блога  
------------------------------------------*/  
.catsTable {  
  width:240px; /* - прописываем длину таблице */  
  overflow: hidden; /* - Отображается только область внутри элемента */  
  border-collapse:0px; /* - Линия между ячейками таблицы = 0*/  
}  

.catsTd {  
  width:240px; /* - прописываем длину ячейки td */  
  height:22px; /* - прописываем высоту ячейки td*/  
  color:#9e9ea0; /* - цвет текста */  
}  

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; /* - верхняя линия рамки */  
}  

.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 как я уже писал выше, служил для описание между категориями.
Спасибо за внимание.
Автор публикации: Загрузка
Загрузка
Estwood, это его n материал
Источник: http://www.center-dm.ru
  • Всего комментариев: 1

DaRkILer
+2
DaRkILer написал: Написано 24 мая 2012 в 11:16
Комментарий №1
Норм! Спасибо cool

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 8
    Гостей: 7
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: