Как сделать содержание (оглавление) в статье сайта/блога | HTML5

Код блока с содержанием, где href у ссылок точно такой же как id заголовков, за исключением символа #:

Как сделать нумерованное содержание в статье сайта

Всё тоже самое, только ul нужно заменить на ol

Многоуровневый нумерованный список HTML

Здесь уже нужна помощь CSS

Логика призывает к такому построению тегов <h> в статье

Подсвечивание разделов, к которым был сделан переход на CSS

При переходе к четверостишию "Зайка" страница не перематывается к началу стиха (см. тут). Чтобы более явно обозначить секцию, можно использовать псевдокласс :target .

Фиксированное сверху меню и отступ от края окна браузера

Хэш-ссылка отматывает страницу к верхнему краю тега соответствующего id. Отчего получается, что фиксированное сверху меню закрывает часть элемента, в моём случае заголовок. Вот так.

Чтобы страница прокручивалась несколько выше элемента, нужно прописать тегу псевдоэлемент :before

Фиксированное меню, в т.ч. для сайтов с параллакс эффектом, с подсветкой текущего пункта

Когда верхняя часть окна браузера проходит раздел веб-страницы, нужно выделить тот пункт меню, допустим поменять цвет его фона, нажав на который пользователь будет перемещён к началу этого раздела. Лучше посмотрите пример . Для разнообразия на этот раз пункты меню отмечены зелёными точками и прикреплены к правой части страницы.

Меню с плавной прокруткой страницы

Для пользователей Blogger

Если использовать вкладку "Создать" при редактировании Сообщения, Blogger относительные ссылки вида заменяет на абсолютные

Чтобы избежать проблем, следует использовать абсолютные ссылки вида (текущая страница + хэш)

Александр Нужная информация. Попробую использовать NMitra Хорошо, разовью тему в следующем посте. Анонимный Наталья, спасибо.

Скажите, пожалуйста, вы знаете как сделать так, чтобы страница не быстро перескакивала к целевому заголовку, а плавно (эластично) прокручивалась? (Я имею ввиду последний пример поста) NMitra Я поняла что вы имеете ввиду. Тоже об этом думала. Если у вас подключен JQuery, то http://stackoverflow.com/questions/7717527/jquery-smooth-scrolling-when-clicking-an-anchor-link

Если нужен только JavaScript, то отпишитесь, но код там получается не маленьким. Анонимный Наталья, спасибо за отклик.

Чтобы работал JQuery, надо подключать его библиотеки.

А код в этих библиотеках тоже не маленький.

С другой стороны, может не стоит изобретать велосипед. Но я читал, что jQuery не такой скоростной.

Может, самописный код будет шустрее. NMitra Я считаю, что подключать jQuery стоит если нужно несколько функций из библиотеки. Ради одной вешать весь арсенал не стоит. Я подумаю над скриптом. NMitra Сделала, есть замечания http://shpargalkablog.ru/2014/03/table-of-contents-html5.html#scroll ? NMitra А то уже и код, и результат примелькался, могла что-то упустить. Vegan Boom Сделала нумерованное оглавление внутри статьи блога http://veganboom.blogspot.com/2013/11/vegan-questions.html, но нумерация почему-то не отражается в оглавлении поста, хотя при редактировании сообщения вижу, что номера проставлены.

И второе. Поскольку у меня меню сверху закрывает начало заголовка закладки, то решила добавить css стиль, как вы советуете здесь http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#zdes. Выставила там height: 3em; margin-top: -3em;Почти нормально, но всё-таки как-то по-разному везде отступы отображаются (где-то есть пространство над заголовком, где-то заголовок чуть ли не обрезан). Подскажите, пожалуйста, что надо подправить, чтобы ссылка на закладку вела точно к началу соответствующего названия и чтобы моё главное меню не перекрывало это название. NMitra У вас в шаблоне прописаноol, ul Сделайте приблизительно так.toc ol

Пощелкала, проблем не увидела, вот только из-за скрипта у вас при переходе по хэш ссылке страница перезагружается. Надежда Хачатурова Очень помог Ваш материал. Не мудрствуя, сделала, чтобы было удобно на длинной странице переходить к нужному месту. Спасибо большое! NMitra Хочу материал дополнить парой ссылок, но как правило самое простое - самое востребованное. К тому же и Гугл, и Яндекс стараются учитывать такие меню в сниппетах. Анонимный Ссылки не открываются. Печалька((. Прошу посмотрите как сделано здесь http://html5.by/blog/scroll-effects/ . Особенно интересно эффект 8. Staging (Сцена). Если можно ознакомьте. Спасибо NMitra Какие именно ссылки не открываются?Спасибо, прочитала. Анонимный Сейчас ссылки все работают. Почему-то раньше на работали и выдавали ошибку. Тимур тим Не хватает кнопки чтоб вернутьс яна верх NMitra <a href="#"></a>

http://shpargalkablog.ru/2011/05/kak-sdelat-ssylku-k-nachalu-stranitsy.html Alex ZaJW Здравствуйте! Полезная информация. Но Вы показали здесь не все пункты. Содержание: steer">Бычок bunny">Зайка bear">Мишка

Подскажите, пожалуйста, а как выделять (id) 4, 5. и до 10 пункта содержание? NMitra Здравствуйте, по аналогии: присваиваете id (не должен повторяться на странице) заголовкам, а потом ссылки на них ставите с #id

Наверно лучше всего вам посмотреть исходный код страницы: в адресную строку браузера введите