Сегодня я покажу одну интересную разработку на jQuery.
Это не просто очередное меню, а полноценная листалка страницы.
Суть её работы заключаетcя в том, чтобы в нужных местах текста поставить "анкоры" (в данном случае при помощи css), а потом вызывать их с помощью небольшого, неподвижного меню.
Давайте посмотрим демо (меню в левой части экрана). Для этого я подготовил картинки с небольшими описаниями (маловажный текст-баян), чтобы было между чем передвигаться (не всё время ж отсылать читателя на тестовый блог...)
Листать можно любой текст, любые элементы блога, на любой странице. Конечно данный скрипт может работать почти на любом движке, где есть возможность использовать javascript и подключать библиотеку 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 пунктов):
class="current" - выделенный по умолчанию.
И html код текста и элементов (на демо - это описания сервисов):
Здесь отсутствует section-0, поскольку я привязал его к началу этой страницы (тыцка возврата).
Вы можете добавить (здесь оно уже есть) в css правило для container, чтобы ограничить перелистываемую область, например:
#container {
margin: 0 auto;
width: 500px;
}
Обратите внимание, что при скролировании страницы мышью выделение элементов в меню тоже двигается.
Подсказка.
Если css вынести в отдельный файл и вместе скриптами плагина и настройки прописать в <head></head>, то можно использовать много таких навигаторов (каждый со своими индивидуальными настройками на страницу), меняя только id.
Автор шедевра: Trevor Davis.
Комментариев нет:
Отправить комментарий