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