Вид меню категорий в стиле flat
18.07.2013, 13:38 | |
Здравствуйте, уважаемы посетители сайта Webo4ka. Сегодня я представляю вам Вид меню категорий в стиле 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} | |
| |
Просмотров: 402 | Загрузок: 0 | |
Всего комментариев: 0 | |