Четверг, 16 Октября 2014 12:30

Список с анкорами

Written by 
Оцени эту запись
(0 Голоса)

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

 

Вступление

 

Список с анкорами представляет из себя список ссылок, которые ведут на разные разделы той же страницы. Каждая ссылка (анкор) в атрибуте href содержит идентификатор элемента, присутствующего на странице.

 

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

 

Список

 

Код списка выглядит так:

 

<ul>
<li><a href="#id1">Пункт 1</a></li>
<li><a href="#id2">Пункт 2</a></li>
<li><a href="#id3">Пункт 3</a></li>
<li><a href="#id4">Пункт 4</a></li>
<li><a href="#id5">Пункт 5</a></li>
</ul>

 

Результат выглядит примерно так:

 

 

Разделы для анкоров

 

Теперь нам нужно создать разделы, на которые собственно и будут вести наши ссылки. Например, будем использовать заголовки:

 

<h3 id="id1">Пункт 1</h3>

 

Как видите, у заголовка идентификатор равен id1, а у ссылки на него атрибут href равен #id1 (то есть, добавляется hashtag).

 

Наименование идентификаторов

 

Как вы наверняка знаете, идентификаторы должны быть уникальными. То есть, на одной странице должно быть не больше одного элемента с таким id. Кроме того, всегда и данной случае тоже имя идентификатора должно быть наполнено смыслом. Для простоты можно конечно использовать имя вроде id1, но лучше в нем передать значение или содержание элемента.

 

Живой пример

 

 

 

Полный код списка анкоров

 

Список:

 

<ul>
<li><a href="#introduction">Вступление</a></li>
<li><a href="#list">Список</a></li>
<li><a href="#topics">Разделы для анкоров</a></li>
<li><a href="#name">Наименование идентификаторов</a></li>
<li><a href="#live-example">Живой пример</a></li>
<li><a href="#code">Полный код списка анкоров</a></li>
</ul>

 

Разделы:

 

<h3 id="introduction">Вступление</h3>
<h3 id="list">Список</h3>
<h3 id="topics">Разделы для анкоров</h3>
<h3 id="name">Наименование идентификаторов</h3>
<h3 id="live-example">Живой пример</h3>
<h3 id="code">Полный код списка анкоров</h3>
 

 

 

 

Additional Info

Добавить комментарий


Защитный код
Обновить

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов