СКРИПТЫ
ТЕГИ:
php (285)
js (155)
html (135)
css (109)
html tags (61)
jquery (40)
edit text (37)
php array (30)
form html (30)
fonts (27)
ruweb.net (23)
foto (22)
online (20)
atom (20)
forum (19)
svg (18)
Показать еще :
hosting (17)
board (17)
js method (16)
html book (16)
php file (16)
color (15)
php date (15)
link (15)
js events (14)
input (14)
osclass (13)
table (13)
htaccess (13)
dw block (12)
path (12)
select (12)
php img (11)
form (11)
php time (11)
jsphp (11)
icon (11)
js delete (11)
download (11)
notepad (11)
mouse (10)
img (10)
url (10)
js time (9)
info (9)
yandex (9)
dosite (7)
hover (7)
cookie (7)
comment (7)
task (7)
php url (7)
js url (6)
mysql (6)
year (6)
click (6)
list (6)
iframe (6)
browser (5)
search (5)
ftp (5)
chart (5)
adminka (5)
php get (5)
value (5)
mb (5)
week (4)
console (4)
vk (4)
bbcode (4)
symbols (4)
js form (4)
js id (4)
mounth (4)
submit (4)
reg.ru (4)
scandir (3)
line (3)
pages (3)
https (3)
js post (3)
ucoz (3)
js img (3)
padding (3)
day (3)
captcha (3)
vs code (3)
ssl (3)
second (2)
cursor (2)
tag hr (2)
money (2)
рся (2)
height (2)
js vars (2)
title (2)
counter (2)
typeof (2)
details (2)
youtube (2)
video (2)
base64 (2)
seo (2)
qr kod (2)
arrows (2)
sitemap (2)
smile (1)
google (1)
windows (1)
archive (1)
domen (1)
numbers (1)
speed (1)
books (1)
scroll (1)
header (1)
days (1)

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

2019/10/26 Марат 1032 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
Ссылка на скачивание : Все скрипты на одной странице
Теги :
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
28.04.2022 19:20
У меня на сайте - все скрипты рабочие! Приходите…
подробнее.
Игорь :
05.04.2022 03:52
Спасибо Большое Вам за счетчик скачиваний файлов! Вы единственный, кто выложил действительно рабочий код!…
подробнее.
Марат :
03.04.2022 11:16
Вы обратились не по адресу... Предположим... что у вас есть паравоз...на дровах... И вы обращаетесь в автосервис, …
подробнее.
Good_Serpent :
03.04.2022 08:18
Шара - "расшаренная", доступная для пользователей локальной сети папка. Там происходит обмен информацией,…
подробнее.
Марат :
02.04.2022 20:29
Я даже не знаю, что таоке "шара"... Думаю, что вам нужно искать на специализированном сайте посвященной…
подробнее.
Good_Serpent :
02.04.2022 19:54
Здравствуйте! Нужен скрипт, который бы закрывал файл на шаре, если он там открыт. Не удаётся его удалить для…
подробнее.
ruweb
Страница загружена за : 0.018723 секунд. Подробнее