Автор: 5thirtyone.com
Перевод: Всеволод Козлов

Наша цель: создать с помощью HTML и CSS панель навигации в виде книжного оглавления.

Что мы получим в итоге:

Table of contents как создать

В полной версии статьи Вы увидите фрагменты HTML и CSS-кодов, с помощью которых мы реализовали на практике панель навигации в виде книжного оглавления, пример которой Вы увидели выше на рисунке!

Фрагмент HTML-кода

<ul id="toc">
<li><span>Chapter One</span> <a href="#">Link</a><br /></li>
<li><span>Chapter Two</span> <a href="#">Link</a><br /></li>
<li><span>Chapter Three</span> <a href="#">Link</a><br /></li>
<li><span>Chapter Four</span> <a href="#">Link</a><br /></li>
<li><span>Chapter Five</span> <a href="#">Link</a><br /></li>
<li><span>Chapter Six</span> <a href="#">Link</a><br /></li>
</ul>

Фрагмент CSS-кода

ul#toc {list-style:none;width:320px;}
#toc li {background:url(dot.gif) repeat-x 0 0.85em;}
#toc li a {float:left;background:#FFF;padding: 0 4px 0 0;}
#toc li span {float:right;background:#FFF; padding 0 0 0 4px;}
#toc li br {clear:both;}

Если же Вы хотите скачать архив со всеми необходимыми рабочими файлами, нажмите на СКАЧАТЬ.

Источник: How-to create a «Table of Contents» Navigation















Смотрите также:

Понравилась статья? Поделитесь ей в социальных сетях: