• Страница 1 из 1
  • 1
Форум » uCoz » Меню для сайта » КРАСИВЫЙ ВИД МЕНЮ КАТЕГОРИЙ UCOZ
КРАСИВЫЙ ВИД МЕНЮ КАТЕГОРИЙ UCOZ
Дмитрий Дата: Суббота, 16.02.2013, 13:25 | Сообщение # 1 | Сообщить о нерабочей теме


Аватар для Дмитрий

Регистрация:03.12.2011
Страна: Российская Федерация
Репутация:  14
Сообщений: 1421
Награды: 4 +
Статус:


Красивый вид меню категорий ucoz

Установка:
Для начала нам следует установить иконки, для этого заходим в Админ панель => Новости сайта => Управление категориями и выбираем нужную категорию, нажимаем на гаечный ключ с правой стороны экрана и в появившемся Ajax окне заполняем поле "Описание категории", а именно вставляем обычную html ссылку на иконку:
Код
<img alt="" src="адрес" />


сразу хочу сказать, что ссылка не должна быть длинной, иначе uCoz её обрежет и вы увидите не иконку, а половина кода, из-за чего всё решение полетит в тартарары.

Теперь следует прописать следующие 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;    
}


[admin]на [/admin]

Код
.catNumData {    
    display:none!important;    
}


Готово.

[admin]Скачать архив.[/admin]
From Russia With Love!
Форум » uCoz » Меню для сайта » КРАСИВЫЙ ВИД МЕНЮ КАТЕГОРИЙ UCOZ
  • Страница 1 из 1
  • 1
Поиск: