Набор стилей для формирования постраничной навигации на CSS3
Постраничная навигация так или иначе присутствует практически на всех сайтах или блогах, если конечно они не являются одностраничными. Большинство шаблонов имеют в комплекте образчики верстки и стилевого оформления блоков постраничной навигации. Но чаще всего, это ничем не примечательный набор цифр со стрелками вперед и назад, обозначенные, в некоторых случаях, невыразительной рамкой. Именно этот элемент сайта, многим хочется как то выделить, гармонично вписав его в общий дизайн.
Можно посидеть часок-другой экспериментируя со стилями и создать что-нибудь своё, а можно воспользоваться готовыми решениями, которых если поискать отыщется немало. Например блогеры, которые ведут свой блог на движке WordPress и с успехом пользуют популярнейший плагин WP-Pagenavi, могут подглядеть неплохую подборку стилей здесь, или же воспользоваться исходниками любого понравившегося шаблона.
Когда мне на глаза попался адаптивный универсальный шаблон сайта — «Response», я обратил внимание на приличный набор стилей оформления постраничной навигации, выполненный с использованием свойств CSS3. Немного поработав со значениями, добавив недостающие функции для отдельных браузеров (градиент в Opera), получил готовый комплект стилей для форматирования постраничной навигации сайта.
Имея под рукой такой набор, вы с легкостью сможете видоизменять панельку оформления постраничной навигации, как душе угодно. Тем более, что стиль один — редактируются только цветовые оттенки этого стиля.
Для того чтобы вам было легче разобраться, в исходниках прописал некоторые комментарии к стилям каждой панельки того или иного цвета. Ну, а html-код, который получится в результате вывода функций постраничной навигации, прост до неприличия и выглядит следующим образом:
<div class="pagination"> <ul> <li><a href="#" title="Старт" class="blacksquare">Старт</a></li> <li><a href="#" title="Назад" class="blacksquare">« Назад</a></li> <li><a href="#" title="1" class="blacksquareactive">1</a></li> <li><a href="#" title="2" class="blacksquare">2</a></li> <li><a href="#" title="3" class="blacksquare">3</a></li> <li><a href="#" title="4" class="blacksquare">4</a></li> <li><a href="#" title="5" class="blacksquare">5</a></li> <li><a href="#" title="6" class="blacksquare">6</a></li> <li><a href="#" title="7" class="blacksquare">7</a></li> <li><a href="#" title="8" class="blacksquare">8</a></li> <li><a href="#" title="9" class="blacksquare">9</a></li> <li><a href="#" title="10" class="blacksquare">10</a></li> <li><a href="#" title="Вперед" class="blacksquare">Вперед »</a></li> <li><a href="#" title="Конец" class="blacksquare">Конец</a></li> </ul> </div> |
Присутствуют все необходимые CSS-классы, их можно использовать для оформления любого элемента навигации. Следует отметить, что все панели выполнены без единого изображения, только средствами CSS3, так что не стоит забывать о том, что не все браузеры одинаково хорошо поддерживают свойства CSS3 и следует внимательно относиться к данному факту))).
CSS-код всего набора стилей достаточно объемный и нет смысла приводить его целиком в записи, для работы проще воспользоваться исходным файлом pagenavi_style.css, бережно упакованном в архиве с исходниками. Выбираете понравившийся цветовой оттенок, при необходимости корректируете значения и все.
Поковырять код можете здесь…
Надеюсь, что после публикации этой записи, мы сможем лицезреть на ваших сайтах или блогах, радующие глаз, аккуратно и главное в тему оформленные, замечательные панели постраничной навигации.
Сегодня на десерт — смотрим видео необычного Chrome Эксперимента:
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Ещё раз спасибо всё получилось
здраствуйте у меня вопросик по теме: плагин нужен( я так понял это просто красивыетстили) и код указанный на странице это вывод постраничной навигации?
Если нужен плагин, присмотритесь к WP-Pagenavi. Там же подробная инфа по настройке плагина и привязке стилей css. Стили из статьи можете использовать, как с плагином так и без него, а html код в статье, это то что получится при вызове функции пагинации. Как организовать постраничную навигацию без плагина, подробно расписано здесь >>, повторяться нет смысла. Вам останется только сменить класс у div (а) и в нужном месте, вставить в шаблон необходимый код для вызова функции. Всё-о! )))
Большое спасибо за быстрый ответ!!! Пошел настрайвать )))
У меня такой вопрос, а как изменить базовый стиль?
Смотря что вы хотите поменять, а в общем всё очень просто, в файле pagenavi_style.css присутствуют комментарии к основным разделам. Например, находите раздел с комментом /*** Постраничная навигация базовый стиль ***/ и меняете нужные вам значения тех или иных свойств.
Вот как выглядит моя навигация seriyknig.okis.ru/igra-prestolov-1.pg1.html
меня интересует как ее привести к вашей форме обозначений.
В статье явно и чётко расписаны примеры кода и структура построения пагинации. Я использовал неупорядоченный список
liпомещённый в отдельный div-контенер, для построения постраничной навигации и через определённый классclass="pagination", привязал к списку необходимые стили. Незнаю, с помощью чего и как у вас генерируются страницы и соответственно сама пагинация, глядя на исходник, думается мне, вам будет сложно самой разобраться, но можно, с помощью друзей, специалиста и т.д. Если конечно оно вам надо, в принципе, стиль вашей пагинации, неплохо гармонирует с общим дизайном вашего сайта, немного скученно, но представьте, как будут выглядеть объёмные кнопки в таком количестве, если не организовать разрыв и не ограничить число одновременно выводимых чисел.Здравствуйте! Спасибо за страничную навигацию, пригодилась!!! Я новичок, делаю сайт без шаблонов WordPress и др., кодировать учусь сама. Столкнулась с проблемой перехода статей со страницы на страницу. Допустим, на главной странице превью 10 статей, на 2й стр. их только 2. Пишу еще 1 статью и хочу, чтобы новая осталась на главной странице, а на 2й странице было уже 3 статьи. Возможно ли как-то это реализовать не перенося превью статьи в ручную? Посоветуйте пожалуйста, как правильно привязать статьи к страницам.
Здравствуйте!
Если вы не используете никакую систему управления и ваш сайт полностью рукописный, структурирование и размещение статей соответственно происходит в ручную, что конечно же создает трудности с перераспределением статей по страницам. Без движка, дополнительных модулей, js или php, реализовать автоматическое разбиение на страницы просто невозможно. Реализовать пагинацию (разбивку контента на страницы) вы можете с помощью jQuery-плагинов,для примера посмотрите на этот: SimplePagination.js
Большое спасибо! Буду делать!