Главная » HTML & CSS » Набор стилей для формирования постраничной навигации сайта на CSS3

Набор стилей для формирования постраничной навигации сайта на CSS3

Набор стилей для формирования постраничной навигации  сайта на CSS3

Постраничная так или иначе присутствует практически на всех сайтах или блогах, если конечно они не являются одностраничными. Большинство шаблонов имеют в комплекте образчики верстки и стилевого оформления блоков постраничной навигации. Но чаще всего, это ничем не примечательный набор цифр со стрелками вперед и назад, обозначенные, в некоторых случаях, невыразительной рамкой. Именно этот элемент сайта, многим хочется как то выделить, гармонично вписав его в общий дизайн.
Можно посидеть часок-другой экспериментируя со стилями и создать что-нибудь своё, а можно воспользоваться готовыми решениями, которых если поискать отыщется немало. Например блогеры, которые ведут свой блог на движке WordPress и с успехом пользуют популярнейший плагин WP-Pagenavi, могут подглядеть неплохую подборку стилей здесь, или же воспользоваться исходниками любого понравившегося шаблона.

Когда мне на глаза попался адаптивный универсальный шаблон сайта — «Response», я обратил внимание на приличный набор стилей оформления постраничной навигации, выполненный с использованием свойств . Немного поработав со значениями, добавив недостающие функции для отдельных браузеров (градиент в Opera), получил готовый комплект стилей для форматирования постраничной навигации сайта.
Имея под рукой такой набор, вы с легкостью сможете видоизменять панельку оформления постраничной навигации, как душе угодно. Тем более, что стиль один — редактируются только цветовые оттенки этого стиля.
 

Стили постраничной навигации

Для того чтобы вам было легче разобраться, в исходниках прописал некоторые комментарии к стилям каждой панельки того или иного цвета. Ну, а html-код, который получится в результате вывода функций постраничной навигации, прост до неприличия и выглядит следующим образом:
 

<div class="pagination">
     <ul>
         <li><a href="#" title="Старт" class="blacksquare">Старт</a></li>
         <li><a href="#" title="Назад" class="blacksquare">&laquo; Назад</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">Вперед &raquo;</a></li>
         <li><a href="#" title="Конец" class="blacksquare">Конец</a></li>
    </ul>
</div>

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

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

 

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

11 комментариев
  1. денис says:

    здраствуйте у меня вопросик по теме: плагин нужен( я так понял это просто красивыетстили) и код указанный на странице это вывод постраничной навигации?

    Ответить
    • driver says:

      Если нужен плагин, присмотритесь к WP-Pagenavi. Там же подробная инфа по настройке плагина и привязке стилей css. Стили из статьи можете использовать, как с плагином так и без него, а html код в статье, это то что получится при вызове функции пагинации. Как организовать постраничную навигацию без плагина, подробно расписано здесь >>, повторяться нет смысла. Вам останется только сменить класс у div (а) и в нужном месте, вставить в шаблон необходимый код для вызова функции. Всё-о! )))

      Ответить
  2. денис says:

    Большое спасибо за быстрый ответ!!! Пошел настрайвать )))

    Ответить
  3. денис says:

    Ещё раз спасибо всё получилось

    Ответить
  4. У меня такой вопрос, а как изменить базовый стиль?

    Ответить
    • driver says:

      Смотря что вы хотите поменять, а в общем всё очень просто, в файле pagenavi_style.css присутствуют комментарии к основным разделам. Например, находите раздел с комментом /*** Постраничная навигация базовый стиль ***/ и меняете нужные вам значения тех или иных свойств.

      Ответить
  5. Вот как выглядит моя навигация seriyknig.okis.ru/igra-prestolov-1.pg1.html

    меня интересует как ее привести к вашей форме обозначений.

    Ответить
    • driver says:

      В статье явно и чётко расписаны примеры кода и структура построения пагинации. Я использовал неупорядоченный список li помещённый в отдельный div-контенер, для построения постраничной навигации и через определённый класс class="pagination", привязал к списку необходимые стили. Незнаю, с помощью чего и как у вас генерируются страницы и соответственно сама пагинация, глядя на исходник, думается мне, вам будет сложно самой разобраться, но можно, с помощью друзей, специалиста и т.д. Если конечно оно вам надо, в принципе, стиль вашей пагинации, неплохо гармонирует с общим дизайном вашего сайта, немного скученно, но представьте, как будут выглядеть объёмные кнопки в таком количестве, если не организовать разрыв и не ограничить число одновременно выводимых чисел.

      Ответить
  6. Лисенок says:

    Здравствуйте! Спасибо за страничную навигацию, пригодилась!!! Я новичок, делаю сайт без шаблонов WordPress и др., кодировать учусь сама. Столкнулась с проблемой перехода статей со страницы на страницу. Допустим, на главной странице превью 10 статей, на 2й стр. их только 2. Пишу еще 1 статью и хочу, чтобы новая осталась на главной странице, а на 2й странице было уже 3 статьи. Возможно ли как-то это реализовать не перенося превью статьи в ручную? Посоветуйте пожалуйста, как правильно привязать статьи к страницам.

    Ответить
    • driver says:

      Здравствуйте!

      Если вы не используете никакую систему управления и ваш сайт полностью рукописный, структурирование и размещение статей соответственно происходит в ручную, что конечно же создает трудности с перераспределением статей по страницам. Без движка, дополнительных модулей, js или php, реализовать автоматическое разбиение на страницы просто невозможно. Реализовать пагинацию (разбивку контента на страницы) вы можете с помощью jQuery-плагинов,для примера посмотрите на этот: SimplePagination.js

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru