- Название:
- Красивый вид меню для категорий uCoz
- Категория:
- Меню для сайта
- Раздел:
- uCoz - Скрипты
- Просмотров:
- 3971
- Автор:
- Неизвестен
- Добавил:
- Дмитрий
- Загрузок:
- 933
- Комментов:
- 0
- Добавленно:
- 17.08.2013 в 22:55
- Теги:
- категорий, вид, ucoz, для, меню, красивый
- Рейтинг:
Последнее на форуме
Последние материалы
Красивый вид меню для категорий uCoz
Красивый вид меню для категорий 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;
}
------------------------------------------*/
.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;
}
z-index: 1;
top:-5px;
right:5px;
position:absolute;
font:9px Verdana,Arial,sans-serif; color:#999;
}
на
Код
.catNumData {
display:none!important;
}
display:none!important;
}
Примечание: Не забывайте скачать файл ниже.
Подождите немного, сейчас файл будет подготовлен, через |
секунд Вы получите ссылку на скачивание. |
Зарегистрированные пользователи уже качают в то время как вы ожидаете 16 секунд.
Скачать программу RaR и WinRaR
Скачать программу WinZip
Всего комментариев:
| |