<div class="scrollBox">
    <div id="pane" class="scroll-pane">
    <div class="jScrollPaneContainer">
    <div class="jScrollPaneDrag">
    <div class="jScrollPaneDragTop">
    <div class="jScrollPaneDragBottom">
    <div class="jScrollArrowUp">

пункт меню<br>
пункт меню<br>
пункт меню<br>

</div>
</div>
</div>
</div>
</div>
</div>
</div>

<link rel="stylesheet" type="text/css" href="{THEME}/css/jScrollPane.css" />

     <script type="text/javascript">
        jQuery(function() {
            jQuery('.scroll-pane').jScrollPane({scrollbarWidth:18, showArrows:true});
        });
    </script>

.scroll-pane {
    width: 190px; /* Ширина видимой области*/
    height: 410px; /* Высота видимой области*/
    overflow: auto; /* Если отключены скрипты это правило позволит отобразить обычный скролл */
}

.jScrollPaneContainer {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Трек - полоса по которой бегает ползунок */
.jScrollPaneTrack {
    height: 100%;
}

/* Средняя часть ползунка (резиновая, т.к. ползунок меняет высоту в зависимости от количества содержимого) */
.jScrollPaneDrag {
    background: url(../images/scrollDrag.gif) repeat-y; /* задаем фоновую картинку или просто цвет фона */
    overflow: hidden;
    left:1px;
}
/* верхушка ползунка (можно задать height:0, если ползунок не имеет выраженной верхушки) */
.jScrollPaneDragTop {
    overflow: hidden;
    background: url(../images/scrollDragTop.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */
}
/* низ ползунка (можно задать height:0, если ползунок не имеет выраженного низа) */
.jScrollPaneDragBottom {
    overflow: hidden;
    background: url(../images/scrollDragBot.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */
}
/* стрелка вверх (правило можно исключить, если скролл по дизайну без стрелок) */
a.jScrollArrowUp {
    display: block;
    z-index: 1;
    top: 0;
    right: 0;
    text-indent: -2000px;
    overflow: hidden;
    height: 18px; /* высота стрелки (ширина определяется шириной скролла при инициализации скрипта) */
    background: url(../images/arrow_up.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */
}
/* стрелка ввниз (правило можно исключить, если скролл по дизайну без стрелок)*/
a.jScrollArrowDown {
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
    text-indent: -2000px;
    overflow: hidden;
    height: 18px; /* высота стрелки (ширина определяется шириной скролла при инициализации скрипта) */
    background: url(../images/arrow_down.gif) no-repeat; /* задаем фоновую картинку или просто цвет фона */
} 

<?php $sql_result = $db->query( "SELECT id, title, date, alt_name, category, short_story, flag FROM " . PREFIX . "_post WHERE approve='1' ORDER BY news_read DESC LIMIT 0,9" );

while ( $row = $db->get_row()){$row['date'] = strtotime( $row['date'] );$row['category'] = intval( $row['category'] );

if( $config['allow_alt_url'] == "yes"){if( $row['flag'] and $config['seo_type']){if( $row['category'] and $config['seo_type'] == 2 ){$full_link = $config['http_home_url'] . get_url( $row['category'] ) . "/" . $row['id'] . "-" . $row['alt_name'] . ".html";

}else{
    $full_link = $config['http_home_url'] . $row['id'] . "-" . $row['alt_name'] . ".html";}
    }else{
        $full_link = $config['http_home_url'] . date( 'Y/m/d/', $row['date'] ) . $row['alt_name'] . ".html";}
        }else{
            $full_link = $config['http_home_url'] . "index.php?newsid=" . $row['id'];}$title = substr( $row['title'], 0, 34 ) . "...";
            $short_story = substr( strip_tags($row['short_story']), 0, 80 )."...";$shortnews = $row['short_story'];preg_match_all( '#<img[^>]*\\ssrc=(\'|")(.*?)\\1.*?>#i',
            $shortnews,$total);foreach( $total[2] as $image )
            
            echo('<div class="item"><a href="'.$full_link.'"><img src="'.$image.'" alt="" width="178" /></a><div class="pump"></div><div align="center" class="caption"><a href="'.$full_link.'">'.$title.'</a></div></div>');}?>
            
                   

$.fn.infiniteCarousel = function () {

    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
  
    return this.each(function () {
        var $wrapper = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapper.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),
            
            singleWidth = $single.outerWidth(), 
            visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
            currentPage = 1,
            pages = Math.ceil($items.length / visible);            


        // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
        if (($items.length % visible) != 0) {
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
            $items = $slider.find('> li');
        }

        // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect
        
        // 3. Set the left position to the first 'real' item
        $wrapper.scrollLeft(singleWidth * visible);
        
        // 4. paging function
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
            
            $wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page == 0) {
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                } 

                currentPage = page;
            });                
            
            return false;
        }
        
        $wrapper.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');
        
        // 5. Bind to the forward and back buttons
        $('a.back', this).click(function () {
            return gotoPage(currentPage - 1);                
        });
        
        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });
        
        // create a public interface to move to a specific page
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });  
};

$(document).ready(function () {
  $('.infiniteCarousel').infiniteCarousel();
});









$(document).ready(function() {

//в пикселях
var move = -14;

//процент масштабирования, 1.2 =120%
var zoom = 1.2;

//при наведении курсора мыши
$('.item').hover(function() {

//Настройка ширины и высоты в соответствии со значением переменной zoom
width = $('.item').width() * zoom;
height = $('.item').height() * zoom;

//сдвигаем и масштабируем
$(this).find('img').stop(false,true).animate({'width':width, 'top':move, 'left':move}, {duration:200});

//Отображение надписи
$(this).find('div.caption').stop(false,true).fadeIn(200);
},
function() {
//Восстановление изображения
$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'top':'0', 'left':'0'}, {duration:100}); 

//Скрытие надписи
$(this).find('div.caption').stop(false,true).fadeOut(200);
});
});

$(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

});

            <div class="list-items bwrbs">
                <div class="content">
                    <ul>
{include file="engine/modules/popul.php"}
                    </ul>
                </div>
            </div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jScrollPane.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="jScrollPane.css" />

<body>
    <div class="scroll-wrap">
        <div class="scroll-pane">
пункт меню
пункт меню
пункт меню
пункт меню
        </div>
    </div>
</body>

<?
$g = $r = $u = 0;
$robots = $users = $guest = "";
foreach ($this->online as $key=>$val)
{
    if($val['id'] == 2) {$r++; $robots .= "<b class=\"online_robot\" onmouseover=\"showhint('<b>Бот:</b> {$val[name]}<br /><b>Группа:</b> {$val['group']}<br />{$val['position']}<br /><b>Был здесь в:</b> ".date("H:i:s", $val['time'])."', this, event, '180px');\">{$val[name]}</b>";}
    elseif($val['id'] == 1) {$u++; 
    if($val['foto']) $foto = "<center><img src=/uploads/fotos/{$val['foto']} /></center>"; else $foto = "<center><img src=/templates/{$this->config['skin']}/images/noavatar.png /></center>";
    if($val['foto']) $foto2 = "<img border=\"1\" bordercolor=\"online_user group_{$val['groupid']}\" src=/uploads/fotos/{$val['foto']} width=39 />"; else $foto2 = "<img border=\"1\" bordercolor=\"online_user group_{$val['groupid']}\" src=/templates/{$this->config['skin']}/images/noavatar.png width=38 />"; 
    if($this->config["allow_alt_url"]!="no") $profile = "/user/".urlencode($val['name'])."/"; else $profile = "/?subaction=userinfo&user=".urlencode($val['name']); $popup = "onclick=\"ShowProfile('".urlencode($val['name'])."', '".htmlspecialchars($profile)."'); return false;\""; $users .= "<a {$popup} class=\"online_user group_{$val['groupid']}\" onmouseover=\"showhint('$foto <b>Ник:</b> {$val[name]}<br /><b>Группа:</b> {$val['group']}<br /><b>ОС:</b> {$val['os']}<br /><b>Браузер:</b> {$val['browser']}<br />{$val['position']}<br /><b>Был здесь в:</b> ".date("H:i:s", $val['time'])."', this, event, '180px');\" href=\"$profile\">$foto2</a>";}
    elseif ($val['id'] == 0) {$g++; $foto3 = "<img src=/templates/{$this->config['skin']}/images/noavatar.png width=40 />"; $guest .= "<b class=\"online_guest\" onmouseover=\"showhint('<b>Группа:</b> {$val['group']}<br /><b>ОС:</b> {$val['os']}<br /><b>Браузер:</b> {$val['browser']}<br />{$val['position']}<br /><b>Был здесь в:</b> ".date("H:i:s", $val['time'])."', this, event, '180px');\">$foto3</b>";}
}
?>