В этом посте мы будем создавать новый вид меню категорий для uCoz, в котором главными фигурантами станут иконки.
Установка:
Шаг 1 - Установим иконки:
Для начала нам следует установить иконки, для этого заходим в Админ панель => Новости сайта => Управление категориями и выбираем нужную категорию, нажимаем на гаечный ключ с правой стороны экрана и в появившемся Ajax окне заполняем поле "Описание категории", а именно вставляем обычную html ссылку на иконку:
HTML
Код
<img alt="" src="адрес" />
сразу хочу сказать, что ссылка не должна быть длинной, иначе uCoz её обрежет и вы увидите не иконку, а половина кода, из-за чего всё решение полетит в тартарары.
Шаг 2 - Установим CSS:
Теперь следует прописать следующие css стили, предварительно удалив старые, относящиеся к стилизации меню категорий:
Код
/* Новый вид меню категорий ucoz
------------------------------------------*/
.menu_rubrika {
width:250px;
background: #fff;
border: 1px solid #CAD3DA; margin:0!important;
}
.catsTable {
width:250px;
overflow: hidden;
margin: 15px 0px;
border-collapse: collapse!important;`
font:11px Verdana,Arial,sans-serif;
}
.catsTable tr {
float:left;
position:relative;
margin: 5px 0px 5px 0px;
}
.catsTd {
width: 81px;
height: 50px;
text-align:center;
}
.catName {
top:0;
left:0;
float:left;
z-index: 2;
width: 81px;
position:absolute;
padding-top: 30px;
}
a.catName:link,
a.catName:visited,
a.catName:active {color:#555;}
a.catName:hover {color:#2C68A6; font-weight: bold;}
.catsTd div {
z-index:3;
width: 81px;
height: 30px;
}
.catNumData {
z-index: 1;
top:-5px;
right:5px;
position:absolute;
font:9px Verdana,Arial,sans-serif; color:#999;
}
Примечание:
В данном решении ячейка span не скрыта, в которой отображается количество новостей в той или иной рубрики сайта. Если вы захотели скрыть данную функцию, то в css стилях замените:
Код
.catNumData {
z-index: 1;
top:-5px;
right:5px;
position:absolute;
font:9px Verdana,Arial,sans-serif; color:#999;
}
на
Код
.catNumData {
display:none!important;
}
Скачать архив
На этом всё!
