Навигатор для страницы в Blogger

Сегодня я покажу одну интересную разработку на jQuery.
Это не просто очередное меню, а полноценная листалка страницы.
Суть её работы заключаетcя в том, чтобы в нужных местах текста поставить "анкоры" (в данном случае при помощи css), а потом вызывать их с помощью небольшого, неподвижного меню.

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

Теперь можете погонять вперёд-назад страницу и поиграться с меню.

Социальные сервисы интернета (демо)↓





Blogger - одна из самых известных бесплатных блогоплатформ, принадлежит и активно развивается компанией Google. Сервис стартовал в 1999 году под крышей компании Pyra Labs, но почти через 4 года был выкуплен мировым гигантом. Сегодня на блоггере активно тестируются последние разработки Google, внедрены AdSense и picassa, значительно улучшены юзабилити и шаблоны.



Mozilla Firefox не является сервисом как таковым, - это свободный кроссплатформенный браузер, берущий свои корни от Netscape. Последние версии браузера по скорости значительно превосходят старые разработки. С марта по сентябрь 2011 года Mozilla сделали рывок и выпустили аж три версии браузера подряд. Firefox считается стандартом де-факто в сайтостроении.



LiveJournal - достаточно старый сервис, представляет собой смесь блога и социальной сети. В отличие от Blogger, в ЖЖ упор сделан не на техническую часть, а на социальную. Блоги больше всего предназначены для общения (сообщества, общие журналы, friend-ленты) внутри сервиса. Один из явных минусов этого сервиса - обязательная реклама на бесплатных аккаунтах.




Picasa - это бесплатный, почти кроссплатформенный (для linux всё равно используется win версия; для mac нет версии под процессоры powerpc) менеджер фотографий и гигантский фотохостинг (Picasa Web Albums). Принадлежит компании Google и является очень популярным сервисом, тесно интегрирован с Blogger.



Wordpress - свободный движок (CMS) для ведения блога. C 2007 года практически самая популярная платформа не только в России, но и во всём мире. На базе Wordpress можно создать от сайта-визитки до портала или интернет-магазина. Под WP существует большое количество плагинов (подключаемых модулей) и шаблонов, так же эта CMS оказала большое влияние на развитие платформы Blogger (у которой каждый третий шаблон портирован из WP).





Теперь разберёмся с установкой.

Основы:
1) В блоге должна уже быть библиотека jQuery.

2) Как подключать скрипты читать в этой статье.

Навигатор работает на двух jQuery скриптах.
Качаем с гитхаба jquery.nav.min.js и jquery.scrollTo.js, кладём на хостинг.

Коды для блога:

Скрипты:
<script src="http://хостинг/jquery.scrollTo.js"></script>
<script src="http://хостинг/jquery.nav.min.js"></script>

Скрипт подключения:
<script>
$(document).ready(function() {
  $('#nav').onePageNav();
});
</script>

Можно обойтись и без javascript, но тогда переход от одного элемента к другому будет происходить не плавно, а рывками.

Css:
<style>
#nav {
  left: 20px;
  list-style: none;
  position: fixed;
  top: 20px;
}
#nav li {
  margin-bottom: 2px;
}
#nav a {
  background: #ededed;
  color: #666;
  display: block;
  font-size: 11px;
  padding: 5px 10px;
  text-decoration: none;
  text-transform: uppercase;
}
#nav a:hover {
  background: #dedede;
}
#nav .current a {
  background: #666;
  color: #ededed;
}
.current {
  background: red;
}

}
.section {
  border-bottom: 5px solid #ccc;
  padding: 20px;
}
.section p:last-child {
  margin-bottom: 0;
}
</style>
Блок nav регулирует позицию меню на странице.

Html код самого меню (состоящего на демо из 6 пунктов):


<ul id="nav">
<li><a href="#section-0">В начало статьи</a></li>
<li class="current"><a href="#section-1">Blogger</a></li>
<li><a href="#section-2">Mozilla Firefox</a></li>
<li><a href="#section-3">LiveJournal</a></li>
<li><a href="#section-4">Picasa</a></li>
<li><a href="#section-5">Wordpress</a></li>
</ul>

class="current" - выделенный по умолчанию.

И html код текста и элементов (на демо - это описания сервисов):


<div id="container">
<div class="section" id="section-1">
<img border="0" src="http://2.bp.blogspot.com/-oUlJmUI8EH0/TqZiLLbxcLI/AAAAAAAAGi4/qCWU9UGnPNE/s1600/blogger-omg-linux-ru+-+Blogger.png" />


<b>Blogger<b></b></b> - одна из самых известных бесплатных блогоплатформ, принадлежит и активно развивается компанией Google. Сервис стартовал в 1999 году под крышей компании Pyra Labs, но почти через 4 года был выкуплен мировым гигантом. Сегодня на блоггере активно тестируются последние разработки Google, внедрены AdSense и picassa, значительно улучшены юзабилити и шаблоны.</div>

<div class="section" id="section-2">
<img border="0" src="http://3.bp.blogspot.com/-zRTPgJa5FC8/TqZiLw-zYMI/AAAAAAAAGi8/Q5gJLvBfG7c/s1600/blogger-omg-linux-ru+-+Firefox.png" />

<b>Mozilla Firefox</b> не является сервисом как таковым, - это свободный кроссплатформенный браузер, берущий свои корни от Netscape. Последние версии браузера по скорости значительно превосходят старые разработки. С марта по сентябрь 2011 года Mozilla сделали рывок и выпустили аж три версии браузера подряд. Firefox считается стандартом де-факто в сайтостроении.</div>

<div class="section" id="section-3">
<img border="0" src="http://1.bp.blogspot.com/-G4aLkCw9_64/TqZiMUk99gI/AAAAAAAAGjI/fFuZTh2-eyc/s1600/blogger-omg-linux-ru+-+LiveJournal.png" />

<b>LiveJournal</b> - достаточно старый сервис, представляет собой смесь блога и социальной сети. В отличие от Blogger, в ЖЖ упор сделан не на техническую часть, а на социальную. Блоги больше всего предназначены для общения (сообщества, общие журналы, friend-ленты) внутри сервиса. Один из явных минусов этого сервиса - обязательная реклама на бесплатных аккаунтах.</div>

<div class="section" id="section-4">
<img border="0" src="http://3.bp.blogspot.com/-0OGxWXQpzrA/TqZiNs1M57I/AAAAAAAAGjM/bngUe7O2uyo/s1600/blogger-omg-linux-ru+-+Picasa.png" />


<b>Picasa</b> - это бесплатный, почти кроссплатформенный (для linux всё равно используется win версия; для mac нет версии под процессоры powerpc) менеджер фотографий и гигантский фотохостинг (Picasa Web Albums). Принадлежит компании Google и является очень популярным сервисом, тесно интегрирован с Blogger.</div>

<div class="section" id="section-5">
<img border="0" src="http://1.bp.blogspot.com/-9waQTL5qZ3w/TqZiN_JNZ6I/AAAAAAAAGjU/izVohQqm76U/s1600/blogger-omg-linux-ru+-+WordPress.png" />

<b>Wordpress</b> - свободный движок (CMS) для ведения блога. C 2007 года практически самая популярная платформа не только в России, но и во всём мире. На базе Wordpress можно создать от сайта-визитки до портала или интернет-магазина. Под WP существует большое количество плагинов (подключаемых модулей) и шаблонов, так же эта CMS оказала большое влияние на развитие платформы Blogger (у которой каждый третий шаблон портирован из WP).</div>
</div>


Здесь отсутствует section-0, поскольку я привязал его к началу этой страницы (тыцка возврата).
Вы можете добавить (здесь оно уже есть) в css правило для container, чтобы ограничить перелистываемую область, например:
#container {
margin: 0 auto;
width: 500px;
}


Обратите внимание, что при скролировании страницы мышью выделение элементов в меню тоже двигается.

Подсказка.
Если css вынести в отдельный файл и вместе скриптами плагина и настройки прописать в <head></head>, то можно использовать много таких навигаторов (каждый со своими индивидуальными настройками на страницу), меняя только id.

Автор шедевра: Trevor Davis.

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

Отправка комментария