Как сделать выезжающую панель для сайта?

Question

[nizulko]

Коллеги, ищу реализацию следующей панельки для сайта: слева, как сейчас реализованный различные помощники, при наведении на надпись-ярлычок «Открыть» она выезжает и фиксируется, далее по клику опять же по той надписи «Открыть» она закрывается и снова виднеется лишь надпись-ярлычок. А под надписью-ярлычком должен быть крестик закрытия его на данной старичке.

Чем проще реализация, тем лучше!

Я так понимаю, что без jQuery не обойтись…

Очень надеюсь на Вашу помощь!

Answer 1

[nizulko]

Скрипт реализован очень быстро и качественно!

С позволения автора, публикую пару решений:
jsfiddle.net/4vuPS/1/ — панель открывается по щелчку и закрывается также
jsfiddle.net/4vuPS/2/ — панель открывается при наведении и закрывается по щелчку

Огромнейшее спасибо и низкий поклон!!!

Comments

[Вячеслав]

У меня только один вопрос: А этот скрипт куда именно нужно ставить?
(function($) {
$(document).ready(function() {
var $panel = $('#panel');
if ($panel.length) {
var $sticker = $panel.children('#panel-sticker');
var showPanel = function() {
$panel.animate({
left: '+=400',
}, 200, function() {
$(this).addClass('visible');
});
};
var hidePanel = function() {
$panel.animate({
left: '-=400',
}, 200, function() {
$(this).removeClass('visible');
});
};
$sticker
.children('span').click(function() {
if ($panel.hasClass('visible')) {
hidePanel();
}
else {
showPanel();
}
}).mouseenter(function() {
if (!$panel.hasClass('visible')) {
showPanel();
}
}).andSelf()
.children('.close').click(function() {
$panel.remove();
});
}
});
})(jQuery);

Чайник в скриптах я. Подскажите пожалуйста ???? ????

Answer 2

[Seldon]

Под такие вещи готовое искать — себе дороже, понимающему человеку тут работы на 5 минут, вы же наворотите много лишнего и кривого, так что потом будете долго копаться. Найдите специалиста, заплатите денюжку, посмотрите как он делает. Или же почитайте документацию по JQ и сделайте сами там реально 5 строк.

Answer 3

[Ivnika]

Как то не вериться что вы очень искали :)
Например вот: ruseller.com/lessons.php?rub=32&id=224

Или вам нужен пример точь в точь как вы описали?

Answer 4

[Renat Ibragimov]

Написал вам пример простенький gist.github.com/2585435
Важную роль здесь состовляют position и top свойства css c которыми мы играем animate из JQuery при клике, можно top заменить на marginTop но это уже от ситуации и верстки зависит, надеюсь суть понятна будет

Comments

[Renat Ibragimov]

Прочистил код. Выезд слева или справа тоже position: absolute просто свойство left
Появление крестика и его скрытие это уже внутри toggle функций после окончания например показывать в контейнере уже элемент управления.

Answer 5

[moscow_beast]

> Я так понимаю, что без jQuery не обойтись…

Без jQuery всегда можно обойтись. Вопрос в том, насколько это надо. Если на сайте это единственная JS примочка, то имеет смысл помучится но сделать на чистом JS. Но на jQuery — строк 5 от силы.

Comments

[nizulko]

Мне чем проще, тем лучше. Все облазил, но конкретно такой реализации не могу найти. Может кто-то собственным скриптом поделится…

Answer 6

[Ivnika]

или вот: inspectelement.com/demos/jquerycontactus/

Answer 7

[Иван Прилепский]

Подойдет?

Answer 8

[Николай Васильчук]

Если еще нужно, отпишитесь в ЛС. Сделаю завтра как вам нужно безвозмездно.