Всем доброго дня, данное решение поможет вам создать на своём сайте навигацию по рубрике сайта в стиле книжного оглавления. В интернете полно решений, но они все не очень подходили для uCoz. Шаг 1 - Установим HTML: И так давайте займёмся html каркасом нашей навигации по категориям сайта:

Код

<?if($CATEGORIES$)?><div class="portrait-navigation">$CATEGORIES$</div> <?endif?>

Шаг 2 - Установим CSS: А теперь наши с вами стили, в которых кроется весь секрет данной навигации, а именно: - главному контейнеру мы пропишем белый фон - в котором тегам таблицы td пропишем position:relative;позиционирования элемента - также данным тегам td мы пропишем нижнею точечную линию, схожую с точками в оглавлении книг - а ссылкам категорий и контейнеру span с количеством контента в данной категории, мы пропишем абсолютно позиционирование position:absolute; в результате чего мы перекроем нашу с вами точечную линию данными контейнерами, которым мы также пропишем белый фон

Код

/* Книжное оглавление категорий ------------------------------------------*/ .portrait-navigation { float:left; width:230px; overflow: hidden; background: #fff; margin-right: 20px; border: 1px solid #CAD3DA; padding: 0px 10px 15px 10px; border-radius:5px; } .portrait-navigation .catsTable { width:230px; border-collapse:0px; font:11px Verdana,Arial,sans-serif; } .portrait-navigation .catsTd { float:left; width:230px; height:23px; color:#9e9ea0; position:relative; border-bottom: 2px dotted #D0D0D0!important; } .portrait-navigation a.catName:link, .portrait-navigation a.catName:visited, .portrait-navigation a.catName:active { color:#777; background:#fff; padding-right: 6px; position:absolute; top: 13px; left: 0px; } .portrait-navigation .catsTd a:hover{ font-weight: bold; color:#2C68A6; } .portrait-navigation .catNumData { padding-left: 6px; background:#fff; position:absolute; top: 13px; right: 0px; font:10px Verdana,Arial,sans-serif; font-weight: bold; color:#F38479; } .portrait-navigation img, .portrait-navigation .catDescr{display:none}

хочу сразу предупредить, что в данном css коде автор прописал в последних строчках значение display:none для всех изображений и ячейки с описанием для названия рубрик. На этом всё, мы с вами создали книжное оглавление категорий для uCoz. Спасибо за внимание!

Источник: Доступно только для пользователей

Посмотреть демо "Книжное оглавление вида меню категорий на uCoz"

Книжное оглавление вида меню категорий на uCoz

Bunny Hop v3.0 (Банни...

Красивый шаблон для ф...

Шаблон на тему Counte...

Активная приборная па...

Подождите немного, сейчас файл будет подготовлен, через

секунд Вы получите ссылку на скачивание.

Зарегистрированные пользователи уже качают в то время как вы ожидаете 16 секунд.

Всего комментариев: Комментариев нет , Но вы можете написать первым

Логин:
Пароль: