Вид меню категорий в стиле flat
И так для начала нам следует установить на страницу вашего сайта системную переменную отвечающую за отображение данного меню:
Код
Код
Или второй пример меню в отдельной ячейке:
Код
<div class="navigation-right"> $CATEGORIES$ </div>
Теперь давайте установим 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}
|