Название:
Книжное оглавление вида меню категорий на uCoz
Категория:
Меню для сайта
Раздел:
uCoz - Скрипты
Просмотров:
 2754
Автор:
C-DM
Добавил:
Дмитрий
Комментов:
0
Добавленно:
  16.07.2014 в 12:40
Теги:
Книжное, оглавление, категорий, ucoz, меню, вида, на
Рейтинг:
Игровая индустрия

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

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

Всем доброго дня, данное решение поможет вам создать на своём сайте навигацию по рубрике сайта в стиле книжного оглавления. В интернете полно решений, но они все не очень подходили для 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"

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


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