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

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

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

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

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

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

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

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

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

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

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

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

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

<div class="sharing">
    <div class="sharing__buttons">
        <button id="share" title="Share">
            <svg class="icon icon--facebook" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512; width: 24px; height: 24px" xml:space="preserve"><g></g><g><g><path d="M426.8, 64H85.2C73.5, 64, 64, 73.5, 64, 85.2l0, 341.6c0, 11.7, 9.5, 21.2, 21.2, 21.2H256V296h-45.9v-56H256v-41.4 c0-49.6, 34.4-76.6, 78.7-76.6c21.2, 0, 44, 1.6, 49.3, 2.3v51.8l-35.3, 0c-24.1, 0-28.7, 11.4-28.7, 28.2V240h57.4l-7.5, 56H320v152h106.8 c11.7, 0, 21.2-9.5, 21.2-21.2V85.2C448, 73.5, 438.5, 64, 426.8, 64z"/></g></g></svg>
        </button>
        <button id="tweet" title="Tweet">
            <svg class='icon icon--twitter' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512; width: 24px; height: 24px' xml:space='preserve'><path d='M492, 109.5c-17.4, 7.7-36, 12.9-55.6, 15.3c20-12, 35.4-31, 42.6-53.6c-18.7, 11.1-39.4, 19.2-61.5, 23.5
                C399.8, 75.8, 374.6, 64, 346.8, 64c-53.5, 0-96.8, 43.4-96.8, 96.9c0, 7.6, 0.8, 15, 2.5, 22.1c-80.5-4-151.9-42.6-199.6-101.3
                c-8.3, 14.3-13.1, 31-13.1, 48.7c0, 33.6, 17.2, 63.3, 43.2, 80.7C67, 210.7, 52, 206.3, 39, 199c0, 0.4, 0, 0.8, 0, 1.2c0, 47, 33.4, 86.1, 77.7, 95c-8.1, 2.2-16.7, 3.4-25.5, 3.4c-6.2, 0-12.3-0.6-18.2-1.8c12.3, 38.5, 48.1, 66.5, 90.5, 67.3c-33.1, 26-74.9, 41.5-120.3, 41.5
                c-7.8, 0-15.5-0.5-23.1-1.4C62.8, 432, 113.7, 448, 168.3, 448C346.6, 448, 444, 300.3, 444, 172.2c0-4.2-0.1-8.4-0.3-12.5
                C462.6, 146, 479, 129, 492, 109.5z'/>
            </svg>
        </button>
    </div>
    <span class="sharing__triangle"></span>
</div>

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

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

.sharing {
    position: absolute;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 500;
}

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

.sharing--shown {
    visibility: visible;
}

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

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

function getHighlight() {
 
    var selection = window.getSelection(); // 1.
 
    var object = {
        parent : null,
        text   : '',
        rect   : null
    };
 
    // Если выборка не пуста.
    if ( selection.rangeCount > 0 ) {
        object = {
            text   : selection.toString().trim(), // вытягиваем текст.
            parent : selection.anchorNode.parentNode, // получаем родительский блок-обертку текста.
            rect   : selection.getRangeAt(0).getBoundingClientRect() // получаем рамку.
        };
    }
 
    return object; // 2.
}

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

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

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

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

var sharing = document.querySelector( '.sharing' );
 
function showMenu() {
 
    // 1.
    var highlight = getHighlight();
 
    // 2.
    if ( highlight.text === '' ) {
 
        sharing.setAttribute( 'class', 'sharing' );
        sharing.style.left = 0;
        sharing.style.top  = 0;
 
        return;
    }
 
    // 3.
    /**
     * Показываем меню только в случае, если выделенная область параграф.
     */
    if ( highlight.parent.nodeName !== 'P' ) {
        return;
    }
 
    // 4.
    var width = ( highlight.rect.width / 2 ) - 42;
    /**
     * "42" получено путем деления ширины кнопок на 2.
     */
 
    sharing.setAttribute( 'class', 'sharing sharing--shown' );
    sharing.style.left = ( highlight.rect.left + width ) + 'px';
    sharing.style.top  = ( highlight.rect.top - 40 ) + 'px';
    /**
     * "40" – высота наших кнопок.
     * Тут мы поднимаем меню над верхней границей выделенного текста.
     */
}

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

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

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

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

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

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

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

document.body.addEventListener( 'mouseup', function() {
     setTimeout( showMenu, 100 );
} );

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

function openShareWindow( url, w, h ) {
 
    var screenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
    var screenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
    var width = window.innerWidth ? window.innerWidth : doc.documentElement.clientWidth ? doc.documentElement.clientWidth : screen.width;
    var height = window.innerHeight ? window.innerHeight : doc.documentElement.clientHeight ? doc.documentElement.clientHeight : screen.height;
 
    var left = ( ( width / 2 ) - ( w / 2 ) ) + screenLeft;
    var top = ( ( height / 2 ) - ( h / 2 ) ) + screenTop;
 
    var newWin = window.open( url, "", "scrollbars=no,width=" + w + ",height=" + h + ",top=" + top + ",left=" + left );
 
    if ( newWin ) {
        newWin.focus();
    }
}

Клик…клик…

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

// Facebook.
document.getElementById( 'share' ).addEventListener( 'click', function() {
 
    var highlight = getHighlight();
 
    if ( highlight.text !== '' && highlight.parent.nodeName === 'P' ) {
        FB.ui({
            method : 'share',
            mobile_iframe: true,
            href   : 'http://bitly.com/2aiHmCs',
            quote  : highlight.text // передаем текст в виде цитаты
        });
    }
 
    event.preventDefault();
} );

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

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

document.getElementById( 'tweet' ).addEventListener( 'click', function() {
 
    var highlight = getHighlight();
 
    if ( highlight.text !== '' && highlight.parent.nodeName === 'P' ) {
 
        var docURL = encodeURIComponent( 'http://bitly.com/2aiHmCs' );
        var tweetText = encodeURIComponent( highlight.text );
        var tweetURL = 'https://twitter.com/intent/tweet?via=wdtuts&url=' + docURL + '&text=' + tweetText;
 
        openShareWindow( tweetURL, 600, 420 );
    }
 
    event.preventDefault();
} );

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

Заключение

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

Автор: Louie R.

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

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

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

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

Получить

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree