Книжное оглавление вида меню категорий на uCoz
827материалов
228тем на форуме
3003комментария
6152пользователя

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


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

Шаг 1 - Установим HTML:
И так давайте займёмся html каркасом нашей навигации по категориям сайта:

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

Шаг 2 - Установим CSS:
А теперь наши с вами стили, в которых кроется весь секрет данной навигации, а именно:

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

CSS
Код
/* Книжное оглавление категорий  
------------------------------------------*/  
.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.

Спасибо за внимание!

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 28.08.2013 в 12:02
Материал просмотрен: 743 раза
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта