Выдвижная (боковая) панель javascript



Ниже приводится приятная "выпадающая панель" по динамическому приводу. http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm

как вы можете видеть, это панель, которая выдвигает содержимое "тела" при открытии в направлении "сверху вниз".
Я хотел бы знать, возможно ли изменить его код, чтобы иметь скользящую (боковую) панель с направлением "вправо-влево" или "вправо-влево", которая выдвигает содержимое "тела" при открытии?

заранее спасибо

Источник

2 ответа

Решение

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

<div class="container">
  <a href="#2" class="toggle">toggle</a>
  <div class="hidden">
  </div>
  <div class="body">
  </div>
</div>


.container {position:relative; }

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

.hidden {
  width:50px; 
  height:300px; 
  background:pink;
  position:absolute; 
  left:0;z-index:10;
}

Затем поместите этот элемент абсолютно на 0 слева от нашего ссылочного элемента и с z-индексом, чтобы убедиться, что он появляется над элементом body при расширении.

.body {width:500px; height:300px; background:grey; float:left;}

Наконец, вам нужно включить jQuery на вашу страницу и использовать что-то вроде следующей функции.

$('.toggle').click(function(){
    if (open != true){
         $(".hidden").animate({width:'300px'}, 500);
         open = true;
    }
    else
    { 
         $(".hidden").animate({width:'50px'}, 500);
         open = false;
    }
    return false;
});

Который выберет ваш элемент a.toggle и установит событие щелчка на нем. Когда это срабатывает в первый раз open не будет определен так не будет (!=) быть правдой. Затем мы можем анимировать (api.jquery.com/animate/) ширину до желаемого размера более 500 мс и объявить наш open переменная в рамках этой функции, чтобы быть правдой. В следующий раз, когда мы запустим событие click для этой конкретной функции, второй раздел после } else { будет стрелять вместо

Вы можете попробовать демо на http://jsfiddle.net/DcWS2/. Если это не совсем то, к чему ты стремишься, тогда я с радостью помогу дальше.

РЕДАКТИРОВАТЬ

Более полное решение вашего вопроса может выглядеть следующим образом ( http://jsfiddle.net/DcWS2/3/)

$('.hidden').hover(function(){
    $(".hidden").stop().animate({width:'200px'}, 500);
    $(".body").stop().animate({marginLeft:'200px'}, 500);
},function(){ 
    $(".hidden").stop().animate({width:'30px'}, 500);
    $(".body").stop().animate({marginLeft:'30px'}, 500);
});
Источник

Не знаю точно, как бы вы сделали это с Dynamic Drive, но вы можете сделать это очень легко с помощью jQuery show / hide:

HTML:

<div id="helpPanel">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a>
<div class="normal">
    Maecenas ultrices feugiat nibh sit amet mattis. Nullam et sapien id turpis tempus tincidunt non ac sapien.
</div>

CSS:

#helpPanel {  border: 1px solid red; overflow: auto; display: none; }
.normal { margin-top: 15px; border: 1px solid blue; }

JavaScript:

var state = true;
var $panel = $("#helpPanel");
$("#button").on("click" ,function() {
    if ( state ) {
        $panel.show(1000);
    } else {
        $panel.hide(1000);
    }
    state = !state;
});

Рабочая Демо

Источник
Другие вопросы по тегам