<script type="text/javascript" src="https://forumstatic.ru/files/0011/e9/e1/32423.js"></script>

<script type="text/javascript">
        //перечисляем ВСЕ категории: "название":"ссылка на изображение"
        //в порядке их расположения
        var catmenu = {
            "Работа сервиса и форума":"http://www.iconsearch.ru/uploads/icons/alien/32x32/home.png",
            "Технический раздел":"http://www.iconsearch.ru/uploads/icons/oxygen/32x32/preferences-system.png",
            "Форумы Quadro.Boards":"http://www.iconsearch.ru/uploads/icons/nuvola2/32x32/edu_languages.png",
            "Прочее":"http://www.iconsearch.ru/uploads/icons/webapp/32x32/comment.png",
            "Архив":"http://www.iconsearch.ru/uploads/icons/nuove/32x32/package.png"            //после последней запятая ненужна
        };
        function scrMenuMake(catlist,catarr) {
            var menuhtml = '';
            $('#pun-announcement').prepend('<div id="pagenav" class="pageScroller"><ul></ul></div>');
            $(catarr).each(function(){menuhtml+= '<li><a href="#"><img src="'+catmenu[$(this).find('span').html()]+'"></a></li>';})
            $('#pagenav ul').append(menuhtml);
        }
        jQuery(document).ready(function(){
            var cats = $('.category');
            if(cats.length>0) {
                scrMenuMake(catmenu, cats);
                jQuery('#pun-index').pageScroller({
                    navigation: '#pagenav',
                    sectionClass: 'category'
                });}
        });
    </script>

<style>
    #pagenav {
        right: -110px;
        margin: -180px 0px 0px;
        overflow: visible;
        padding: 5px;
        position: fixed ! important;
        top: 50%;
        width: 150px;
        z-index: 0;
    }
    #pagenav ul {
        background: none repeat scroll 0% 0% #f0f0f0;
        border-radius: 15px 15px 15px 15px;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);;
        display: block;
        list-style: none outside none;
        margin: 0px;
        padding: 6px 0px;
    }
    #pagenav li {
        display: block;
    }
    #pagenav li a {
        display: block;
        padding: 8px 10px;
        text-align: left;
    }
    #pagenav li.active a {
        background-color: #a0a0a0;
        box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.5);
    }
</style>

<style>
    #pagenav {
        rigth: -110px;
        margin: -180px 0px 0px;
        overflow: visible;
        padding: 5px;
        position: fixed ! important;
        top: 50%;
        width: 150px;
        z-index: 0;
    }
    #pagenav ul {
        background: none repeat scroll 0% 0% #f0f0f0;
        border-radius: 15px 15px 15px 15px;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);;
        display: block;
        list-style: none outside none;
        margin: 0px;
        padding: 6px 0px;
    }
    #pagenav li {
        display: block;
    }
    #pagenav li a {
        display: block;
        padding: 8px 10px;
        text-align: right;
    }
    #pagenav li.active a {
        background-color: #a0a0a0;
        box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.5);
    }
</style>