Переключатель страниц как в ВКонтакте для uCoz

Опубликовано 23-02-2013, 20:18 в разделе Красивая навигация

Установив данный скрипт и стили на свой сайт в системе uCoz, Вы получите красиво оформленную постраничную навигацию с дизайном как В Контакте. В предлагаемом примере используется uCoz вариант, но если немного подкорректировать код, он может быть с успехом использован практически на любом движке. Прозрачная округлая панель переключателя страниц будет появляться только в то время, когда Вы оказываетесь в конце страницы. Также, можно легко внедрить в переключателе страниц кнопку для скроллинга вверх, что в свою очередь дополнительно повысит функциональность скрипта.

Установка переключателя страниц uCoz:

Код HTML (Вставить вместо $ - PAGE_SELECTOR$):

Код

<div style="display:none;position:absolute;top:0;margin-top:30px" id="pageselector"><table cellspacing="0" cellpadding="0"><tr><td width="1"><div class="pages_1"> </div></td><td class="pages_2">$PAGE_SELECTOR$</td><td width="1"><div class="pages_1"> </div></td></tr></table></div><script type="text/javascript">$(window).scroll(function () {st = $(window).scrollTop();var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();if(scrollBottom < 500) {$("#pageselector").fadeIn(500)} else {$("#pageselector").fadeOut(100)}$('#pageselector').css('top', st+'px')$('#pageselector').css('opacity', '0.8')});</script><style type="text/css">.pages_1 {width:1px;height:48px;overflow:hidden;background:black}.pages_2 {background:black;height:50px}.pagesBlockuz1 {margin-left:10px;margin-right:10px;}.swchItemA {color:white;font-seight:bold;text-desotation:none;border-bottom:3px solid #ffffff;padding:3px;background:none;margin:5px;}.swchItem {color:white;text-desotation:none;padding:0;background:none;margin:5px;}.swchItem:hover {color:white;text-desotation:none;padding:0;background:none;margin:5px;}.swchItemDots {color:white;text-desotation:none;padding:0;background:none;margin:5px;}</style>