Анимация появления элемента

@ialex25 · Регистрация: 29.01.2015

Author24 — интернет-сервис помощи студентам

Добрый день!
Хотелось бы попросить Вас помочь в решение следующей задачи:
Требуется создать вертикально выдвигающийся сайдбар (по клику). Наглядный пример: http://www.balt-tech.ru/ (верхний правый угол - плюс на красном фоне).
На просторах "этих самых - интернетов" нашел частично подходящее для меня решение: https://jsfiddle.net/qz5ydgqg/

HTML5

<aside id="sidebar">
  <button id="hide">Скрыть панель</button>
</aside>
<section id="content"></section>

CSS

#sidebar {
  width: 180px;
  /* Ширина элемента */
  float: left;
  /* Выравнивание элемента по левой стороне */
  font-size: 13pt;
  /* Размер шрифта текста */
  height: 800px;
  /* Минимальная высота элемента */
  padding: 10px;
  /* Поля вокруг элемента */
  background: #5577b2;
  /* Цвет фона */
  border-right: #777 solid 1px;
}
 
#content {
  margin-left: 200px;
  /* Отступ слева и справа */
  font-size: 13pt;
  /* Размер шрифта текста */
  height: 800px;
  /* Минимальная высота элемента */
  background: #fff;
  /* Цвет фона */
  padding: 10px;
  /* Поля вокруг элемента */
}

Javascript

$(document).ready(function() {
  // Проверка на HTML5-хранилище
  function supportsLocalStorage() {
    try {
      return 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
      return false;
    }
  }
 
  var wdt, mrgleft;
  var sidebar;
  // Проверяем данные в хранилище
  if (localStorage['sidebar'] == null) {
    localStorage['sidebar'] = 'true';
  }
  //console.log(localStorage['sidebar']);
 
  // Проверяем значение sidebar
  // Если true - значит расширенное меню
  if (localStorage['sidebar'] == 'true') {
    localStorage['wdt'] = '180px';
    localStorage['mrgleft'] = '200px';
  } else {
    localStorage['wdt'] = '50px';
    localStorage['mrgleft'] = '70px';
  }
  //console.log(localStorage['wdt']);
  //console.log(localStorage['mrgleft']);
  $('#sidebar').animate({
    'width': localStorage['wdt']
  }, 500);
  $('#content').animate({
    'margin-left': localStorage['mrgleft']
  }, 500);
 
  // 
  function LSClick(w, ml, sd) {
    $('#sidebar').animate({
      'width': w
    }, 500);
    $('#content').animate({
      'margin-left': ml
    }, 500);
    localStorage['wdt'] = w;
    localStorage['mrgleft'] = ml;
    localStorage['sidebar'] = sd;
    console.log(sd);
  }
 
  $('#hide').click(function() {
    if (localStorage['sidebar'] == 'true') {
      // Запуск
      LSClick('50px', '70px', 'false');
    } else {
      // Запуск
      LSClick('180px', '200px', 'true');
    }
  });
});

Но так, как знания мои по JAVA, к сожалению, на данный момент крайне скудны, после часа с лишним мытарств - я понял, что орешек знания мне не расколоть.
Требуется: создать именно вертикально выдвигающийся (все чего я смог добиться: необходимых размеров, расположения кнопки, и визуального оофрмления, но в конкретно взятом случае сайдбар, как выежал слева направо, так и выезжает и полностью не "захлопывается".

Хотелось бы спросить у людей, который с JAVA "на ты", возможно ли изменить данный пример? Или есть схожая реализация (например с использованием готового скрипта + css). С утра сижу и как рыба об лед...

Заранее спасибо всем откликнувшимся.

@BANO · 15.07.2016, 16:20

ialex25, почитайте

@ialex25 · 15.07.2016, 16:59 **[ТС]**

ок, спасибо

Добавлено через 33 минуты
очень толковая тема!!! разобрался, сделал и понял собственно "что-откуда-и-куда", всяко лучше тыканья в надежде везения.
Ещё раз Спасибо

@BANO · 15.07.2016, 17:23

Не по теме:

ialex25, тот момент, когда кидал пост, а потом оказалось, что тема тоже подходит...

@ialex25 · 15.07.2016, 19:01 **[ТС]**

Аналогично, не по по теме:
на "нужном" посте меня зафиксировали, я и сначала подумал, что "послали погулять". А потом заметил положение scrollbar'a)))

Добавлено через 1 час 25 минут
Не подскажите один момент, момент позиционирования при появление. В теме об том не сказано.
Возможно ли сделать, что бы появление скрытого блока производилось "сверху вниз"?
Пример:

HTML5

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <style>
    * { margin: 0; padding: 0; }
    .box { position: relative;  background-color: #CCC; height: 50px; }
    .hide { display: none; position: absolute; background-color: beige; height: 100%; width: 100%; bottom: 0; }
    .btn { background-color: azure; height: 50px; cursor: pointer; }
    </style>
</head> 
<body>
    <div class="box">
        <p>ОТКРЫТЫЙ ТЕКСТ</p>
        <div class="hide">СКРЫТЫЙ ТЕКСТ</div>
    </div>
    <div class="btn">НАЖМИ МЕНЯ</div>
    <script>$('.btn').click(function() { $('.hide').slideToggle(500) })</script>
</body>
</html>

Блок выезжает снизу вверх при slidetoggle и слева направо при toggle. Возможно ли реализовать, что бы выезжал сверху вниз.

@BANO · 15.07.2016, 19:11

\

CSS

.box {
  position: relative;
  background-color: #CCC;
  height: 50px;
}
 
.hide {
  display: none;
  position: absolute;
  background-color: beige;
  height: 100%;
  width: 100%;
  top: 0;
}

наверное так?

@ialex25 · 15.07.2016, 19:13 **[ТС]**

СПАСИБО!

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	15.07.2016, 16:20	2
	ialex25, почитайте 1

@ialex25 0 / 0 / 0 Регистрация: 29.01.2015 Сообщений: 53
	15.07.2016, 16:59 [ТС]	3
	ок, спасибо Добавлено через 33 минуты очень толковая тема!!! разобрался, сделал и понял собственно "что-откуда-и-куда", всяко лучше тыканья в надежде везения. Ещё раз Спасибо 0

@BANO
	15.07.2016, 17:23 #4
	Не по теме: ialex25, тот момент, когда кидал пост, а потом оказалось, что тема тоже подходит... 0

@ialex25 0 / 0 / 0 Регистрация: 29.01.2015 Сообщений: 53
	15.07.2016, 19:13 [ТС]	7
	СПАСИБО! 0