Регистрация    Войти
Авторизация

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

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

Новый вид меню категорий ucoz. Всем привет, просматривая многие европейские сайты, я заметил интересную тенденцию в оформлении выбора категорий в меню сайта, думаю среди пользователей uCoz найдутся желающие использовать данный вид меню категорий.

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

Для начала нам следует установить иконки, для этого заходим в Админ панель => Новости сайта => Управление категориями и выбираем нужную категорию, нажимаем на гаечный ключ с правой стороны экрана и в появившемся Ajax окне заполняем поле "Описание категории", а именно вставляем обычную 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;
}


Скачать:
Внимание! У вас нет прав для просмотра скрытого текста.


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

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  15-01-2013, 11:07   Просмотров: 5868   

Источник новости: cеntеr-dm.ru

Новый вид меню, вид меню ucoz, Меню ucoz, вид меню категорий ucoz, вид категорий ucoz
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Пользователь offline Ivan1 7 февраля 2015 10:54
Возникла проблема, вернее ряд проблем со скриптом. Во-первых выяснилось что не нужно border-collapse: collapse!important; в .catsTable, ну а .menu_rubrika нужна только для Demo в прикреплённом файле.
Вопрос в следующем. Когда выбираешь раздел и переходишь на его страницу - вторая категория почему-то помещает название вверх, вместо того чтобы быть под картинкой. Пример http://www.mir-ok.com/load/stroitelnaya_khimiya/2 Помогите пожалуйста, не могу понять в чём проблема.

          1
Пользователь offline Ivan1 9 февраля 2015 13:06
Админ забросил сайт видимо...

          2

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.