Тёмный

CSS фича #8 ➤ Выезжающее меню слева урок | CSS3 left menu lesson 

Glo Academy
Подписаться 146 тыс.
Просмотров 79 тыс.
50% 1

Вы просили меня показать, как можно сделать выезжающее меню, которое отодвигает контент. Исходник тут: codepen.io/Aislam23/pen/OEQaLo
Подпишитесь на канал, если вам нравятся эти видео:
goo.gl/Zuu7wE
Получить нужные материалы для любого веб-разработчика - taplink.cc/glo_web_academy
Получить консультацию куратора - bit.ly/2Ym5SqS
Связаться с автором: aislam23 telegram: t.me/aislam23
Мой блог: islamov_blog
Больше контента в нашей группе Вконтакте
glo_academy
Присоединяйтесь к нашему сообществу Discord
/ discord
Мой канал в telegram "Лысый из браузера"
tele.click/baldfrombrowser
Еще у нас скоро стартует курс обучения. Напиши моему ассистенту:
vk.me/glo_academy
-----------
Я использую хостинг Link Host с 2014 года
link-host.net/billing/pl.php?... Телеграм-каналы с дизайн-макетами для тренировки вёрстки:
ttttt.me/figma2html
ttttt.me/figma_start
ttttt.me/figmatamplates
Каналы с крутыми фичами на CSS и JavaScript:
ttttt.me/codepen_js
ttttt.me/css_features
Канал с терминами для айтишников:
ttttt.me/slang_it
Канал, где публикуют ссылки на полезные сервисы и сайты:
ttttt.me/linkforwork

Развлечения

Опубликовано:

 

20 июн 2018

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 197   
@my_coolheart
@my_coolheart 6 лет назад
JS для самых маленьких или JS фичи - очень было бы круто, ждём!
@origami4khd920
@origami4khd920 2 года назад
Нее
@SFBeriK
@SFBeriK 6 лет назад
Все уроки очень подробные. Нравится подача материала и грамотные пояснения без лишней "воды"!
@13MrGreg
@13MrGreg 3 года назад
Давно уже слежу за каналом и его развитием, так что отдельно хочу поблагодарить за вот такие небольшие, но очень полезные уроки)
@user-cw6hs7xf9t
@user-cw6hs7xf9t 6 лет назад
Спасибо за такое количество уроков, посвященных меня. Не знаю как у остальных, но у меня до этого времени были постоянные проблема с версткой красивого, адаптивного меню.
@user-ob8xp1zy5b
@user-ob8xp1zy5b 3 года назад
Это наверное самые понятные и крутые видео. Кайфую, когда смотрю тебя.) Спасибо огромное!
@StarkElessar
@StarkElessar 3 года назад
Спасибо большое за твой труд, за твой контент! За твой канал! И спасибо, что когда пишешь код - ы объясняешь, что и зачем!
@evgeniivavilo8678
@evgeniivavilo8678 5 лет назад
Отличная штука. Спасибо Артем за то, что делаешь! Смотрел многих, но у Артема всегда понятно и голос не противный))
@user-kw2ky2bq9l
@user-kw2ky2bq9l 6 лет назад
Лайк автоматом, хороший контент и отличная подача!!!))
@alexredcross
@alexredcross 6 лет назад
Хорошие темы, и раскрыты максимально понятно, спасибо за работу!)
@criticlswitch
@criticlswitch 5 лет назад
Артём, спасибо за классный контент! Лайк за видики.
@user-me8dt7sz8i
@user-me8dt7sz8i 6 лет назад
Артём ты крут! Нереально доступно объясняешь! Спасибо!
@user-hm7kv6vb4f
@user-hm7kv6vb4f 4 года назад
Спасибо за видео. Как всегда много полезного, и доступно объяснил!
@anastasiyaramanava1793
@anastasiyaramanava1793 6 лет назад
очень крутые css-ные фишки, спасибо за рубрику)
@piuhope1920
@piuhope1920 6 лет назад
Приятный парень, приятно и понятно объясняет, спасибо)
@user-ts1st1gc2q
@user-ts1st1gc2q 6 лет назад
Очень круто !! Все понятно и интересно у самого возникает желание сделать и попробовать что то новое.
@stasmaksimov9531
@stasmaksimov9531 6 лет назад
Артём, ты крут! Все чётко и ясно! 🔥больше фишек!!!
@mrdraud1726
@mrdraud1726 6 лет назад
лойс не глядя, хорошо подаешь информацию, удачи в развитии канала
@tarasiliuk
@tarasiliuk 5 лет назад
Очень крутое видео. Для начинающих это крутой источник знаний и различных фишек. Продолжай делать такие видео далее. Лайк :)
@muradqurbanov2761
@muradqurbanov2761 6 лет назад
Супер как и предыдущие видео, ждем еще!!
@user-jg7ly1ib2z
@user-jg7ly1ib2z 4 года назад
Обязательно продолжай, очень интересно)
@daniillipatkin8650
@daniillipatkin8650 6 лет назад
Спасибо, хоть кто-то сделал видео с такой актуальной фичей
@user-hq7qo3rx4j
@user-hq7qo3rx4j 6 лет назад
Ты круче всех! Продолжай в том же духе!
@Ddddddddyu
@Ddddddddyu 5 лет назад
Круто. Спасибо за такие крутые видео уроки.
@viktorshatalov1920
@viktorshatalov1920 4 года назад
Исламов просто красавчик!!!! RELATIVE)))))класс!!!
@vovamriya2084
@vovamriya2084 6 лет назад
Я конечно не учитель англ. языка но мне твоё произношение рилЕЙтив нравится больше!))
@user-lp1hb2tv9x
@user-lp1hb2tv9x 6 лет назад
Царский ЛАЙК! Любые фичи давай))
@andyvi3116
@andyvi3116 6 лет назад
вижу урок сss фич от Артема - влепляю царский лайк. Как всегда, всё круто и безумно просто! По поводу грамотности произношения английских слов, правильно произносить не хайден, а хиден, но это уже придирки) Perspective правильно произносишь!)
@_oxios_
@_oxios_ 6 лет назад
До мурашек, жги !
@user-bt4vc1jq3b
@user-bt4vc1jq3b 6 лет назад
Все круто,спасибо за все.Продолжай в том же духе.Ты как лэтсплэйщик веселый,только прогер
@ivand7299
@ivand7299 6 лет назад
Годная рубрика! Канал растет.
@stasmaksimov9531
@stasmaksimov9531 6 лет назад
Больше уроков по jS 👍👍👍
@dmitrid.317
@dmitrid.317 6 лет назад
очень интересно и доступно! Спасибо!
@pavelsmirnov9818
@pavelsmirnov9818 6 лет назад
спасибо, крутые уроки)
@dobrydyadka
@dobrydyadka 6 лет назад
Артём, сделай пожалуйста видос по теням, например про то как это реализовано в material design при наведении на объект.
@audiomax111
@audiomax111 5 лет назад
Тройное уважение
@user-bw5gg8mc8k
@user-bw5gg8mc8k 6 лет назад
Все круто. Сделай видос по оптимизации для retina дисплеев
@ganster6853
@ganster6853 6 лет назад
Очень классная тема
@calm_night
@calm_night 6 лет назад
Тут плюс
@andriikuzmichov4022
@andriikuzmichov4022 6 лет назад
Хотелось бы увидеть разные оформления чек-боксов, радио-батонов и разных переключателей ))
@user-pv1kj1fq7p
@user-pv1kj1fq7p 6 лет назад
С футболкой просто выстрелило х)
@nightdog007
@nightdog007 5 лет назад
влепил 120-килограммовый лойс!
@hydrargyrum01
@hydrargyrum01 5 лет назад
Спасибо. Удачи вам
@mashmix1228
@mashmix1228 6 лет назад
Все красиво, спасибо)
@user-wu3bx4vw4b
@user-wu3bx4vw4b 6 лет назад
Круто! Мучу такие штуки на бутстрапе. Там есть колапс копмонент.
@Kontrbandist
@Kontrbandist 6 лет назад
Очень классно, спасибо!!
@vasylshpak9363
@vasylshpak9363 6 лет назад
Жду JS фичи и jquery! спасибо тебе за старания)
@YaroslavlCity
@YaroslavlCity 6 лет назад
Спасибо, Артём! Хороший тутор. И вот такой вопрос. Последнее время я всё чаще использую .svg. Подкупает масштабируемость , эффекты и фильтры, возможность обработки javascript и css. Я и background-image теперь иногда делаю с svg. Но сверлит мысль о недостаточной браузерной поддержке. Взглянешь потом чем-нибудь, всплакнёшь(сразу времена IE6 вспомнились, гореть ему в аду! ) и придётся переделывать. Я фрилансер, всегда один. О новинках и тенденциях только и узнаю от блогеров. Так как с svg? Не рано его широко юзать? А то я подсел...
@comex1
@comex1 6 лет назад
Всё круто. Замути видос про то, как делать расширения для браузера и как его опубликовать
@user-dm1ix4co9z
@user-dm1ix4co9z 6 лет назад
Уже писал, повторюсь. Цвета можно взять если кликнуть на ссылку "Assets" в левом-нижнем углу.
@senior_developer
@senior_developer 6 лет назад
Хороший урок. Лойс
@viktortimoshkov6020
@viktortimoshkov6020 6 лет назад
Мне нравится формат этих видиков)) го некст!
@user-rc2uk5hp6f
@user-rc2uk5hp6f 4 года назад
очень круто 👍👍👍
@slxiv
@slxiv 4 года назад
Красавчик!!!
@Vladikslavik
@Vladikslavik 4 года назад
С relative разобрались, теперь с hidden. Правильно произносится как хидн :-)))
@omeeer8254
@omeeer8254 6 лет назад
Артём, подскажи характеристики своего Mac пожалуйста и хватает ли его для всех твоих задач?
@ruslanlion1999
@ruslanlion1999 6 лет назад
В копилку с "релэйтив": hidden читается как "хИден", а не "хАйден". p.s. Спасибо за очередную фичу, годно!)
@scorpi220
@scorpi220 4 года назад
Норд, кто может подсказать, я просто не совсем понял. Когда прописывался content_active и menu_active но у нас же в html разметке не задан данные классы, так как он к нему привязался, а псевдо прописывается вроде :active? Объясните пожалуйста)
@m1akarov442
@m1akarov442 2 года назад
очень круто
@vertushka8333
@vertushka8333 6 лет назад
Было бы интересно сделать урок по стилизации чекбоксов
@EuropugEuro
@EuropugEuro 6 лет назад
Артем продолжайте видео по CSS
@_fnf1995
@_fnf1995 6 лет назад
Да поддерживаю, JS
@Grapeoff
@Grapeoff 6 лет назад
С наступающим
@e3rmak
@e3rmak 6 лет назад
Артём, будет ли видео про онлайн кассы? Разбери вопрос налогов с 1 июля 2018.
@sevi43
@sevi43 6 лет назад
Лысый хорош)
@iEfimoff
@iEfimoff 6 лет назад
Еще хороший урок можно сделать про Contenteditable
@Andrii_Konohrai
@Andrii_Konohrai 6 лет назад
Тема менюшек пошла. А если, допустим, всякие приколы и фишки для кнопок заказа звонка с анимацией и т.п.?)
@ilmiragubarenko3618
@ilmiragubarenko3618 6 лет назад
Спасибо!!!
@Dmitry_Harlamov
@Dmitry_Harlamov 6 лет назад
Ставлю лойс
@maximsmirnov887
@maximsmirnov887 6 лет назад
Крутые видео
@Nikolai_Myroshnychenko
@Nikolai_Myroshnychenko Год назад
Подскажите пожалуйста, как при открытии меню в 30%, основной контент сужался до 70%, чтоб меню не перекрывало контент?
@user-yc5jb3ys9f
@user-yc5jb3ys9f 4 года назад
у меня сначала не сработала часть js, я решил скопировать весь код в codepen и в коде javascript выскакивает это: Uncaught ReferenceError: $ is not defined. Подскажите пожалуйста, в чем проблема?
@user-bd8rz6ok4z
@user-bd8rz6ok4z 6 лет назад
Мои лайки все Царские! ;)
@user-cheps
@user-cheps 6 лет назад
Согласен со всеми, крутая рубрика! По видео: действительно не хватает затемнения контента. Ну это наверное можно реализовать через наложение полупрозрачного растянутого ::after для контентной части. Интересно как закрытие сделать при нажатии на затемненный контент.. Плюс тут заморочка с гамбургером возникнет: это же работает так: нажал на гамбургер, меню добавляется класс, гамбургеру тоже, меню выехало, гамбургер проанимировался. Ок, теперь нажимаем на контент, меню закрылось, а на гамбургер ведь не нажимали, он так и остался в состоянии открытого меню... Тут надо как-то к состоянию меню привязывать. Может знает кто как?
@amegavlad2312
@amegavlad2312 6 лет назад
Как сделать примагничивание при скроллинге? Например листнул вних и примагнителось туда, куда нужно.
@razer4195
@razer4195 4 года назад
Как изменить квадрат(меню) на свою картинку(три полоски)
@user-js3sy2qv7m
@user-js3sy2qv7m 4 года назад
А в контейнере nav допустимо использовать overflow-y: scroll; для вертикальной прокрутки для большого количества ссылок? и допустимо ли использовать это нассылках что бы выпадали подссылки?: function showHide(element_id) { if (document.getElementById(element_id)) { var obj = document.getElementById(element_id); if (obj.style.display != "block") { obj.style.display = "block"; } else obj.style.display = "none"; } else alert("Элемент с id: " + element_id + " не найден!"); (так и тянутся пальцы нажать ctrl+s)
@user-hj5bc2re3e
@user-hj5bc2re3e 5 лет назад
То есть, правильно ли я понял - чтобы меню выезжало на мобильных разрешениях, то я должен весь этот CSS-код, поместить в соответствующий медиа-запрос, и убрать его с десктоп-разрешения, верно?
@vladimiroleynik8039
@vladimiroleynik8039 2 года назад
все круто кроме перезагрузки web страницы - т.е. меню выехало - пользователь что-ьл делает потом перезагрузка страницы и меню само закрывается обратно и нужно снова щелкать по бургеру. Как сохранить меню в выехавшем положении при перезагрузке страницы? понимаю этот пост давно вышел, 2018г но если есть возможность пожалуйста подскажите
@user-xg3ik2zg5j
@user-xg3ik2zg5j 4 года назад
Хочу посмотреть пример бесконечной бесшовной анимации (например слева подымаются несколько блоков в которых анимация цифр)
@dnsdns3050
@dnsdns3050 5 лет назад
как сделать , чтоб вместо меню был список чего та(музыки , или же друзей типа)
@Dikobrazeg
@Dikobrazeg 6 лет назад
Я ещё хотел бы увидеть JS фичи
@user-kc3wx1xy2k
@user-kc3wx1xy2k 6 лет назад
лайк бро )
@joid
@joid 6 лет назад
Клевые видосы, лайк поставил. Сделай урок как можно сделать изогнутый текст вокруг окружности, есть вариант каждую букву возвести в span и с помощью css transform: rotate() крутить, не очень удобно особенно если этот текст должен меняться из админки CMS, я делал с помощью js (получилось) он как раз автоматом возводил в span каждую букву и подкручивал как нужно, видел способ как делают с помощь svg
@sergeyplotnikov5031
@sergeyplotnikov5031 6 лет назад
Как сделать так, чтобы при нажатии на ссылку в меню, секции плавно прокрутятся до необходимой?
@tst.decamorf4727
@tst.decamorf4727 Год назад
При нажатии на кнопку, как сделать затемнение основного контента?
@user-xg3ik2zg5j
@user-xg3ik2zg5j 4 года назад
Советы как писать код с разными размерами изображений на макетах (десктоп планшет телефон) . С учетом скорости загрузки страницы.
@user-kc3wx1xy2k
@user-kc3wx1xy2k 6 лет назад
на ВР 14 подобное будет или там будет не до этого ?
@xxxan_official
@xxxan_official 5 лет назад
Огонь
@BlessShop_Top
@BlessShop_Top 4 года назад
Допустим! У меня кнопка меню находится слева в углу. Ии.... Мне нужно сделать так, чтобы мое меню было всегда сверху над контентом, а крестик(кнопка закрытия) была уже справа. То есть: нажимаю на бургер(он пропадает) выезжает меню( фон у меня затемнялся) и крестик был уже не рядом сменю а справой стороны экрана. Как это можно сделать ?
@user-js3sy2qv7m
@user-js3sy2qv7m 4 года назад
Все, заработало, другой скрипт использовал. Нужно еще поэкспериментировать и потом скину ссылку на исходники
@user-vx8oy8vh3g
@user-vx8oy8vh3g 3 года назад
Можно ссылку?
@user-js3sy2qv7m
@user-js3sy2qv7m 3 года назад
@@user-vx8oy8vh3g забей. это было месяцев назад и я уже забыл что там делал. в общем идет подмена класса посредством тогле класс на jQuery. если совсем интересно пошукай курс на другом канале ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-owNjEgRxnAQ.html
@bogdan.k.s
@bogdan.k.s 6 лет назад
Сделай несколько вариаций меню с категориями товаров для интернет магазина)
@Radag0nn563
@Radag0nn563 5 лет назад
А можно тоже самое, но только без JS?(Если такое возможно) Я его просто не учил, и не понимаю, что там.
@user-vg2qr5yw3n
@user-vg2qr5yw3n 6 лет назад
как сделать так, чтобы при нажатии на пункт меню само меню скрывалось назад?
@dorian4875
@dorian4875 6 лет назад
Почему в единице измерения ты использовал именно 100vh, а не 100%?
@MusicStrime
@MusicStrime 4 года назад
Ти понимаешь что единственний кто смог мне помочь в етом почему все не ти))Если что я руский не очень хорошо знаю...
@alexanderkorolev7904
@alexanderkorolev7904 5 лет назад
Подписался и на колокольчик нажал
@dowellkin
@dowellkin 6 лет назад
Сделай на Sass, как в предыдущем спрашивал
@mojoooCo
@mojoooCo 6 лет назад
ты топ в ру сегменте
@alexredcross
@alexredcross 6 лет назад
Когда будет js для новичков?) заранее спасибо)
@tigranvardanyan5044
@tigranvardanyan5044 6 лет назад
подскажите пожалуйста что такого делает preventDefault()?
@blackmazebeats2657
@blackmazebeats2657 6 лет назад
А не проще отодвигать контент через float: right; width: calc(100% - Ширина aside(ну или вашего "выезжающего меню")px) ?
@codersuz7226
@codersuz7226 4 года назад
Просто супер ваших видео мне нравиться можете снять видео о создания личного кабинета польностью на php7 myssql на 100% защищенными опен сервере
Далее
skibidi toilet multiverse 038
06:38
Просмотров 6 млн
Animate from display none
21:55
Просмотров 151 тыс.
1 класс vs 11 класс  (игрушка)
0:30
Просмотров 2,3 млн
СНЕЖКИ ЛЕТОМ?? #shorts
0:30
Просмотров 1,9 млн
Каха инструкция по шашлыку
1:00