CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 254   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

160

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

Jemand 120487 ,
JavaScript

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

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

2. Подключение jQuery

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

3. Подключение jQuery TabSlideOut

<script src="jquery.tabslideout.v1.2.js" type="text/javascript"></script>

4. JavaScript

<script type="text/javascript">
$(function(){
	$('.panel').tabSlideOut({							//Класс панели
		tabHandle: '.handle',						//Класс кнопки
		pathToTabImage: 'button.gif',				//Путь к изображению кнопки
		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
	});
});
</script>

Все скрипты подключаем в раздел <head> в том порядке в котором указано выше.
5. HTML

<div class="panel">
	<a class="handle" href="http://jemand.ru">Content</a> <!-- Ссылка для пользователей с отключенным JavaScript -->
	<h3><span lang="ru">Заголовок</span></h3><br>
	<span lang="ru">
		Любое содержание здесь!
	</span>
</div>

Демо

Рекламная пауза

» 160 комментариев

  1. Спасибо, перепробовал кучу разных способов, а этот заработал сразу. =)
    И сайт у вас приятный.

  2. Спасибо!
    Я перепробовал много вариантов, пока не наткнулся на Ваш.
    Просто и элегантно, как и должно быть на jQuery.

  3. как это можно прикрутить к wordpress
    помогите пожалуйста

  4. Очень крутой сайт!!! Очень крутой пример!!! большое спасибо за Вашу работу!!!

  5. Спасибо! Наконец-то нашел, что искал :)
    Остается только одно желание: хорошо бы сделать так, чтобы при загрузке страницы панель была выдвинута около секунды, а потом задвигалась для привлечения к себе внимания

  6. На DLE так и не смог прикрутить, все вроде бы работает – но при переходе на полную новость (допустим), то вся работа встает
    _web-silver.ru/forum/attachment.php?attachmentid=3007&d=1310483695

  7. А на uCoz и вовсе не работает.

  8. А можно поставить три такие кнопки и подскажите на какой js код заменить, а дальше я разберусь.

  9. Классная штучка, обязательно куда-нить себе прикручу :)
    И сайт – действительно приятный. Без лишней всякой маяты.
    Ща я его в закладочки-то утромбую…

    Хвал-л-ла Создателю :)

  10. Здравствуйте. Очень понравилась эта панелька. Не знаете как сделать несколько таких панелек на одной странице?

  11. просто супер решение!!!!

  12. подскажите, как реализовать несколько кнопок вверху экрана, чтобы каждая из них вызывала свою панель шириной 100%?

  13. А можно сделать так, что бы при певой загрузки страницы панель была выдвинута. Посетитель прочитал и закрыл и больше внутри его сессии, при переходах и обновлении страниц, панель оставалась закрытой?

  14. Доброй ночи. Супер просто. Админ молодец. И сайт замечательный. Видно умные люди здесь работают. И кстати, можете подсказать куда это в wordpress ставить? На всех сайтах работает, а на этот движок поставить не могу. :(

  15. Хорошая идея…но на юкоз все же не идет.
    Все написала как надо, файл на хостинг залила, а панель, вредина, торчит прямо на виду.
    Кнопки, которая должна её выдвигать и прятать, вообще не видно.
    Жаль, придется искать другой вариант.

  16. Вопрос. По какому принципу идет обращение к картинки для скрипта? А то никак не получается привязать ее к скрипту.

  17. Подскажите, а как сделать фон прозрачным я в этом деле новичок не обессудьте

  18. Подскажите мне, вроде не тупой, но что-то делаю не так (проверял на 3-4 раза), но на моем юкозе не получается ее поставить, проблему не нашел, поможете?
    если что вот ссылка на него _sadsvet.do.am

  19. Подскажите, как при открытии страницы сделать, чтобы панель была уже открыта?

  20. Добрый день. Подскажите, как сделать, чтобы при открытие страницы эта панель автоматически открывалась, а при переходе на другую, закрывалась. Перевернул весь интернет нигде не могу найти пример, да и решение тоже. Одна надежда на Вас. Заранее благодарен.

  21. С открытой панелью при открытии страницы все получилось, СПАСИБО!

  22. Скажите, можно ли так сделать, чтобы панель закрывалась при клике именно на кнопку, а не на весь экран :) В FFox именно так и происходит (в демо-версии тоже).

  23. Вроде нашла, может, кому-то пригодится (закрывание панели при клике на картинку, а не на весь экран):

    $(document).click(function(){
                    slideIn();

    заменяем на

     $(tabHandle).click(function(){
                    slideIn();
  24. В Joomla! тоже получилось внедрить панель.

  25. Спасибо.

  26. Доброго дня. У меня вот такая проблема. Подключил в панель твиттер. Из-за этого панель получается сразу выдвинутой, а при попытки задвинуть её, она лишь немного задвигается ( на пару мм ). Скажите, как быть. Вот скриншот, если не понятно – _s017.radikal.ru/i420/1112/a2/5ecdc6e3a9aa.jpg

  27. Ну я бы хотел оставаться в тени. Может у вас есть скайп?

  28. Ладно, держите.

    самописанный с нуля без движков.

  29. Не помогло добавление в css.

  30. У меня в css коде только (для этого случая)
    .panel {
    width: 153px;
    }

    и не задвигается как видите.

  31. Скажи что где поправить пожалуйста.

  32. Как сможете. так ответьте пожалуйста. буду ждать.

  33. Ну казалось бы сделал. Вам огромное спасибо. Теперь такие вопросы. Зайдите на http://nikitashpak.ru. Есть ли возможность оптимизировать страницу на весь экран, без промотки страницы?

  34. ну вообще было бы намного лучше, когда сайт полностью в экране. у меня же фиксированный контент, ничего нового добавлять не надо. вот как есть.

  35. у меня в консоли ошибок $(“.panel”).tableSlideOut is not a function. хотя в правильном порядке скрипты подключил

  36. Как сделать, чтобы кнопка было по центру страницы?

  37. Подскажите , а можно ли прикрутить выдвигающийся элемент скажем к картинке?
    Хочу к картинке приклеить кнопку(к примеру сбоку) и по нажатию кнопки скажем справа от картинки появлялся бы элемент.
    Спасибо заранее.

  38. Спасибо большое.
    Но появилась одна проблема, точнее конфликт между js. У меня есть блок мини чата, и ссылки использующую открытие окна с помощью js
    , например “Вставить смайлик” и выдается окно с набором смайлов.
    После установки этого модуля, оно перестало действовать и другие функции использующие открытие окно js.

  39. отключил

    и все встало на свои места, и блок работает и панель. тоже везде перерыл нигде нету подключенной jquery.min.js. Т.е панель и без него работает?

  40. Всем привет) С праздником)

    И Праздничный вопрос!
    $(function(){
    $(‘.panel’).tabSlideOut({ //Класс панели
    tabHandle: ‘.handle’, //Класс кнопки
    pathToTabImage: ‘img/music.png’, //Путь к изображению кнопки
    imageHeight: ’100px’, //Высота кнопки
    imageWidth: ’80px’, //Ширина кнопки
    tabLocation: ‘left’,
    speed: 300, //Скорость анимации
    action: ‘click’,
    topPos: ’10px’, //Отступ сверху
    fixedPosition: false
    });
    });

    Отлично, выезжает контейнер все работает! в css пишу высоту контейнера, такую же как у изображения! А в ответ высота контейнера больше)

  41. Ответьте пожалуйста!
    я ставил все как написано но пока не залил на сайт..это может быть причиной не работы скрипта?

  42. Здравствуйте, Учитель) У меня юкоз. Всё вроде правильно делаю. Кнопочка появляется, всё как надо. но это почему-то только на главной так всё хорошо. Когда на другую страницу своего сайта перехожу, то обнаружил что панель перестаёт работать и оказывается вобще не сбоку, а в самом низу торчит неподвижно)
    Как исправить, чтобы везде было так же как и на главной? Помогите=)

  43. А какой именно код? html который??

  44. Сделал так как Вы сказали. На главной странице всё прекрасно получается. Делаю всё точно так же на любой другой, и она тупо стоит (панелька) Ни где -то с боку а просто, как картинка можно сказать.

  45. Здесь ссылку можно кинуть? Сайт всё равно типа “подопытного кролика”=)

  46. Те кому кажется что эта панель – айс, открываем её выделяем имеющийся там текст, затем скрываем и зажав левую кнопку мыши пытаемся увести курсор за правый край браузера; и видим что панель не скрывается а изменяет параметр RIGHT на отрицательный. Но горизонтальной прокрутки мы не видим, хотя по логике она должна появляться, это с связано с тем что горизонтальная прокрутка отключена для этой страницы. И подводя итог можно сказать что прикручивая такую панель к сайту вы распрощаетесь с нижней прокруткой, что не есть ХОРОШО(в случае просмотра сайта не на весь дисплей) и кто нибудь обязательно из ваших посетителей случайно проделает “совет” приведенный выше)

    Подобная панель с левой стороны страницы – это вариант, а справа нужно делать панели изменяющие свою ширину а не атрибут RIGHT на отрицательный)

    Всем удачи)

    _htmlbook_ru/samlayout/blochnaya-verstka/pozitsionirovanie-elementov
    по ссылке выше можно ознакомиться с понятием Абсолютного позиционирование

    • Не все браузеры реагируют на подобные действия, да и вряд ли посетители будут производить все эти манипуляции.
      Вам бы тестером работать…

  47. Ну что когда будут новые версии?) Предлагаю добавить эффект загрузки панели )

  48. Еще раз привет! Короче, обнаружил такую хню…пичальку…на юкозе этом долбанном, оказывается полсе установки этого кода, перестаёт функционировать “Почтовая форма” (не отправляется ниче) и
    “Вход на сайт” выкидывает на страницу и эта надпись: (Этот документ не содержит данных о таблицах стилей.

    <![CDATA[]]>

    )
    возможно еще че-то не работает. Думал влип конкретно, потом удалил код и всё стало на круги своя. Подсказать в чем дело кто-нибудь может?=) А то все планы к чертям полетели…

  49. Подскажите а как сделать кнопку не картинкой а с помощью стилей css. Заранее спасибо!

    • Кнопка и так сделана с помощью CSS, а картинка служит фоновым изображением кнопки.

      Для изменения стилей проделайте следующие действия:
      1. Откройте файл jquery.tabslideout.v1.2.js.
      2. Найдите settings.tabHandle.css({
      3. Изменяйте по своему усмотрению.

  50. А нельзя сделать, что бы стиль можно было изменять в css файле..
    А то я к сожалению с JS не в ладах.

    • Можно!
      Но Вы хотя бы посмотрели тот кусок кода о котором я говорил?

      
              settings.tabHandle.css({
                  'display': 'block',
                  'width' : settings.imageWidth,
                  'height': settings.imageHeight,
                  'textIndent' : '-99999px',
                  'background' : 'url('+settings.pathToTabImage+') no-repeat',
                  'outline' : 'none',
                  'position' : 'absolute'
              });
      

      CSS видите?

      Можете удалить всё что относится к CSS из JS файла и добавить в CSS файл.

  51. Такое дело сделал все как вы сказали. Спасибо помогло! Но одно большое но, я пишу кнопке название.. а оно не появляется.

  52. Спасибо, большое! Люблю ваш сайт :*

  53. Помогите поставить на ucoz
    Ответ пожалуйст в Skype [mr.spooky4]

  54. Здравствуйте
    Нужна ваша помощь. куда именно вставлять
    куда бы я не пробовал,сразу не работает аккордеон который в шаблоне. что делать?

  55. первый скрипт куда вставлять?

  56. Спасибо, добрый человек, за труды!
    Классная кнопочка – сделал себе на сайт! :-)

  57. Черт! Я искал это неделю, НЕДЕЛЮ! У всех ваших конкурентов какие-то чрезмерно нафиг не нужные прибамбасы, а у вас на сайте именно то, что нужно. Просто шикарно =) Огромное спасибо.

  58. У меня сайт на WordPress.
    В Firefox панелька заработала, правда перестало показываться слайд-шоу NextGEN Gallery.
    А в IE8 выдает ошибку сценария “Объект не поддерживает это свойство или метод functions.js?ver=3.3.2, строка 44 символ 2″

    Jemand, не подскажите в чем может быть дело?

  59. Вопрос. Можна реализовать с помощью этого скрипта подгрузку фоновой музыки без прерывания при перезагрузке страницы на Joomla.

  60. Добрый день.
    Подскажите пожалуйста. Как можно с помощью этого метода сделать 2 или более выдвигающихся панелей, расположенных рядом и например чтобы при открытие двух панелей они не наезжали друг на друга.
    Спасибо.

  61. Добрый вечер. Замечательные примеры и скрипты. Спасибо вам огромное. Это именно то, что нужно начинающим.
    Такой вопрос: как сделать выдвигающуюся панель не при клике на кнопку, а при клике на ссылку. Или нужно именно через определенный элемент это делать?

  62. Добрый день, скрипт поставил как написано, библиотеки подключил, а блок все равно висит в футере, и не работает! помогите разобраться, вот сайт _sgassurv.ru
    Заранее благодарен

    • Здравствуйте!
      Вся проблема в комментариях к JavaScript-у.
      Либо удалите их, либо пишите в одну строку, либо в начале каждой строки ставьте двойной слэш, например:
      Неправильно:

      fixedPosition: false //Позиционирование блока false -
      position: absolute, true - position: fixed
      

      Правильно:

      fixedPosition: false //Позиционирование блока false -
      //position: absolute, true - position: fixed
      

      Видите разницу?

      • Спасибо, помагло!! но теперь панел зафиксировалась в одном положении, то есть не ездит вместе с прокруткой страницы, и немогу разобраться куда положить картинку кнопки??

        • За позиционирование отвечает строка:

          fixedPosition: false //Позиционирование блока false - position: absolute, true - position: fixed

          Путь к изображению прописывайте в строке:

          pathToTabImage: 'button.gif', //Путь к изображению кнопки

          Путь = ссылка на изображение, абсолютная или относительная, без разницы.

  63. Jemand огромное вам спасибо, без вашей помощи точно бы не разобрался!! Все заработало как нужно!!

  64. И опять я, почему то на главной странице кнопка отображается а на внутренних невидно???

  65. Во первых спасибо автору за хорошее решение!
    Хочется спросить, как сделать так, что бы панель выезжала при наведении мыши?
    Спасибо!

  66. Установил на joomla, все работает!
    Но есть пару вопросов:
    1. В настройках скрипта я указал action: ‘hover’
    работает, но….
    в каком-то определенном положении курсора панель начинает самопроизвольно выезжать и заезжать, то есть цикл бесконечный, пока не сдвинешь курсор чуть в другое положение. Это не очень то и нравиться.
    2. Как можно подключить звуковой эффект при выезжании панели?

    Спасибо!

  67. хочу такую!!! не работает


Оставить комментарий