Меню с якорями css

5 способов создания ссылок-якорей с отступом сверху. Устранение смещения из-за фиксированного блока (шапка, меню).

Впервые я столкнулся с этим, когда делал на своем сайте выплывающую панель «Поделиться в соц сетях» при скролле поста вниз (попробуйте).

При использовании ссылок-якорей на сайте, после перехода по ссылке, панель соц сетей закрывала верхнюю часть контента (как правило заголовок) и в итоге пользователю просто было непонятно, куда он в итоге попал. Вы можете опробовать это сами, кликнув по ссылке «A» ниже.

А так как сейчас очень популярно делать фиксированные шапки и меню position:fixed , прилепленные к верхней части экрана, то думаю что этот пост будет интересен многим. В нём я рассмотрю несколько вариантов якорей с отступами от верхней границы экрана при переходе по ним.

Для более ясного понимания на все h2 -заголовки я добавил заливку.

A: Стандартный якорь

Пример того, как работает стандартная ссылка-якорь. Если вы попали сюда, кликнув по ссылке, а не просто проскроллили страницу, то скорее всего заголовок у вас оказался полностью скрыт под панелью соц сетей.

Возможно было бы правильнее назвать пост не «5 методов…», а «4 метода…». Потому что это и не метод вовсе, а показательный пример того, как быть не должно, ну да ладно.

Б: Отступ в виде псевдоэлемента

Используем псевдоэлемент для добавления отступа перед элементом — :before или :after .

Поддержка браузерами: Chrome конечно же, IE8+, Firefox 3+, Opera 9.25+, Safari 3+.

Замечания:

• Требуется поддержка браузером CSS псеводоэлементов.
• Метод не работает корректно, если у элемента есть фон или заливка (наезжает на контент).
• Не работает корректно, если у элемента есть свойства padding-top или border-top .

#link-B:before { display: block; content: ""; height: 55px; margin: -55px 0 0; }

В: Положительный padding и отрицательный margin

Используем padding для создания отступа и отрицательный margin , чтобы этот же отступ убрать, а точнее — сделать его незаметным для пользователей.

Обратите внимание, что внутренные отступы padding тоже попадают под заливку, то есть, если у вашего элемента будет фон, то он скорее всего наедет на контент перед ним. Для того, чтобы игнорировать padding при добавлении фона на элемент, используйте CSS-свойство background-clip:content-box .

Поддержка браузерами: Chrome конечно же, Firefox 4.0+, Opera 10.6+, Safari 3+.

Замечания:

• Необходима поддержка браузером background-clip:content-box , но это только в том случае, если вы хотите добавить фон элементу.
• Некоторые ограничения при использовании margin (в том числе при margin-collapse — это когда из нижнего отступа первого элемента и верхнего отступа второго определяется наибольший, который и становится величиной отступа между этими элементами).
• Невозможность использования padding-top .

#link-C { padding-top: 55px; margin-top: -55px; -webkit-background-clip: content-box; background-clip: content-box; }

Г: Border и отрицательный margin

По сути то же самое, что и предыдущий метод, но вместо padding используем border . Что это нам даёт?

• Теперь вы спокойно можете использовать внутренние отступы padding .
• Постараюсь выразиться правильно — по идее border — это тот же padding , но только с заливкой и эффектами. Поэтому при использовании фона или заливки элемента нам нужно учесть, чтобы она распростаранялась на сам элемент и на padding , но не на border (ведь он то у нас прозрачный), здесь поможет background-clip:padding-box .
• Ограничение в использовании border-top , которое однако легко решаемо — смотрите ниже.

Поддержка браузерами: Chrome конечно же, Firefox 1.0+, Opera 10.5+, Safari 3+.

#link-D { border-top: 55px solid transparent; margin-top: -55px; padding: 15px; /* паддинги - без проблем */ -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; }

Д: Метод Г с возможностью добавления border-top

Дополнение к предыдущему методу, которое позволит добавить на элемент верхний border . Поддержка браузерами псевдоэлементов и background-clip (только при наличии фона или заливки) обязательна.

Поддержка браузерами: Chrome конечно же, Firefox 3.5+, Opera 10.5+, Safari 3+.

#link-E { position: relative; /* важно - для того, чтобы псевдоэлемент позиционировался относительно этого элемента */ border-top: 55px solid transparent; margin-top: -55px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #link-E:before { content: ""; position: absolute; top: -2px; /* равен по модулю толщине border */ left: 0; right: 0; border-top: 2px solid #ccc; /* собственно то, ради чего всё затевалось */ }

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

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Источник

Html навигация по странице

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

Так же такую навигацию называют навигация по якорям. Для начала создадим якоря в ссылках и тексте. Создадим горизонтальное меню и назовём его topmenu . Пункт меню будет являться ссылкой. В ссылке будет стоять хэштег с номером параграфа item1 . Параграф 1 будет начинаться с заголовка

. В заголовке будет id c таким же названием как и хэштег

paragraf 1

. Это и будет наш якорь. При нажатии на ссылку меню будет происходить переход к нашему якорю. Ниже приведён листинг html кода меню и параграфов.

Осталось нам осуществить плавность данного перехода. Для этого нам понадобится библиотека jquery. Подключим её в хэдер.

$(document).ready(function()< $('.topmenu a').click(function()< /*задали какой мы хотим отступ от верха страницы*/ var otstupTop=100; $('body,html').animate(< /*получили положение элемента вычли отступ и прокрутили*/ scrollTop: $($(this).attr('href')).offset().top-otstupTop >, 1500); >); >);

Этот код нужно пояснить подробнее. Мы задали анимацию прокрутки scrollTop с временем 1500 для элементов body,html при клике по ссылке в меню .topmenu a . Что бы у нас получился отступ от верха экрана в 100px мы его сначало задали переменной var otstupTop=100 и вычислили вычтя его из $(this).attr(‘href’)).offset().top . Это расстояние, которое нужно прокрутить до параграфа, смотря по какой ссылке мы кликнули.

Источник

Меню с якорями css

5 способов создания ссылок-якорей с отступом сверху. Устранение смещения из-за фиксированного блока (шапка, меню).

При использовании ссылок-якорей на сайте, после перехода по ссылке, панель соц сетей закрывала верхнюю часть контента (как правило заголовок) и в итоге пользователю просто было непонятно, куда он в итоге попал

Впервые я столкнулся с этим, когда делал на своем сайте выплывающую панель «Поделиться в соц сетях» при скролле поста вниз (попробуйте).

При использовании ссылок-якорей на сайте, после перехода по ссылке, панель соц сетей закрывала верхнюю часть контента (как правило заголовок) и в итоге пользователю просто было непонятно, куда он в итоге попал. Вы можете опробовать это сами, кликнув по ссылке «A» ниже.

А так как сейчас очень популярно делать фиксированные шапки и меню position:fixed, прилепленные к верхней части экрана, то думаю что этот пост будет интересен многим. В нём я рассмотрю несколько вариантов якорей с отступами от верхней границы экрана при переходе по ним.

Для более ясного понимания на все h2-заголовки я добавил заливку.

A: Стандартный якорь

Пример того, как работает стандартная ссылка-якорь. Если вы попали сюда, кликнув по ссылке, а не просто проскроллили страницу, то скорее всего заголовок у вас оказался полностью скрыт под панелью соц сетей.

Возможно было бы правильнее назвать пост не «5 методов…», а «4 метода…». Потому что это и не метод вовсе, а показательный пример того, как быть не должно, ну да ладно.

Б: Отступ в виде псевдоэлемента

Используем псевдоэлемент для добавления отступа перед элементом — :before или :after .

Поддержка браузерами: Chrome конечно же, IE8+, Firefox 3+, Opera 9.25+, Safari 3+.

Замечания:

• Требуется поддержка браузером CSS псеводоэлементов.
• Метод не работает корректно, если у элемента есть фон или заливка (наезжает на контент).
• Не работает корректно, если у элемента есть свойства padding-top или border-top .

#link-B:before { display: block; content: ""; height: 55px; margin: -55px 0 0; }

В: Положительный padding и отрицательный margin

Используем padding для создания отступа и отрицательный margin , чтобы этот же отступ убрать, а точнее — сделать его незаметным для пользователей.

Обратите внимание, что внутренные отступы padding тоже попадают под заливку, то есть, если у вашего элемента будет фон, то он скорее всего наедет на контент перед ним. Для того, чтобы игнорировать padding при добавлении фона на элемент, используйте CSS-свойство background-clip:content-box .

Поддержка браузерами: Chrome конечно же, Firefox 4.0+, Opera 10.6+, Safari 3+.

Замечания:

• Необходима поддержка браузером background-clip:content-box , но это только в том случае, если вы хотите добавить фон элементу.
• Некоторые ограничения при использовании margin (в том числе при margin-collapse — это когда из нижнего отступа первого элемента и верхнего отступа второго определяется наибольший, который и становится величиной отступа между этими элементами).
• Невозможность использования padding-top .

#link-C { padding-top: 55px; margin-top: -55px; -webkit-background-clip: content-box; background-clip: content-box; }

Г: Border и отрицательный margin

По сути то же самое, что и предыдущий метод, но вместо padding используем border . Что это нам даёт?

• Теперь вы спокойно можете использовать внутренние отступы padding .
• Постараюсь выразиться правильно — по идее border — это тот же padding , но только с заливкой и эффектами. Поэтому при использовании фона или заливки элемента нам нужно учесть, чтобы она распростаранялась на сам элемент и на padding , но не на border (ведь он то у нас прозрачный), здесь поможет background-clip:padding-box .
• Ограничение в использовании border-top , которое однако легко решаемо — смотрите ниже.

Поддержка браузерами: Chrome конечно же, Firefox 1.0+, Opera 10.5+, Safari 3+.

#link-D { border-top: 55px solid transparent; margin-top: -55px; padding: 15px; /* паддинги - без проблем */ -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; }

Д: Метод Г с возможностью добавления border-top

Дополнение к предыдущему методу, которое позволит добавить на элемент верхний border . Поддержка браузерами псевдоэлементов и background-clip (только при наличии фона или заливки) обязательна.

Поддержка браузерами: Chrome конечно же, Firefox 3.5+, Opera 10.5+, Safari 3+.

#link-E { position: relative; /* важно - для того, чтобы псевдоэлемент позиционировался относительно этого элемента */ border-top: 55px solid transparent; margin-top: -55px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #link-E:before { content: ""; position: absolute; top: -2px; /* равен по модулю толщине border */ left: 0; right: 0; border-top: 2px solid #ccc; /* собственно то, ради чего всё затевалось */ }

Источник

Прокрутка к якорю с отступом сверху на CSS

Верстка

Если вы занимаетесь версткой сайтов, или у вас уже есть свой сайт, то вы по любому сталкиваетесь или столкнётесь с якорными меню или оглавлением и следовательно с довольно частой проблемой. При переходе по ссылке-якорю верхняя часть контента скрывается (обычно это заголовок) к примеру фиксированным меню (это сейчас модно), в итоге пользователь просто не понимает куда он попал, что негативно сказывается на юзабилити сайта.

Для тех кто не в курсе что такое якоря — это ссылка на определённый фрагмент текста, в данной статье в верху стоит якорное меню, для быстрой навигации по статье.

Пример HTML разметки якорного меню:

Логика очень простая — вы кликаете на ссылку с якорем и перемещаетесь к самому якорю. И если сверху сайта есть фиксированный блок, то он скроет часть контента — как я писал выше. И ниже я рассмотрю несколько рабочих универсальных вариантов решения данной проблемы, при помощи CSS.

Универсальные варианты устранения смещения из-за фиксированного блока (шапка, меню).

Это может работать, но оно будет перекрывать содержимое перед заголовком. Вы можете добавить position: relative и z-index: -1 чтобы предотвратить наложение предыдущего содержимого.

При желании вы можете добавить следующее, если цель все еще отключена:

Если не помогло пишите , что не так. Помогла тоже пишите, какой вариант помог. Знаете более лучший вариант, делитесь.

Источник