Здравствуйте, уважаемы посетители сайта. Сегодня я представляю вам Вид меню категорий в стиле 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}
