• Home /
    • Web / JavaScript /
  • Слайд панель с закладками в социальные сети в стиле mashable.com

Слайд панель с закладками в социальные сети в стиле mashable.com

Опубликовано

Кроме того, что сайт www.mashable.com является центральным поставщиком новостей для множества пользователей интернета, это еще и наиболее продвинутый ресурс в плане проникновения в него социальных сетей и современных технологий.

Сайт был открыт в 2005 году и благодаря глубокой интеграции с социальными сетями, обеспечил довольно высокий объем просмотров страниц сайта(более 25 миллионов в месяц). Для пользователей мобильного интернета доступны приложения для более удобного чтения статей Mashable на iPhone или iPad, но они не позволят в полной мере насладиться новым дизайном ресурса.

Если закончить с хвальбами(а мне сайт действительно очень нравиться, как с точки зрения контента, так и с точки зрения usability) и перейти непосредственно к находкам разработчиков сайта mashable.com, предлагаю вам обратить внимание на то как именно реализована панель с кнопками различных социальных сервисов(Twitter, Facebook и DiggIT).

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

[youtube]iA9aTjmNVEY[/youtube]

На первый же взгляд этот эффект реализован при помощи JavaScript, скорее всего используется библиотека jQuery. Решение мне понравилось и я попытался найти способ как это можно сделать на своих сайтах.

Я не специалист в jQuery, если вас интересуют углубленные знания этой библиотеки, почитайте цикл статей jQuery для начинающих. Поэтому для того чтобы реализовать эту возможность пришлось перерыть интернет на предмет решения. На помощь пришла статья от Chris Coyier, посвященная использованию различной разметки CSS при разном размере окна браузера, и обучающее видео:

[vimeo]11167731[/vimeo]

В примере Chris Coyier при помощи jQuery определяет размер окна браузера и в зависимости от размера, использует нужный файл стиля *.CSS.

Типичная разметка сайта выглядит таким образом:

Так выглядит большинство современных web сайтов(ну или с боковой колонкой в правой части). Для добавления скользящей панели с социальными закладками, так же придется прибегнуть к коду на jQuery. Хотя никакой сложности он и не вызовет:

$(function() {
var offset = $("#box").offset();
var topPadding = 35;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#box").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#box").stop().animate({
marginTop: 0
});
};
});
});

Так же добавьте в файл стиля описание разметки блока для вывода социальных закладок:

#box{position: absolute;
left:50%; top:10%; bottom:auto;
margin-left:-486px; border: 1px solid #7ca5be; border-right: 0px;padding: 10px;background-color: #eee;
}

В коде описано смещение влево на 486 пикселей, на 10% от верхней границы страницы и стиль оформления блока.

Но так мы получили только скользящую панель с социальными закладками, а это только половина дела по пути к находке Mashable.

Вернемся к уроку от Chris Coyier и добавим в разметку сайта еще два файла стиля

Medium.css:

body { background: #999; }
#page-wrap { width: 800px; }
#main-content { float: right; width: 512px; height: 800px; }
#secondary-one { float: left; width: 200px; height: 800px; }
#box { display:none; }
#floating-box { display: none; }

Выглядеть страница с таким стилем будет так:

Wider.css:

body { background: #999; }
#page-wrap { width: 800px; position: relative; }
#main-content { float: left; width: 512px; height: 800px; margin-left: 247px; }
#secondary-one { width: 200px; height: 800px; position: absolute; left: 0; top: 64px; }
#secondary-two { display: none; }

Как видно первый стиль описывает страницу, на которой наша плавающая панель не будет видна, с другой стороны во втором стиле "исчезает" блок, располагающийся под заголовком, и плавающая панель показывается на странице.

Определение размера окна браузера и смена стиля страницы выполняется при помощи пары функций на jQuery, которые приводит в своем примере Chris Coyier:

function adjustStyle(width) {
width = parseInt(width);
if (width < 1001) {
$("#size-stylesheet").attr("href", "css/medium.css");
} else {
$("#size-stylesheet").attr("href", "css/wide.css");
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});

По id находиться вызов соответствующего стиля в заголовке HTML страницы("size-stylesheet"), и если размер окна браузера был изменен, функция adjustStyle выберет какой именно файл CSS будет использоваться.

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

После того, как добавлены файлы стилей и JavaScript, и выполнена разметка элементов на странице, добавьте счетчики добавления страницы в социальные сети, например, Mail.Ru, Google Buzz и Facebook. Чтобы не изуродовать внешний вид плавающей панели огромной кнопкой от Mail.Ru, можете использовать результат из прошлого примера, где мы меняли размер share кнопки от mail.ru.

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

Пример отлично работает в браузерах на WebKit движке:

  • Safari
  • Google Chrome

так же работает в IE 7 и выше

с "мерцанием" работает в браузерах:

  • Firefox
  • Opera

Эти браузеры в момент изменения размера окна браузера выгружают используемый стиль и через мгновение загружают новый, из-за этого возникает эффект "мерцания" страницы.

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

PS: если вам не очень интересно делать "гибкий" дизайн и плодить CSS файлы, достаточно будет добавить плавающую панель как описано в руководстве.


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

  1. WordPress плагин слайд панели с социальными закладками
  2. 10 примеров использования CSS вместо графики
  3. Как вывести блок с информацией об авторе поста в WordPress
  4. Переделываем размер share кнопки от Mail.ru
  5. Как сделать вашему сайту иконку для iPhone
Comments by