Выдвижная панель экрана отрывается при клике javascript

Выдвижная панель слева, на всю высоту экрана! Чтобы эта панель выдвигалась по клику, и в этой вдвигающей панели разместить текст и ссылки! Как сделать такую выдвижную панель слева. Живой пример вы можете прямо сейчас наблюдать слева на вашем мониторе - нажмите кнопку скрипты! + будет отдельный пример выдвигающейся панели, на который не действуют никакие другие стили! И внизу, как обычно можно будет скачать скрипт выдвижной панели!

1. Как сделать выдвижную панель слева
2. CSS - для выдвижной панели слева
3. JS - для выдвижной панели слева
4. Обработка клика для выдвижной панели
5. Пример выдвижной панели.
6. Скачать "Выдвижная панель слева" - что в архиве?

Как сделать выдвижную панель слева

Возьмем каркас html страницы


Будем делать в собственных тегах, чтобы - просто укоротить код, вы можете еще присандалить классы и идентификаторы!

В тег block поместим два других блока klick и leftMenu(который изначально не виден)

<block>

  <klick>КНОПКА</klick>

  <leftMenu>Здесь может быть много много текста<br></leftMenu>

</block>




CSS - для выдвижной панели слева

Не будем углубляться в css стили, уж больно там много всего, лишь скажу пару слов…

Для обоих klick и leftMenu position: fixed;

Для leftMenu - margin:-62px 0 0 -347px, что нам говорит, что панель задвинута за левый край монитора.

При клике

При клике, каждому из этих блоков будет присвоен новый класс, который и будет выдвигать нашу панель слева на то положение. где она должна находится в открытом состоянии!

Для klick, сдвинем кнопку вправо на 316px и поменяем на противоположные цвета, шрифт и задник.

.anti{margin-left:316px;transition: 1s; background: #7b7b7b; color: white;}
Для leftMenu выдвигаем нашу панель слева на свое место присвоив класс antileftmenu, где : margin-left: 0px;
.antileftmenu{margin-left: 0px;transition: 1s;}



JS - для выдвижной панели слева

Здесь совсем просто! Получим данные из тегов с помощью querySelector и создадим аналогичные переменные:

klick = document.querySelector('klick');

leftmenu = document.querySelector('leftmenu');




Обработка клика для выдвижной панели

Далее нам понадобится onclick и функция, в которой проверяем есть ли стиль klick.classList.contains("anti"), если есть удаляем remove , если нет добавляем add

klick.onclick = function()

{

  if(klick.classList.contains("anti") )

  {

    leftmenu.classList.remove("antileftmenu");

    klick.classList.remove("anti");

  }

  else

  {

    leftmenu.classList.add("antileftmenu");

    klick.classList.add("anti");

  }

}

Ну вот... так, как-то быстро о выдвижной панели... ну и ... для всех элементов, где требуется делаем задержку transition: 1s;




Скачать "Выдвижная панель слева" - что в архиве?

Скачать можно здесь.

Что в архиве? В архиве 1 файл "Выдвижная панель слева" - копия примера