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

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

2019/10/26 Марат 501 0 #CSS | #JS |

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

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

Погнали!
  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
Скрипт № 79.1
Пример
Ссылка на скачивение: Все скрипты на одной странице
Теги:
Выдвижная панель слева

Последние комментарии :
Александр :
04/06/2020 01:42
Спасибо)
подробнее.
admin :
20/05/2020 10:36
Как бы смешно это не звучало! Но! Запускается новая система комментирования COMMENTS+ 1.5. в тестовом режиме!От…
подробнее.
Паула :
21/05/2020 04:48
Вообще мне очень нравится, что вы делаете! И ваш подход! И ваш стиль!И не обращайте внимание на всяких…
подробнее.
admin :
21/05/2020 05:03
Я Вас помню! Вы частенько оставляли сообщения на сайте!Все никак не мог спросить!? У Вас есть сайт -> зачем это…
подробнее.

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2020 Мы на лучшем хостинге -> ruweb