Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!! smile

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

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

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

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

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

    <block>

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

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

    </block>

  2. 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;}

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

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

    klick = document.querySelector('klick');

    leftmenu = document.querySelector('leftmenu');

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

    Далее нам понадобится 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;


Вас может еще заинтересовать список тем : #CSS | #JS |
Последняя дата редактирования : 2019-12-25 06:15
Название скрипта :Выдвижная панель слева CSS + JS
Скрипт № 84.1
Пример
Ссылка на скачивание : Все скрипты на одной странице
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
Выдвижная панель слева

Последние комментарии :
Марат :
26/01/2021 12:28
Внимание! На странице описывается система комментирования ECOMMENT.SU.Здесь и далее, на всем сайте, стоит другая…
подробнее.
Марат :
26/01/2021 10:58
На сайте, комментирование моё собственное, которое не знаю, когда …
подробнее.
Вали :
26/01/2021 05:51
А вот эти комментарии тут - это же другие, не те о которых статья?Не…
подробнее.
Вали :
26/01/2021 05:44
Привет, классно!
подробнее.
Марат :
25/01/2021 10:08
Спасибо за добрые слова!Всегда пожалуйста!Приходите…
подробнее.