» » >

Создаём меню рубрик благодаря $CATEGORIES_JSON$
·
29.09.2013, 13:19

Как вы видите пред вами обычное меню выбор категорий uCoz и как многие могли заметить, первое, что бросается в глаза, так это отсутствие квадратных скобок в контейнере с количеством материала. Но это не единственный плюс данного решения.

Самое главное это то, что теперь мы сможем создать свой html каркас данного меню, вписав в него нужные значения для отображения нужной информации. Из-за чего нам больше не надо будет прогибаться под HTML код uCoz с определёнными классами и идентификаторами.

И так давайте рассмотрим подробно данный пример кода и узнаем какие значения можно в него вписать:

JS

<a href="'+cat[i].url+'" id="mc'+cat[i].id+'" >'+cat[i].name+'<span>'+cat[i].entries+' </span></a>

'+cat[i].id+' - идентификатор категории
'+cat[i].url+' - ссылка в категорию
'+cat[i].name+' - название категории
'+cat[i].entries+' - количество материала в категории
'+cat[i].description+' - описание категории

в данном html примере я не буду использовать описание категории, так как он будет лишнем, поэтому давайте вернёмся к нашему коду:

благодаря выше написанному html каркасу мы получим его дублирование и будет это выглядеть так:

HTML

<a href="/news/1-0-1" id="mc1">Семья<span>34 </span></a>  
<a href="/news/1-0-3" id="mc3">Машины <span>0 </span></a>  
<a href="/news/1-0-5" id="mc5">Путешествия <span>0 </span></a>  
<a href="/news/1-0-4" id="mc4">Интернет<span>0 </span></a>  
<a href="/news/1-0-2" id="mc2">Рецепты <span>15 </span></a>

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

категории uCoz

Благодаря данным идентификатором можно реализовать всё что угодно, к примеру установить через css стили нужную иконку категорий, используя метод спрайтов, а не использовать дополнительные скрипты или прописывать иконку в кратком описании.

А в данном html примере я использовал идентификаторы, чтобы у последний категории убрать средствами css нижнею точечную рамку, мелочь, а приятно когда всё выглядит красиво и правильно. Ну и как я написал выше, мы убрали квадратные скобки в теги span, что тоже радует.

Шаг 1 - Установим HTML-JS:

А теперь давайте взглянем на готовый html код данного решения, который вы устанавливаете в нужное место на странице сайта:

HTML

if($CATEGORIES_JSON$)?>
<div class="menu-categories">
<script type="text/javascript">
var cat = $CATEGORIES_JSON$;
$(cat).each(function(i){
  document.write('<a id="mc'+cat[i].id+'" href="'+cat[i].url+'">'+cat[i].name+'<span>'+cat[i].entries+' </span></a>');
});
</script>

</div>
endif?>
Шаг 2 - Установим CSS:

а также пропишем css стили:

CSS-Code

/* Создаём меню $CATEGORIES_JSON$  
------------------------------------------*/
.menu-categories {
  float:left;
  width:250px;  
  padding: 0px 0px;  
  background: #fff;
  border: 1px solid #CAD3DA;
  border-radius:5px;
  overflow: hidden;
}  

.menu-categories a:link,  
.menu-categories a:visited,  
.menu-categories a:active {  
  float:left;
  width:230px;  
  color:#595C66;  
  display:block;  
  padding:5px 10px 5px 10px;  
  border-bottom: 1px dotted #B6C0CD;
}

.menu-categories a:hover{
  color:#595C66;
  background:#F1F8FB;
}

.menu-categories span {  
  float:right;
  padding:1px 7px;
  background:#9EA5A8;
  margin: 0px 0px 0px 0px;  
   
  font:9px Verdana,Arial,sans-serif;  
  font-weight: bold;  
  color:#fff;  
  border-radius:3px;
}

#mc5 {  
  border-bottom: none;
}

Как я писал выше про идентификаторы mc, вам следует в данном css коде заменить #mc5 на свой номер идентификатора который прописан последней рубрике в данном меню.

Примечание:

Безусловно я не мог промолчать о ложки дёгтя в данном решении, а именно когда вы выберите нужную категорию и перейдёте в неё, то в данном меню эта категория не будет выдела каким либо способом, в отличии когда вы используете стандартную системную переменную $CATEGORIES$ от uCoz.

В целом на этом всё, спасибо за внимание!

Категория: Вид навигации | Добавил: tashkent97
Просмотров: 768 | Загрузок: 314 | Источник: center-dm.ru | Рейтинг: 3.5/2
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Яндекс.Метрика Яндекс цитирования<