Главная » Администрирование сайта » Работа со стилями (CSS) » Стилизация вида меню категорий

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

14.09.2012 в 17:34
Автор: Sheriff   

Перед тем как оформить нужный вид меню категорий, нам следует включить нужные функции, для этого заходим в Панель управления » Нужный модуль » Настройки модуля и устанавливаем:

  • Количество колонок в меню категорий → 1.
  • Выводить количество сообщений в категории возле названия категории: → устанавливаем галочку.



Теперь для отображение меню категорий модуля сайта, нам необходимо установить на страницу сайта специальный системный код → $CATEGORIES$

После того, как Вы добавили и сохранили в шаблон системный код $CATEGORIES$ давайте посмотрим, что нам выдала система:
Code
<table border="0" cellspacing="1" cellpadding="0" width="100%" class="catsTable">   
   <tr>   
   <td style="width:100%" class="catsTd" valign="top">   
   <a href="#" class="catName">Категория 1</a>   
   <span class="catNumData" style="unicode-bidi: embed;">[0]</span>   
   </td>   
   </tr>   
     
   <tr>   
   <td style="width:100%" class="catsTd" valign="top">   
   <a href="#" class="catName">Категория 2</a>   
   <span class="catNumData" style="unicode-bidi: embed;">[0]</span>   
   </td>   
   </tr>   
     
   <tr>   
   <td style="width:100%" class="catsTd" valign="top">   
   <a href="#" class="catName">Категория 3</a>   
   <span class="catNumData" style="unicode-bidi: embed;">[0]</span>   
   </td>   
   </tr>   
     
   <tr>   
   <td style="width:100%" class="catsTd" valign="top">   
   <a href="#" class="catName">Категория 4</a>   
   <span class="catNumData" style="unicode-bidi: embed;">[0]</span>
   </td>   
   </tr>   
     
   <tr>   
   <td style="width:100%" class="catsTd" valign="top">   
   <a href="#" class="catName">Категория 5</a>   
   <span class="catNumData" style="unicode-bidi: embed;">[0]</span>   
   </td>   
   </tr>   
     
   <tr>   
   <td style="width:100%" class="catsTd" valign="top">   
   <a class="catName" href=#">Категория 6</a>   
   <span class="catNumData" style="unicode-bidi: embed;">[4]</span>   
   </td>   
   </tr>   
     
   <tr>   
   <td style="width:100%" class="catsTd" valign="top">   
   <a href="#" class="catName">Категория 7</a>   
   <span class="catNumData" style="unicode-bidi: embed;">[5]</span>   
   <div class="catDescr">Описание</div>   
   </td>   
   </tr>   
   </table>


Как мы видим, перед нами обычная таблица с классом catsTable и ячейками catsTd в которой представлены:
  • Ссылки на нужные категории → class="catName";
  • Тег span — количество материалов в категории → class="catNumData";
  • Тег div — описание категории → class="catDescr".


Теперь давайте пропишем значения нашим классам:
Code
.catsTable {width:200px;overflow:hidden;border-collapse:0px;overflow: hidden;}   

.catsTd {width:200px;height:20px;color:#000;}   

a.catName:link,a.catName:visited,a.catName:active {font:10px Arial,sans-serif;color:#eee;margin:0;float:left;width:200px;height:18px;display:block;position:absolute;padding:4px 0 0 11px;border-top: 1px solid #ccc!important;}   

.catsTd a:hover{background:#eee;}   
     
.catNumData {float:right;margin: 5px 5px 0 0;position: relative;font:9px Arial,sans-serif;font-weight: bold;}   
     
.catDescr{color:#484848;font-weight: bold;text-align:right;padding: 9px 6px 0 0;margin: 21px 0 4px 0!important;border-top: 1px solid #ccc!important;}


Рассмотрим использованные CSS классы:
catsTable:
width:200px; → отвечает за ширину таблицы;
border-collapse:0px; → расстояние линий между ячейками таблицы;
overflow: hidden; → отображение области внутри элемента.

catsTd:
width:200px; → отвечает за ширину ячейки td;
height:20px; → высота ячейки td;
color:#000; → цвет текста.

a.catName:link,a.catName:visited,a.catName:active:
font:10px Arial,sans-serif; → размер и его шрифт;
color:#eee; → отвечает цвет текста;
float:left; → элемент по левому краю (left - слева, center - центр, right - справа);
width:200px; → длина ячейки с учётом внутренних отступов — padding:4px 0 0 11px;;
height:18px; → высота;
display:block; → элемент показывается как блок;
position:absolute; → указывает, что элемент абсолютно позиционирован;
margin:0; → запрещаем внешние отступы;
padding:4px 0 0 11px; → внутренние отступы;
border-top: 1px solid #ccc!important; → верхняя линия рамки.

catsTd a:hover:
background:#eee; → отвечает за фон ссылки при нажатии.

catNumData:
float:right; → элемент по правому краю (left - слева, center - центр, right - справа);
margin: 5px 5px 0 0; → отвечает за внешние отступы;
position: relative; → устанавливается относительно его исходного места;
font:9px Arial,sans-serif; → размер и его шрифт;
font-weight: bold; → шрифт жирный.

catDescr:
padding: 9px 6px 0 0; → внутренние отступы;
margin: 21px 0 4px 0!important; → внешние отступы;
border-top: 1px solid #ccc!important; → верхняя линия рамки;
color:#484848; → цвет текста;
font-weight: bold; → жирный шрифт;
text-align:right; → отвечает за выравнивание текста по правому краю (left - слева, center - центр, right - справа).

Настраиваем на свой вкус


Многие интересуются вопросом → "как установить иконки перед категориями?". Это делается скриптом, но работает скрипт в модулях: каталог статей/файлов/сайтов и онлайн игры..

Устанавливаем код на нужных страницах (главная страница каталога, страница добавления, страница материала и комментариев к нему и др.) после </body>
Quote
<script type="text/javascript">
var img = {1:'/img/1.png',2:'/img/2.png',3:'/img/3.png',4:'/img/4.png'};
for(i in img)
$('#cid'+i).find('a').before('<span style="padding: 2px;"><img src="'+img[i]+'" style="vertical-align: -4px;" border="0" /></span>');
// Author: Sheriff ~ http://fi4a.ru/
</script>




В массиве img пропишите пути к картинкам для категорий (в одинарных кавычках через запятую, не забываем про подсчет категорий).
Также к скрипту можно добавить CSS стили в свойство style, для упрощенной настройки отображения картинок.

Вот и всё! Если Вам что-либо будет непонятно, обязательно спрашивайте в комментариях.

Рейтинг: 23  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 24879          Комментариев: 15
24.10.2016 в 09:41      0  

А что надо изменить чтобы категории выводились горизонтально?
01.07.2015 в 09:17      0  

Подскажите пожалуйста, как установить иконки категорий на главной странице (новости сайта)? На всех остальных установилось без проблем. http://lukinand.ucoz.net/
01.07.2015 в 10:09      0  

Здравствуйте, для решения Вашей проблемы выполните следующие действия:

1. В панели управления по адресу http://lukinand.ucoz.net/admin/ выберите модуль "Редактор страниц" и кликните по пункту "Общие настройки". Скриншот
2. В открывшемся окне выберите в пункте "При переходе на главную страницу открывать:" - вариант "Новости сайта". Скриншот
3. Сохраните изменения. Скриншот
01.07.2015 в 10:14      0  

Огромное СПАСИБО !!!!!!!!!!! up
01.07.2015 в 10:52      0  

Осталась аналогичная проблема со страницей "Обратная связь"
01.07.2015 в 11:20      0  

Страница ставшая сутью Вашего обращения - "Обратная связь" не является связанной с модулем "Новости сайта".
Так как стили и скрипты у Вас прописаны для отдельных модулей сайта, то они не распространяются на все страницы сайта .
Вам необходимо самому прописать стили и правила отображения для иконок, или обратится к стороннему специалисту для решения данной проблемы.
Большой список фрилансеров и дизайн-студий работающих с системой uCoz Вы можете найти на сайте http://upartner.pro/ .
19.08.2015 в 10:58      0  

Подскажите пожалуйста, как сделать иконки категорий если модуль "Статья" содержит два раздела, в первом разделе 1 категория, в другом четыре?
http://lukinand.ucoz.net/publ/
29.12.2014 в 19:41      0  

Добрый день. Подскажите, а как создать категории на собственной добавленной странице. Этой страницы, естественно, нет в списке модулей, соответственно, и до управления категориями добраться не могу wacko
Спасибо
13.08.2014 в 19:08      0  

Помогите!!!((((( Что-то я много всего поменяла и теперь совсем запуталась. В основном мены "Для родителей" в категориях разделы почему-то по горизонтали, как исправить? А "О воспитателе" вообще не могу добавить категории? Lnikolaevna.ucoz.ru
14.08.2014 в 07:23      0  

Цитата
В основном мены "Для родителей" в категориях разделы почему-то по горизонтали, как исправить?

Предоставьте, пожалуйста, скриншот.

Цитата
А "О воспитателе" вообще не могу добавить категории?
Какие сообщения об ошибках выдает система?
14.08.2014 в 17:56      0  

Спасибо, я вчера отдохнула немного))) и разобралась!!!))))))
13.07.2014 в 13:03      0  

А как установить иконки перед категориями в меню, собранном с помощью конструктора меню? Это вообще возможно? Спасибо
14.07.2014 в 00:43      +2  

Есть варианты:
1. Применить к пунктам меню стиль list-style-image: url(ссылка на картинку);
2. Задать фон пунктам меню с помощью стиля background: url(ссылка на картинку); 
 Необходимо сделать следующие шаги:
1. Панель управления - Дизайн - Конструктор меню. Возле каждого пункта меню нажать на значок редактирования и в окне возле слова "Опции" разкрыть срелкой строку "Имя css класса". Присваиваете каждому пункту (если нужны разные картинки) свое имя класса, например, main_page. Сохраняете изменения.
2. Панель управления - Дизайн - Управление дизайном (css). В таблицу в любом месте вписываете стили, например,
  .main_page {display: list-item; list-style-image: url(http://test23.ucoz.ua/image.png) !important;}
    или
  .main_page {background: url(http://test23.ucoz.ua/image.png) no-repeat;  padding:  0px 5px 5px 25px; !important;}
21.08.2013 в 17:59      0  

Автор маладца, мануал рулит
14.09.2012 в 18:33      +2  

Хорошая статья полезная ! Спасибо автору. !