Category: it

Category was added automatically. Read all entries about "it".

Выпадающее меню с прокруткой

Довелось мне решать достатояно сложную и необычную задачу - выпадающее меню с прокруткой. Т.е. если количество пунктов превышает, например, 7, то в выпавшем подменю появляется полоса прокрутки. Поначалу мне попался вариант, представленный на сайте Asus.  Точнее, мне показал заказчик и попросил сделать нечто подобное, не обязательно точно такое же. Главное - идея: есть какие-то пункты, у них есть подпункты в выпадающем (выплывающем) списке.

Потом я нашёл прекрасный пост с целым рядом вариантов выпадающего меню. С другой стороны мне уже была известна прекрасно настраиваемая полоса прокрутки scroll pane, описанная выше. Для своей задачи сначала я выбрал вариант меню номер 13, но его скрипты оказались не совместимые с скриптами scroll pane. Потом приглянулся вариант, построенный на чистом CSS - 38, хотя автора говорят, что использовали JQuery. Идея проста - построение на освнове вкладываемых списков ul. Однако в этом варианте не возможно напрямую присвоить какому-либо блоку класс 'scroll pane'. И тогда мне пришла идея - заключить пункты <li></li> списка в один блок <div class='scroll-pane'></div>. Смотрим:

<ul id="navigation" class="nav-main">
    <li><a href="http://www.psdgraphics.com/">Home</a></li>
    
    <li class="list"><a href="#">Freebies</a>
    <ul class="nav-sub" >
    <div class="scroll-pane">
    <li><a href="#">Backgrounds</a></li>
        <li><a href="#">Buttons</a></li>
        <li><a href="#">Graphics</a></li>
        <li><a href="#">HTML & CSS</a></li>
        <li><a href="#">Icons</a></li>
        <li><a href="#">PSD</a></li>
        <li><a href="#">Templates</a></li>
        <li><a href="#">Tutorials</a></li>    
        </div>
    </ul>
    </li> 
    <li class="list"><a href="#">About</a>
    <ul class="nav-sub">
    <li><a href="#">About PSDGraphics</a></li>
         <li><a href="#">Commercial Use</a></li>
        <li><a href="#">Terms Of Use</a></li>
    </ul>
    </li>
    <li><a href="#">Advertise</a></li>
    <li><a href="#">Contact</a></li>
</ul>


<ul id="navigation" class="nav-main"> - это главные пункты меню.
<ul class="nav-sub" > - это список подпунктов.
<div class="scroll-pane"> - а это наш волшебный блок.

Напоминаю, что необходимо подключить:

<link href="css/dropdown-menu.css" media="screen" rel="stylesheet" type="text/css" /> - свойства меню. Можно и нужно прописывать самому
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" /> - это настройки нашей прокрутки
<script type="text/javascript" src="js/jquery.js"></script> - библиотека JQuery
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script> - библиотека scroll pane
<script type="text/javascript" src="js/jquery.mousewheel.js"></script> - библиотека scroll pane

Также стоит прописать сам стиль:

        <style type="text/css" id="page-css">
            .scroll-pane
            {
                overflow-y:auto;
                overflow-x:hidden;
                height:100px;
                width:300px;
                            }
            </style>
<script type="text/javascript" id="sourcecode">
            $(function()
            {
                $('.scroll-pane').jScrollPane();
            });
</script>

Как менять внешний вид полосы прокрутки scroll на сайтах

Совсем недавно передо мной стала непростая задача: есть блок, ограниченный по высоте. В нём необходимо разместить какой-то текст. Однако текст много больше заданного блока, поэтому появляется полоса прокрутки. И внешний вид её зависит от настройки Вашей операционной системы. Как быть, скажите вы, и этот вопрос резонный.

Традиционные средства CSS не знают свойств полос прокрутки. А нетрадиционные свойственны только эксплореру. Поэтому пришлось хорошо покопаться в интернете, пока не нашёл нужную библиотеку, да ещё и на мою радость совместимую с библиотекой JQuery. Это плагин JScrollPane.

Подключается он просто:
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>

<link type="text/css" href="jquery.jscrollpane.css" rel="stylesheet" media="all" />

При этом, напомню, должна быть подключена библиотека JQuery.

Потом инициализируем класс:
<script type="text/javascript">
$(function()
{
$('.scroll-pane').jScrollPane();
});
</script>

И можем смело применять класс scroll-pane к любому блоку.

<div class="scroll-pane" style='width:300px;height:200px;overflow: auto;'>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</div>

У меня сработало даже на Explorer 6, что само по себе диво дивное.

Вот первоисточник русский.
http://cleverscript.ru/javascript/jquery/49-scrollbar-jquery.html

А вот первоисточник первоисточнейшего разработчика:
http://jscrollpane.kelvinluck.com/