Шикарная навигация. Как ? (пример)

Как сделать подобную навигацию по меню ?
http://smartblog.com.ua/

Хочу сделать на данном сайте http://vcnews.ru/
Если кто поможет готов заплатить.

тоже видел, красиво, тупо как у нас в россии все делают сп**ить 😉

Я не особо силен в верстке. Если кто может подсказать какой кусок именно надо с…ь. ?

У америкосов на nettuts было создание такого меню.

Мне тоже понравилась навигация в указанном примере.

Вот, немного переделала ту, которая у меня на блоге и получилось почти так же красиво:

<div class="navigation">
<div class="alignright"><?php next_posts_link('Вперед →') ?> </div>
<div class="alignleft"><?php previous_posts_link('← Назад') ?>   </div>

<?php
global $wp_query;
$max_page = $wp_query->max_num_pages;
$nump=3;

if($max_page!=1){
    $paged = intval(get_query_var('paged'));
    if(empty($paged) || $paged == 0) $paged = 1;

    echo '<p class="pagenavi">';

    if($paged!=1) echo '<a href="'.get_pagenum_link(1).'"> 1 </a> ';
        else echo '<span class="current"> 1 </span> ';

    if($paged-$nump>1) $start=$paged-$nump; else $start=2;
    if($paged+$nump<$max_page) $end=$paged+$nump; else $end=$max_page-1;

    if($start>2) echo "... ";

    for ($i=$start;$i<=$end;$i++)
     {
     if($paged!=$i) echo '<a href="'.get_pagenum_link($i).'">'.$i.'</a> ';
        else echo '<span class="current">'.$i.'</span> ';
     }

    if($end<$max_page-1) echo "... ";

if($paged!=$max_page) echo '<a href="'.get_pagenum_link($max_page).'">'.$max_page.'</a> ';
    else echo '<span class="current">'.$max_page.'</span> ';

    echo '</p>'    ;
    }
?>
</div>
.navigation {    
  position: relative; 
  clear: both; 
  width : 480px; /*Указать свой размер*/
  height : auto; 
  text-align: center;
  font-weight : normal; 
  margin: 10px auto 0;
  padding : 0; 
  border-top: 2px solid #E0E0E0; 
}
.navigation .alignleft {  
  float: left;  
  margin: 15px 0 0 0;
}
.navigation .alignright {  
  float: right;  
  margin: 15px 0 0 0;
}
.pagenavi {  
  width : auto; /*Указать свой размер*/
  height : 20px; 
  display: block;
  font-size: 14px;
  text-align: center;
  padding-top : 15px; 
}
.pagenavi a {
  padding: 3px 5px 3px 5px;
  color: #000;
}
.pagenavi .current {
  width : auto; 
  margin: 0;
  padding: 3px 5px 3px 5px;
  color: #999;
}

Показывает, указанное в $nump=3; количество страниц до и после активной страницы + первую и последнюю страницы. Ну и ссылки: Назад-Вперед.

Anonymous
Отправить
Ответ на: