Как создать встроенное меню с кнопками социальных сетей

Как создать встроенное меню с кнопками социальных сетей

От автора: в этом уроке мы научимся делать так называемое встроенное меню с кнопками социальных сетей. Выпрыгивающее меню позволяет читателям поделиться страницей при помощи выделенного кусочка текста. Похожий интерфейс можно встретить на некоторых популярных сайтах.

Прежде чем мы перейдем к созданию нашего меню, мы разберем интерфейс сайта Medium, узнаем, когда меню появляется на экране, а также как оно расположено по отношению к выделенному тексту. Это важный этап нашей работы, который обеспечит нас нужными техническими знаниями. В рамках этого этапа мы поймем, как нам нужно писать код. Поехали!

Изучим интерфейс Medium

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

Если открыть панель разработчика в Chrome и заглянуть под капот, можно узнать, что положение меню задано при помощи инлайновых стилей top и left. Также видно, что у кнопки репоста в социальных сетях есть класс-модификатор highlightMenu—active. Данный класс отвечает за видимость кнопки.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

На вкладке стили видно, что позиционирование в CSS задано в absolute, свойство z-index поднимает меню выше других элементов на странице, а свойства top и visibility выталкивают кнопки за пределы видимой области. Обобщая, нам потребуется:

определить длину выбранной области, чтобы вычислить ее середину;

создать модификатор, чтобы показывать элемент;

задавать расположение меню при помощи свойств top и left через инлайновые стили.

Создаем меню с кнопками социальных сетей

В этом примере в меню мы добавим кнопки Facebook и Twitter. Кнопки Facebook и Twitter будут в SVG формате и будут обернуты в кнопку button и пару тегов div. Также по коду ниже видно, что мы добавили тег span, который будет создавать треугольник в нижней части меню.

Каких-то четких правил по цветам и форме меню нет, можете свободно проектировать меню под свой сайт. Стоит обратить внимание на размер кнопок: на их высоту и ширину. Наше меню, как видно ниже, составляет 84px в ширину и 40px в высоту. Чуть позже эти два значения мы будем использовать для центрирования нашего меню над выбранной областью текста.

Стили с исходным положением и видимостью.

И наконец, класс, который будет добавляться и делать кнопки социальных сетей видимыми.

Добавляем функционал

На данном этапе наше меню не должно быть видно на странице. Также при нажатии на кнопки Facebook и Twitter не появляется окно репоста в социальных сетях. В этой части мы напишем код JavaScript и заставим наши кнопки работать. А начнем мы с функции getHighlight().

Что делает функция:

вытягивает выделенную область с помощью родной JS функции getSelection();

возвращает объект с выделенным текстом, блоком-оберткой текста, а также объектом Rectangle, который дает нам размер и позицию элемента внутри страницы (top, bottom, left и right).

Наша следующая функция называется showMenu(). Судя по названию, функция будет показывать меню.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Что делает функция:

получаем объект из функции getHighlighted();

если выделенная область пуста, прячем меню и возвращаем его в исходное положение;

делаем так, чтобы меню не появлялось, если выделенный текст не обернут в тег параграфа;

устанавливаем свойства top и left, а также добавляем класс sharing—shown, чтобы сделать меню видимым. Я оставил небольшие комментарии, где пояснил, откуда берутся некоторые значения.

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

Чтобы убедиться, что контент выбран правильно, мы добавим задержку в 100ms с помощью функции setTimeout().

Наша последняя функция openShareWindow() будет открывать окно репоста в социальных сетях при клике на кнопки. Так как у Facebook есть свой JavaScript SDK, то эту функцию мы будем использовать в первую очередь для Twitter.

Клик…клик…

Теперь необходимо привязать к кнопке событие click и функцию, которая будет открывать окно репоста.

Для кнопки Facebook мы воспользуемся Facebook JavaScript SDK. SDK позволяет передавать текст в окно репоста через параметр quote.

У Twitter нет собственного JavaScript SDK. Вот тут мы и воспользуемся функцией openShareWindow(), в которую будем передавать отформатированный под размер окна по специальным условиям URL.

По клику на кнопку Twitter должно появляться такое окно.

Заключение

Мы полностью закончили работу над меню кнопок социальных сетей! Перейдите по ссылке, чтобы оценить демо в действии или посмотреть на полный код. Вы можете улучшить меню, добавить ему плавных переходов и анимации, чтобы оно стало еще более привлекательным.

Автор: Louie R.

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree