Войти
Меню :
js (295)
css (139)



Blog (1575)
php (386)
js (295)
html (152)
css (139)
html tags (62)
js tag (56)
js method (44)
jquery (42)
php array (38)
ruweb.net (37)
text (37)
js date (33)
other (32)
online (30)
form html (30)
Показать еще :
fonts (30)
js events (22)
php file (21)
foto (20)
atom (20)
input (19)
database (19)
php date (18)
svg (18)
forum (18)
mysql (17)
hosting (17)
info (17)
lingvo (17)
php time (16)
board (16)
php img (16)
dosite (16)
color (15)
js url (14)
jsphp (14)
img (14)
js time (14)
table (13)
select (13)
notepad (13)
знак (13)
html book (13)
htaccess (13)
osclass (13)
yandex (13)
download (12)
keyboard (12)
dw block (12)
php path (12)
icon (11)
$ server (11)
form (10)
mouse (10)
vs code (10)
js delete (10)
ftp (9)
hover (8)
chart (8)
php url (7)
comment (7)
php post (7)
adminka (6)
php get (6)
hey tag (6)
canvas (6)
нок (6)
list (6)
iframe (6)
click (6)
js vars (6)
reg.ru (5)
tag a (5)
js math (5)
web (5)
js id (5)
value (5)
console (5)
js file (5)
xml (5)
heading (5)
mb (5)
year (5)
js form (4)
ssl (4)
vk (4)
symbols (4)
task (4)
scandir (4)
js hash (4)
bbcode (4)
base64 (4)
youtube (4)
day (4)
numbers (4)
php var (4)
pages (4)
week (4)
month (4)
games (4)
submit (4)
file (3)
рся (3)
units (3)
jquery post (3)
https (3)
js post (3)
line (3)
money (3)
video (3)
padding (3)
domen (3)
aimp (3)
ucoz (3)
куб (3)
captcha (3)
src (2)
blob (2)
google (2)
prompt (2)
height (2)
details (2)
seo (2)
sitemap (2)
tag hr (2)
counter (2)
пк (2)
typeof (2)
arrows (2)
qr code (2)
js img (2)
lingvo (1)
windows (1)
archive (1)
speed (1)
scroll (1)
cursor (1)
webp (1)
ok (1)
php day (1)
jino (1)
smile (1)
нод (1)
rutube (1)

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

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

Погнали!
  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;


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

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

    Что в архиве? В архиве 1 файл "Выдвижная панель слева" - копия примера
Не стесняемся говорить спасибо!
О комментах : 05.11.2024
Свои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Друзья! Пожалуйста держите себя в рамках приличия!
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже:
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Теги:
Выдвижная панель слева
На сайте сейчас :
dwweb.ru есть здесь:
Все соцсети в одном месте!
Разное :Игра "пятнашки"
Угадай страну по флагу

Кальклятор
Математика онлайн

Списки шифрования
Часы

Числа словами
Названия чисел(max=10305)
Графики

Qr код онлайн

Как сделать сайт?
Md5 онлайн
Sitemap.html
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Лучший хостинг : RUWEB + помощь по RUWEB Сайт работает круглосуточно 24/7.
Страница загружена за : 0.023996 секунд.