DWWEB.RU
СКРИПТЫ

Выдвижная панель слева CSS+JS

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

Некоторые вещи такие смешные, например, выдвижная панель слева, когда-то ходил по интернету и искал, как же найти такую выдвижную панель, что мне нужна!

И вот теперь мне опять понадобилась в очередной раз панель выдвижная, чтобы она открывалась по клику.

Вы данную панель видите слева - уже сделанную. И будет пример, см после текста и там же архив!

Погнали!

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

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

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

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

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

    </block>

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

  5. Не будем углубляться в css стили, уж больно там много всего, лишь скажу пару слов…
    Для обоих klick и leftMenu position: fixed;
  6. Для leftMenu - margin:-62px 0 0 -347px, что нам говорит, что панель задвинута за левый край монитора.
    При клике
  7. При клике, каждому из этих блоков будет присвоен новый класс, который и будет выдвигать нашу панель слева на то положение. где она должна находится в открытом состоянии!
  8. Для klick, сдвинем кнопку вправо на 316px и поменяем на противоположные цвета, шрифт и задник.

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

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

  9. Здесь совсем просто! Получим данные из тегов с помощью querySelector и создадим аналогичные переменные:
  10. klick = document.querySelector('klick');

    leftmenu = document.querySelector('leftmenu');

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

  11. Далее нам понадобится onclick и функция, в которой проверяем есть ли стиль klick.classList.contains("anti"), если есть удаляем remove , если нет добавляем add
  12. 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
Скрипт № 70.1
Пример
Скачать - архив
Все скрипты на одной странице
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

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

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