Главная
Web-дизайн
Выдвигающаяся панель с любой стороны

Выдвигающаяся панель с любой стороны

Доброго времени суток!
Иногда на сайте нужно организовать такой блок, который не должен занимать место "Спереди" но быть всегда под рукой. К примеру окно обратной связи или "контакты", окно для входа в личный кабинет, в общем все что изначально должно быть скрытым. Идея заключается в том, что справа/слева вверху/внизу будет кнопка, при нажатии на которую будет выдвигаться панель. И так - приступим.

Можете посмотреть пример:

1. Подключение библиотек jQuery

Для работы скрипта, необходимо подключить библиотеку jQuery перед закрывающимся тегом

</head>

Если у Вас уже подключалась библиотека ранее для работы какого-то другого скрипта, то пропустите этот шаг для избежания конфликтов и нарушения работы других скриптов.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

2. Подключение скрипта панели

Создайте файл, например panel.js и вставте в него следующий код:

$(function(){
	$('.panel').tabSlideOut({						//Класс панели
		tabHandle: '.handle',						//Класс кнопки
		pathToTabImage: 'imgbutton.jpg',			//Путь к изображению кнопки
		imageHeight: '122px',						//Высота кнопки
		imageWidth: '40px',							//Ширина кнопки
		tabLocation: 'right',						//Расположение панели top - выдвигается сверху, right - выдвигается справа, bottom - выдвигается снизу, left - выдвигается слева
		speed: 300,									//Скорость анимации
		action: 'click',							//Метод показа click - выдвигается по клику на кнопку, hover - выдвигается при наведении курсора
		topPos: '200px',							//Отступ сверху
		fixedPosition: false						//Позиционирование блока false - position: absolute, true - position: fixed
	});
});
(function($){
    $.fn.tabSlideOut = function(callerSettings) {
        var settings = $.extend({
                   
        }, callerSettings||{});

        settings.tabHandle = $(settings.tabHandle);
        var obj = this;
        if (settings.fixedPosition === true) {
            settings.positioning = 'fixed';
        } else {
            settings.positioning = 'absolute';
        }
        
        //ie6 doesn't do well with the fixed option
        if (document.all && !window.opera && !window.XMLHttpRequest) {
            settings.positioning = 'absolute';
        }
        
        //set initial tabHandle css
        settings.tabHandle.css({ 
            'display': 'block',
            'width' : settings.imageWidth,
            'height': settings.imageHeight,
            'textIndent' : '-99999px',
            'background' : 'url('+settings.pathToTabImage+') no-repeat',
            'outline' : 'none',
            'position' : 'absolute'
        });
        
        obj.css({
            'line-height' : '1',
            'position' : settings.positioning
        });

        
        var properties = {
                    containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
                    containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
                    tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
                    tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
                };

        //set calculated css
        if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
            obj.css({'left' : settings.leftPos});
            settings.tabHandle.css({'right' : 0});
        }
        
        if(settings.tabLocation === 'top') {
            obj.css({'top' : '-' + properties.containerHeight});
            settings.tabHandle.css({'bottom' : '-' + properties.tabHeight});
        }

        if(settings.tabLocation === 'bottom') {
            obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'});
            settings.tabHandle.css({'top' : '-' + properties.tabHeight});
            
        }
        
        if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
            obj.css({
                'height' : properties.containerHeight,
                'top' : settings.topPos
            });
            
            settings.tabHandle.css({'top' : 0});
        }
        
        if(settings.tabLocation === 'left') {
            obj.css({ 'left': '-' + properties.containerWidth});
            settings.tabHandle.css({'right' : '-' + properties.tabWidth});
        }

        if(settings.tabLocation === 'right') {
            obj.css({ 'right': '-' + properties.containerWidth});
            settings.tabHandle.css({'left' : '-' + properties.tabWidth});
            
            $('html').css('overflow-x', 'hidden');
        }

        //functions for animation events
        
        settings.tabHandle.click(function(event){
            event.preventDefault();
        });
        
        var slideIn = function() {
            
            if (settings.tabLocation === 'top') {
                obj.animate({top:'-' + properties.containerHeight}, settings.speed).removeClass('open');
            } else if (settings.tabLocation === 'left') {
                obj.animate({left: '-' + properties.containerWidth}, settings.speed).removeClass('open');
            } else if (settings.tabLocation === 'right') {
                obj.animate({right: '-' + properties.containerWidth}, settings.speed).removeClass('open');
            } else if (settings.tabLocation === 'bottom') {
                obj.animate({bottom: '-' + properties.containerHeight}, settings.speed).removeClass('open');
            }    
            
        };
        
        var slideOut = function() {
            
            if (settings.tabLocation == 'top') {
                obj.animate({top:'-3px'},  settings.speed).addClass('open');
            } else if (settings.tabLocation == 'left') {
                obj.animate({left:'-3px'},  settings.speed).addClass('open');
            } else if (settings.tabLocation == 'right') {
                obj.animate({right:'-3px'},  settings.speed).addClass('open');
            } else if (settings.tabLocation == 'bottom') {
                obj.animate({bottom:'-3px'},  settings.speed).addClass('open');
            }
        };

        var clickScreenToClose = function() {
            obj.click(function(event){
                event.stopPropagation();
            });
            
            $(document).click(function(){
                slideIn();
            });
        };
        
        var clickAction = function(){
            settings.tabHandle.click(function(event){
                if (obj.hasClass('open')) {
                    slideIn();
                } else {
                    slideOut();
                }
            });
            
            clickScreenToClose();
        };
        
        var hoverAction = function(){
            obj.hover(
                function(){
                    slideOut();
                },
                
                function(){
                    slideIn();
                });
                
                settings.tabHandle.click(function(event){
                    if (obj.hasClass('open')) {
                        slideIn();
                    }
                });
                clickScreenToClose();
                
        };
        
        //choose which type of action to bind
        if (settings.action === 'click') {
            clickAction();
        }
        
        if (settings.action === 'hover') {
            hoverAction();
        }
    };
})(jQuery);

В начале скрипта строки, в которых можно настроить появление.
Далее подключаем данный файл сразу после подключения библиотеки.

<script src="panel.js" type="text/javascript"></script>

3. Вставка HTML кода

Далее вставляем где-то(где Вам удобнее) после тега

<body>

следующий код html:

<div class="panel">
	<a class="handle" href="#">Смотреть</a> <!-- Ссылка для пользователей с отключенным JavaScript -->
	<h3><span > Заглавие </span></h3><br>
	<span>
		Текст или скрипт сюда
	</span>
</div>

4. Стили CSS

Для настройки панели которая появится после нажатия кнопки используйте следующий код CSS:

.panel {
	padding: 20px;
	width: 250px;
	background: #eeeeee;
	border: #282828 2px solid;
	font-family: Georgia;
}

Если вы все сделали правильно, то у Вас появится результат. Также можете скачать исходники.

На этом все. Спасибо за внимание 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(15 голосов, в среднем: 5 из 5)

Опубликован 31 комментарий

  • proffit
    Комментариев: 2

    А как сделать, чтобы она была как FIXED?

    • Виталий
      Комментариев: 269

      В файле panel.js в 11 строке нужно поставить значение true, которое означает position: fixed; Смотрите внимательно там написано.

  • reverse
    Комментариев: 5

    Огромное спасибо , все получилось !

  • reverse
    Комментариев: 5

    в стандартном браузере iphone страница отображается вместе с выплывающим окном, то есть страница становится шире картинка отображается сразу . не подскажете как исправить ?

    • Виталий
      Комментариев: 269

      Проверил только что, вроде нормально. Возможно у Вас java отключено?

      • reverse
        Комментариев: 5

        я проверял через iphone4simulator.com . может проблема в верстке самого сайта ? ag-ro.com

        • Виталий
          Комментариев: 269

          Возможно, я пользуюсь часто вот этим ресурсом. Тут и айпад и айфон ipadpeek.com

          • reverse
            Комментариев: 5

            проверил на реальном айфоне , с включенной "java'ой" работает как нужно ) еще момент , при загрузке рисунок появляется в теле сайта на долю секунды ( раньше встречался с таким , было из за дублирования скриптов , сейчас дублей нет . Не знаете причину ? Можете глянуть , сайт ag-ro.com

            • Виталий
              Комментариев: 269

              Раз 10 перегружал не увидел, попробуйте "panel.js" подключить не в шапке, а в подвале перед закрывающимся "body"? тогда получится что его будит грузить в последнюю очередь. Правда, может и не работать.

              • reverse
                Комментариев: 5

                разместил ниже , пока появление картинки не наблюдается , спасибо !

  • Олег
    Комментариев: 4

    А как можно сделать чтоб окно выдвигалось с регулируемой задержкой
    те при открытии страницы окно закрыто и через 15 сек (например) окно автоматически открывается ?
    копал в в инете нашел параметр onLoadSlideOut
    может он отвечает за этот параметр - задержку появления
    сам не могу разобраться - но нашел на облаке где можно потестировать этот скрипт http://jsfiddle.net/1Lpdykhx/ вставляя свои параметры
    можно ли реализовать эту функцию при открывании страницы со скриптом ?

    • Виталий
      Комментариев: 269

      Думаю, если захотеть, то сделать можно. Пока данным вопросом не занимался, может со временем сделаю панель с таким эффектом. Вам возможно подойдет вот такая панель, правда она появляется при прокрутке, а не с задержкой.

      http://gnatkovsky.com.ua/files/scrol_block/index.html

      С задержкой у меня появляется модальное окно, если уберете в стилях затемнение экрана и расположение, то можно в принципе сделать, чтобы оно появлялось сбоку.
      http://gnatkovsky.com.ua/vsplyvayushhee-okno-pri-zagruzke-stranice-pokazyvaetsya-odin-raz-s-zaderzhkoj.html

  • Олег
    Комментариев: 4

    сделал задержка 15 сек пример http://jsfiddle.net/1Lpdykhx/55/

  • Олег
    Комментариев: 4

    var slideOutOnLoad = function () {
    slideIn();
    setTimeout(slideOut, 15000);
    };

    if (settings.action === 'click') {
    clickAction();
    }
    if (settings.action === 'hover') {
    hoverAction();
    }
    if (settings.onLoadSlideOut) {
    slideOutOnLoad();
    };

    };
    })(jQuery);

    $(function() {
    $('.slide-out').tabSlideOut( {
    tabHandle: '.handle',
    speed: 300,
    action: 'click',
    tabLocation: 'left',
    topPos: '142px',
    leftPos: '20px',
    fixedPosition: true,
    positioning: 'absolute',
    pathToTabImage: "http://xxx.ru/attachments/Image/zadat-vopros.png",
    imageHeight: '250px',
    imageWidth: '33px',
    onLoadSlideOut:true
    });
    });

  • Олег
    Комментариев: 4

    в конце кода добавить - под свой сайт и путь к своей картинке

  • Владимир
    Комментариев: 1

    Все сделал, воткнул туда форму обратной связи. Все заработало как надо. Только плагин Fancybox для WP перестал работать. Можно ли сделать, чтобы он тоже функционировал?

    • Виталий
      Комментариев: 269

      Возможно у Вас конфликт библиотеки jquery. Попробуйте удалить строку с подключением библиотеки. Если перестанет работать панель, то нужно будет немножко другим методом подключить. Напишите мне на почту или скайп и я напишу как.

  • квакин
    Комментариев: 1

    еще бы понять как этот скрипт к cms ocstor 15512 подключить
    подскажите пожалуйста
    Спасибо

    • Виталий
      Комментариев: 269

      С данной cms не работал, но, в статье по сути универсальный способ подключения. Скрипты подключаются перед закрывающимся тегом
      </head>
      он есть по любому 100%. Код панели вставлять можно где угодно,по сути можно сразу после открывающегося тега
      <body>
      он тоже есть 100%. Стили же вставляются в файл стилей, который имеет расширение css. Чаще всего он имеет название style.css хотя может быть и другое.

  • Василий
    Комментариев: 1

    Спасибо, Автор.
    Проверил, работает, все понятно, вопросов нет - мне это нужно было, начинаю вставлять.
    Есть другой скрипт, тоже рабочий и проще.
    Но!
    Этот удобнее.

  • Игорь
    Комментариев: 1

    Вопрос: Как победить конфликт с другим jquery.min, уже подключенным к странице?

  • Евгений
    Комментариев: 3

    Добрый вечер. Пункт первый - "Для работы скрипта, необходимо подключить библиотеку jQuery перед закрывающимся тегом"
    Вот эта библиотека, каким бы образом ее не подключать, по этому адресу или через файл с сайта, она портит гугл тест спид. Гугл ругается и занижает скорость загрузки сайта. Как быть с этим? Можно ли как то исправить или обмануть скрипт?

    • Виталий
      Комментариев: 269

      Возможно у Вас будет работать без нее. Если нет, то увы. Библиотека это большой скрипт, который грузится и забирает скорость загрузки. Можете себе скачать ее на сайт и подключать не с серверов гугла а с своего сайта. Но я сомневаюсь, что Ваш сайт ее загрузит быстрее гугловских серверов, хотя попробовать можно 🙂

  • Евгений
    Комментариев: 3

    ПРобовал уже, без нее не работает. Загружал со своего сайта тоже, результат такой же.

  • Александр
    Комментариев: 2

    Здравствуйте, а можно ли выполнить второй пункт по другому (2. Подключение скрипта панели), мне нужно поставить его перед закрывающим тегом Body.

    • Виталий
      Комментариев: 269

      Здравствуйте. Попробуйте подключить в низу, то только и библиотеку тоже следует подключать внизу.

      • Александр
        Комментариев: 2

        Странно работает скрипт)
        Почему же нельзя подключить библиотеку в head а все остальные скрипты внизу?

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий