Вид меню категорий в стиле flat
827материалов
228тем на форуме
3004комментария
6157пользователей

Вид меню категорий в стиле flat


]Здравствуйте, уважаемы посетители сайта Webmaster-ucoz. Сегодня я представляю вам Вид меню категорий в стиле flat

Установка:

ШАГ 1.

И так для начала нам следует установить на страницу вашего сайта системную переменную отвечающую за отображение данного меню:
Код
<?if($CATEGORIES$)?>$CATEGORIES$<?endif?>

Или второй пример меню в отдельной ячейке:
Код
<?if($CATEGORIES$)?> <div class="navigation-right"> $CATEGORIES$ </div> <?endif?>

ШАГ 2.

Теперь давайте установим CSS стили для данного меню:
Код
/* Рубрики блога      
------------------------------------------*/      
.catsTable {      
     width:240px;      
     overflow: hidden;      
     border-collapse:0px;      
}      

.catsTd {      
     float:left;      
     width:240px;      
     height:20px;      
     color:#9e9ea0;      
     margin: 0px 0px 10px 0px!important;      
}      

a.catName:link,      
a.catName:visited,      
a.catName:active {      
     margin:0;      
     float:left;      
     width:230px;      
     height:15px;      
     display:block;      
     position:absolute;      
     padding:4px 0px 4px 10px;      
     background:#fff!important;      
          
     font:11px Verdana,Arial,sans-serif;      
     color:#777;      
}      

.catsTd a:hover{      
     color:#fff;      
     font-weight:bold;      
     background:#96C7E6!important;      
}      
          
.catNumData {      
     float:right;      
     width:40px;      
     height:18px;      
     background:#59B0D4;      
     position: relative;      
     padding:5px 0px 0px 0px;      

     font:9px Verdana,Arial,sans-serif;      
     text-align:center;      
     font-weight: bold;      
     color:#fff;      
}      
          
.catDescr{display:none}

И для второго примера меню категорий в отдельной ячейке:
Код
/* Рубрики блога в ячейки      
------------------------------------------*/      
.navigation-right {      
     width:220px;      
     background:#fff;      
     margin-top: 15px;      
     border: 1px solid #B6C0CD;      
     padding: 10px 10px 5px 10px;      
     border-radius:3px;      
}      

.navigation-right .catsTable {      
     width:220px;      
     overflow: hidden;      
     border-collapse:0px;      
}      

.navigation-right .catsTd {      
     float:left;      
     width:220px;      
     height:20px;      
     color:#9e9ea0;      
     margin: 0px 0px 10px 0px!important;      
}      

.navigation-right a.catName:link,      
.navigation-right a.catName:visited,      
.navigation-right a.catName:active {      
     margin:0;      
     float:left;      
     width:210px;      
     height:19px;      
     display:block;      
     position:absolute;      
     padding:4px 0px 0px 10px;      
     background:#F4F8F9!important;      
     font:11px Verdana,Arial,sans-serif;      
     color:#777;      
}      

.navigation-right .catsTd a:hover{      
     color:#fff;      
     font-weight:bold;      
     background:#96C7E6!important;      
}      
          
.navigation-right .catNumData {      
     float:right;      
     width:40px;      
     height:18px;      
     background:#59B0D4;      
     position: relative;      
     padding:5px 0px 0px 0px;      

     font:9px Verdana,Arial,sans-serif;      
     text-align:center;      
     font-weight: bold;      
     color:#fff;      
}      
          
.navigation-right .catDescr {display:none}

ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 08.07.2013 в 14:32
Материал просмотрен: 898 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта