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

Вы просили меня показать, как можно сделать выезжающее меню, которое отодвигает контент. Исходник тут: codepen.io/Ais...
Подпишитесь на канал, если вам нравятся эти видео:
goo.gl/Zuu7wE
Получить нужные материалы для любого веб-разработчика - taplink.cc/glo...
Получить консультацию куратора - bit.ly/2Ym5SqS
Связаться с автором: aislam23 telegram: t.me/aislam23
Мой блог: islamov...
Больше контента в нашей группе Вконтакте
glo_aca...
Присоединяйтесь к нашему сообществу Discord
/ discord
Мой канал в telegram "Лысый из браузера"
tele.click/bal...
Еще у нас скоро стартует курс обучения. Напиши моему ассистенту:
vk.me/glo_academy
-----------
Я использую хостинг Link Host с 2014 года
link-host.net/... Телеграм-каналы с дизайн-макетами для тренировки вёрстки:
ttttt.me/figma...
ttttt.me/figma...
ttttt.me/figma...
Каналы с крутыми фичами на CSS и JavaScript:
ttttt.me/codep...
ttttt.me/css_f...
Канал с терминами для айтишников:
ttttt.me/slang_it
Канал, где публикуют ссылки на полезные сервисы и сайты:
ttttt.me/linkf...

[@my_coolheart]

JS для самых маленьких или JS фичи - очень было бы круто, ждём!

[@origami4khd920]

Нее

[@user-cw6hs7xf9t]

Спасибо за такое количество уроков, посвященных меня. Не знаю как у остальных, но у меня до этого времени были постоянные проблема с версткой красивого, адаптивного меню.

[@SFBeriK]

Все уроки очень подробные. Нравится подача материала и грамотные пояснения без лишней "воды"!

[@user-kw2ky2bq9l]

Лайк автоматом, хороший контент и отличная подача!!!))

[@user-ob8xp1zy5b]

Это наверное самые понятные и крутые видео. Кайфую, когда смотрю тебя.) Спасибо огромное!

[@alexredcross]

Хорошие темы, и раскрыты максимально понятно, спасибо за работу!)

[@StarkElessar]

Спасибо большое за твой труд, за твой контент! За твой канал! И спасибо, что когда пишешь код - ы объясняешь, что и зачем!

[@evgeniivavilo8678]

Отличная штука. Спасибо Артем за то, что делаешь! Смотрел многих, но у Артема всегда понятно и голос не противный))

[@13MrGreg]

Давно уже слежу за каналом и его развитием, так что отдельно хочу поблагодарить за вот такие небольшие, но очень полезные уроки)

[@vovamriya2084]

Я конечно не учитель англ. языка но мне твоё произношение рилЕЙтив нравится больше!))

[@user-me8dt7sz8i]

Артём ты крут! Нереально доступно объясняешь! Спасибо!

[@criticlswitch]

Артём, спасибо за классный контент! Лайк за видики.

[@Ddddddddyu]

Круто. Спасибо за такие крутые видео уроки.

[@piuhope1920]

Приятный парень, приятно и понятно объясняет, спасибо)

[@viktorshatalov1920]

Исламов просто красавчик!!!! RELATIVE)))))класс!!!

[@tarasiliuk]

Очень крутое видео. Для начинающих это крутой источник знаний и различных фишек. Продолжай делать такие видео далее. Лайк :)

[@stasmaksimov9531]

Артём, ты крут! Все чётко и ясно! 🔥больше фишек!!!

[@user-hm7kv6vb4f]

Спасибо за видео. Как всегда много полезного, и доступно объяснил!

[@user-bw5gg8mc8k]

Все круто. Сделай видос по оптимизации для retina дисплеев

[@ganster6853]

Очень классная тема

[@calm_night]

Тут плюс

[@daniillipatkin8650]

Спасибо, хоть кто-то сделал видео с такой актуальной фичей

[@user-ts1st1gc2q]

Очень круто !! Все понятно и интересно у самого возникает желание сделать и попробовать что то новое.

[@anastasiyaramanava1793]

очень крутые css-ные фишки, спасибо за рубрику)

[@user-hq7qo3rx4j]

Ты круче всех! Продолжай в том же духе!

[@mrdraud1726]

лойс не глядя, хорошо подаешь информацию, удачи в развитии канала

[@andyvi3116]

вижу урок сss фич от Артема - влепляю царский лайк. Как всегда, всё круто и безумно просто! По поводу грамотности произношения английских слов, правильно произносить не хайден, а хиден, но это уже придирки) Perspective правильно произносишь!)

[@muradqurbanov2761]

Супер как и предыдущие видео, ждем еще!!

[@stasmaksimov9531]

Больше уроков по jS 👍👍👍

[@АртёмАртём-ю4ы]

Обязательно продолжай, очень интересно)

[@audiomax111]

Тройное уважение

[@КтоТо-х6ь6ь]

Царский ЛАЙК! Любые фичи давай))

[@user-pv1kj1fq7p]

С футболкой просто выстрелило х)

[@user-bt4vc1jq3b]

Все круто,спасибо за все.Продолжай в том же духе.Ты как лэтсплэйщик веселый,только прогер

[@ivand7299]

Годная рубрика! Канал растет.

[@_oxios_]

До мурашек, жги !

[@ruslanlion1999]

В копилку с "релэйтив": hidden читается как "хИден", а не "хАйден". p.s. Спасибо за очередную фичу, годно!)

[@dmitrid.317]

очень интересно и доступно! Спасибо!

[@Vladikslavik]

С relative разобрались, теперь с hidden. Правильно произносится как хидн :-)))

[@pavelsmirnov9818]

спасибо, крутые уроки)

[@dobrydyadka]

Артём, сделай пожалуйста видос по теням, например про то как это реализовано в material design при наведении на объект.

[@viktortimoshkov6020]

Мне нравится формат этих видиков)) го некст!

[@andriikuzmichov4022]

Хотелось бы увидеть разные оформления чек-боксов, радио-батонов и разных переключателей ))

[@m1akarov442]

очень круто

[@YaroslavlCity]

Спасибо, Артём! Хороший тутор. И вот такой вопрос. Последнее время я всё чаще использую .svg. Подкупает масштабируемость , эффекты и фильтры, возможность обработки javascript и css. Я и background-image теперь иногда делаю с svg. Но сверлит мысль о недостаточной браузерной поддержке. Взглянешь потом чем-нибудь, всплакнёшь(сразу времена IE6 вспомнились, гореть ему в аду! ) и придётся переделывать. Я фрилансер, всегда один. О новинках и тенденциях только и узнаю от блогеров. Так как с svg? Не рано его широко юзать? А то я подсел...

[@user-wu3bx4vw4b]

Круто! Мучу такие штуки на бутстрапе. Там есть колапс копмонент.

[@comex1]

Всё круто. Замути видос про то, как делать расширения для браузера и как его опубликовать

[@user-dm1ix4co9z]

Уже писал, повторюсь. Цвета можно взять если кликнуть на ссылку "Assets" в левом-нижнем углу.

[@hydrargyrum01]

Спасибо. Удачи вам

[@senior_developer]

Хороший урок. Лойс

[@Kontrbandist]

Очень классно, спасибо!!

[@mashmix1228]

Все красиво, спасибо)

[@nightdog007]

влепил 120-килограммовый лойс!

[@Andrii_Konohrai]

Тема менюшек пошла. А если, допустим, всякие приколы и фишки для кнопок заказа звонка с анимацией и т.п.?)

[@ВладимирЗлатомрезов]

Все, заработало, другой скрипт использовал. Нужно еще поэкспериментировать и потом скину ссылку на исходники

[@user-vx8oy8vh3g]

Можно ссылку?

[@ВладимирЗлатомрезов]

@@user-vx8oy8vh3g забей. это было месяцев назад и я уже забыл что там делал. в общем идет подмена класса посредством тогле класс на jQuery. если совсем интересно пошукай курс на другом канале kzbin.info/www/bejne/paixm3idh92hd7M

[@user-cheps]

Согласен со всеми, крутая рубрика! По видео: действительно не хватает затемнения контента. Ну это наверное можно реализовать через наложение полупрозрачного растянутого ::after для контентной части. Интересно как закрытие сделать при нажатии на затемненный контент.. Плюс тут заморочка с гамбургером возникнет: это же работает так: нажал на гамбургер, меню добавляется класс, гамбургеру тоже, меню выехало, гамбургер проанимировался. Ок, теперь нажимаем на контент, меню закрылось, а на гамбургер ведь не нажимали, он так и остался в состоянии открытого меню... Тут надо как-то к состоянию меню привязывать. Может знает кто как?

[@user-rc2uk5hp6f]

очень круто 👍👍👍

[@scorpi220]

Норд, кто может подсказать, я просто не совсем понял. Когда прописывался content_active и menu_active но у нас же в html разметке не задан данные классы, так как он к нему привязался, а псевдо прописывается вроде :active? Объясните пожалуйста)

[@_fnf1995]

Да поддерживаю, JS

[@vasylshpak9363]

Жду JS фичи и jquery! спасибо тебе за старания)

[@razer4195]

Как изменить квадрат(меню) на свою картинку(три полоски)

[@sevi43]

Лысый хорош)

[@user-hc3wg1mz8b]

Криво все равно, когда меню выдвигается секции сдвигаются, и то что выходит за пределы контейнера не видно, но там то есть что то, и получается что часть секции не видно нужно было сделать немного по другому отодвинуть секции и уменьшить размер на 30% по идее так должно работать хорошо

[@paveltretyakov4662]

Поддерживаю width: calc(100% - ${(p) => (p.active ? 180 : 0)}px);

[@Елисаветград-МаленькийПари-и4с]

Советы как писать код с разными размерами изображений на макетах (десктоп планшет телефон) . С учетом скорости загрузки страницы.

[@MusicStrime]

Ти понимаешь что единственний кто смог мне помочь в етом почему все не ти))Если что я руский не очень хорошо знаю...

[@slxiv]

Красавчик!!!

[@Dmitry_Harlamov]

Ставлю лойс

[@vertushka8333]

Было бы интересно сделать урок по стилизации чекбоксов

[@EuropugEuro]

Артем продолжайте видео по CSS

[@Dikobrazeg]

Я ещё хотел бы увидеть JS фичи

[@Grapeoff]

С наступающим

[@nikitap5868]

JS фичи было бы круто. А в CSS фичах давай аннимированый background!

[@joid]

Клевые видосы, лайк поставил. Сделай урок как можно сделать изогнутый текст вокруг окружности, есть вариант каждую букву возвести в span и с помощью css transform: rotate() крутить, не очень удобно особенно если этот текст должен меняться из админки CMS, я делал с помощью js (получилось) он как раз автоматом возводил в span каждую букву и подкручивал как нужно, видел способ как делают с помощь svg

[@maximsmirnov887]

Крутые видео

[@codersuz7226]

Просто супер ваших видео мне нравиться можете снять видео о создания личного кабинета польностью на php7 myssql на 100% защищенными опен сервере

[@ВиталийИванов-э6с]

лайк бро )

[@iEfimoff]

Еще хороший урок можно сделать про Contenteditable

[@user-bd8rz6ok4z]

Мои лайки все Царские! ;)

[@e3rmak]

Артём, будет ли видео про онлайн кассы? Разбери вопрос налогов с 1 июля 2018.

[@ilmiragubarenko3618]

Спасибо!!!

[@ВладимирЗлатомрезов]

А в контейнере 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)

[@mishatrick]

Урок полезный, но хотелось бы увидеть, как реализовать, чтобы на десктопе было обычное меню, а при сужении экрана оно превращалось в такое, как на этом видео.

[@user-oh7ri6do7l]

Медиа. Кнопка изначально скрыта, показано основное меню. При нужной ширине экрана прячешь основное меню и показываешь кнопку

[@Елисаветград-МаленькийПари-и4с]

Хочу посмотреть пример бесконечной бесшовной анимации (например слева подымаются несколько блоков в которых анимация цифр)

[@xxxan_official]

Огонь

[@alexanderkorolev7904]

Подписался и на колокольчик нажал

[@alpha-dzhem]

Артём, спасибо за труды! Напрашивается схожая тема: горизонтальное меню-аккордеон.

[@alexredcross]

Когда будет js для новичков?) заранее спасибо)

[@bogdan.k.s]

Сделай несколько вариаций меню с категориями товаров для интернет магазина)

[@user-yc5jb3ys9f]

у меня сначала не сработала часть js, я решил скопировать весь код в codepen и в коде javascript выскакивает это: Uncaught ReferenceError: $ is not defined. Подскажите пожалуйста, в чем проблема?

[@mojoooCo]

ты топ в ру сегменте

[@belokopitov]

скопировал скрипт себе на комп ....и не работает

[@StarkElessar]

Подключили библиотеку JQuery?

[@omeeer8254]

Артём, подскажи характеристики своего Mac пожалуйста и хватает ли его для всех твоих задач?

[@dorian4875]

Почему в единице измерения ты использовал именно 100vh, а не 100%?

[@SuperZinenko]

И после установки якорей в меню (#main, #news и т.д.), рекомендую поставить "scroll-behavior: smooth" для тега HTML или для ":root". Подробнее здесь: developer.mozilla.org/ru/docs/Web/CSS/scroll-behavior

[@sardor370]

Не не брат, правильно будет "релативе"

[@CTPELOG]

больше, давай больше муток

[@alexsobolenko]

По-моему, симпатичней было бы, если контент сдвигать не на всю ширину меню, а только половину

[@vladimiroleynik8039]

все круто кроме перезагрузки web страницы - т.е. меню выехало - пользователь что-ьл делает потом перезагрузка страницы и меню само закрывается обратно и нужно снова щелкать по бургеру. Как сохранить меню в выехавшем положении при перезагрузке страницы? понимаю этот пост давно вышел, 2018г но если есть возможность пожалуйста подскажите

[@user-qb7jg4hx5l]

relative поднял настроение )

[@user-ie6jd2ul2c]

Сделайте подробный урок по Js пожалуйста

[@samborsky_pro]

Чувак я влюбился в тебя! Да прибудет с тобой сила :* Но пальцем на мобилке я смогу такое меню свернуть???

[@Glo_Academy]

Свайп - это отдельная история 👌

[@Nikolai_Myroshnychenko]

Подскажите пожалуйста, как при открытии меню в 30%, основной контент сужался до 70%, чтоб меню не перекрывало контент?