Главная » DARYA DLE » Готовые дизайны » Дизайн постраничной навигации
267 0  

Дизайн постраничной навигации

Примеры оформления постраничной навигации для шаблона DLE Darya 2.

Чтобы сменить навигацию в шаблоне нужно поменять соотвествующие части кода в файле navigation.tpl

----

Навигация между страницами ДЛЕ

----

Пример 1 (Bootstap)

  
 

Содержимое navigation.tpl:

<div class="box-nav">
	<div class="p-nav">
		<span class="pprev">[prev-link]<i class="bg-str_l"></i>[/prev-link]</span>
		<span class="page">{pages}</span>
		<span class="pnext">[next-link]<i class="bg-str_r"></i>[/next-link]</span>
	</div>
</div>

Отвечаючий css (/css/style.css):

/* --- PAGE NAVIGATION --- */
.box-nav {display: table;width: 100%;padding: 30px 0;}
.box-nav.last-comments {padding: 0;}
.p-nav {display: block;text-align: center;}
.p-nav .pprev a, .p-nav .pnext a, .p-nav .page a, .p-nav .page span, .p-nav .page span.nav_ext {display: inline-block;padding: 13px;font-size: 18px;letter-spacing: 1px;text-transform: uppercase;text-align: center;transition: all 0.3s ease}
.p-nav .pprev span, .p-nav .pnext span {display: none;}
.pnext, .pprev	{display:inline-block;padding:7px 13px 7px 13px;border:1px solid #ccc; cursor:pointer;border-radius:5px;}
@media screen and (max-width: 1279px) {.page a:nth-child(n+7) {display: none;}}
@media screen and (max-width: 991px) {.box-nav {padding: 0 0 30px 0;}}
@media screen and (max-width: 767px) {.page a:nth-child(n+1),.page span.nav_ext {display: none;} .page > span:before {float: right;content: '-я стр';text-transform: none;}}
/* --- /PAGE NAVIGATION --- */

 

Пример 2 (Простой)

 

Содержимое navigation.tpl:

<div class="navigation">[prev-link]Назад[/prev-link] {pages} [next-link]Вперед[/next-link]</div>

Отвечаючий css (/css/style.css):

<style>
.navigation{flex:1 100%; display:block; width:100%; overflow:hidden; margin:20px 0; border:none} 
.navigation a:link,.navigation a:active,.navigation a:visited{ background:#E5E5E5; border: 1px solid #BCBCBC;  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); color: #747474; font-size: 12px; font-weight: normal; padding: 4px 7px; text-shadow: 0 1px 0 #FFFFFF; text-transform: lowercase;} 
.navigation a:hover{ background-color: #EFEFEF; color: #747474;} 
.navigation span{ background: none repeat scroll 0 0 #5C5C5C;  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) inset, 0 1px 0 #FFFFFF; color: #FFFFFF; cursor: default; padding: 4px 7px; }
.navigation::before, .navigation::after {float: none;content: ""; display: block; height: 2px; width: 100%; clear: both;}
</style>

 

Пример 3 (Современный стиль)

  
Содержимое navigation.tpl:

<div class="clear str-20"></div>
<div class="pagi-nav">
[not-page-count=1]<span class="pprev">[prev-link]«[/prev-link]</span>[/not-page-count]
<span class="navigation">{pages}</span><span class="pnext">[next-link]	» [/next-link]</span>
</div>

Отвечаючий css (/css/style.css):

/* --- PAGE NAVIGATION --- */
.pagi-nav {line-height:36px; text-align:left; font-size:16px; margin:20px 0;}
.pagi-nav > span {display:inline-block;}
.pnext a, .pprev a {display:block; width:36px; text-align:center; border-radius:3px;}
.navigation {padding:0 20px; text-align:center;}
.navigation a, .navigation span {display:inline-block; padding:0 5px; min-width:36px; margin:0 7px 5px 0; border-radius:3px; background-color:#f5f5f5; color:#AFAEAE;}
.navigation span {background-color:#292929; color:#fff;}
.pagi-nav a:hover {background-color:#292929; color:#fff;}
.navigation span.nav_ext {background-color:transparent; color:#888;}
.dle-comments-navigation .pagi-nav {margin-bottom:0; padding-bottom:20px;}
@media screen and (max-width: 950px) {.pagi-nav {white-space:nowrap; overflow-y:hidden; overflow-x:auto;}}
/* --- /PAGE NAVIGATION --- */

  

 


Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2020