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]

Нее

[@ЕгорНей-л3ф]

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

[@SFBeriK]

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

[@ДаниилЧайка-ч3в]

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

[@ДаниилВохменцев-р7в]

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

[@ganster6853]

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

[@calm_night]

Тут плюс

[@StarkElessar]

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

[@alexredcross]

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

[@РостиславХорольський-л7с]

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

[@13MrGreg]

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

[@vovamriya2084]

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

[@evgeniivavilo8678]

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

[@criticlswitch]

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

[@ИльяЗуев-л1ф]

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

[@Иван-б3н5й]

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

[@piuhope1920]

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

[@АнатолійБогомол-ь2ю]

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

[@Ddddddddyu]

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

[@tarasiliuk]

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

[@muradqurbanov2761]

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

[@anastasiyaramanava1793]

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

[@daniillipatkin8650]

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

[@viktorshatalov1920]

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

[@КошачЬеоЧько]

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

[@mrdraud1726]

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

[@stasmaksimov9531]

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

[@stasmaksimov9531]

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

[@dobrydyadka]

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

[@Vladikslavik]

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

[@andriikuzmichov4022]

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

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

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

[@EltunGaribov]

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

[@Дендрай]

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

[@ВиолеттаМинцюк]

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

[@_oxios_]

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

[@audiomax111]

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

[@andyvi3116]

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

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

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

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

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

[@ЕлизаветаМурзикова]

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

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

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

[@ДенисВасильев-й3у]

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

[@comex1]

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

[@dmitrid.317]

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

[@ivand7299]

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

[@pavelsmirnov9818]

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

[@viktortimoshkov6020]

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

[@Andrii_Konohrai]

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

[@vasylshpak9363]

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

[@hydrargyrum01]

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

[@ruslanlion1999]

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

[@user-cheps]

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

[@e3rmak]

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

[@EuropugEuro]

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

[@mashmix1228]

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

[@senior_developer]

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

[@Kontrbandist]

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

[@dorian4875]

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

[@_fnf1995]

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

[@codersuz7226]

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

[@YaroslavlCity]

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

[@scorpi220]

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

[@iEfimoff]

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

[@Dikobrazeg]

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

[@YuryPozdneev]

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

[@vertushka8333]

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

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

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

[@MusicStrime]

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

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

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

[@nightdog007]

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

[@ВикторМ-о4о]

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

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

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

[@mishatrick]

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

[@ДмитрийГущин-ы2л]

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

[@nikitap5868]

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

[@sevi43]

Лысый хорош)

[@joid]

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

[@m1akarov442]

очень круто

[@slxiv]

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

[@blackmazebeats2657]

А не проще отодвигать контент через float: right; width: calc(100% - Ширина aside(ну или вашего "выезжающего меню")px) ?

[@МаксимЗавадский-в7т]

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

[@paveltretyakov4662]

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

[@bogdan-e6w]

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

[@Grapeoff]

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

[@Dmitry_Harlamov]

Ставлю лойс

[@OgRomantik]

Допустим! У меня кнопка меню находится слева в углу. Ии.... Мне нужно сделать так, чтобы мое меню было всегда сверху над контентом, а крестик(кнопка закрытия) была уже справа. То есть: нажимаю на бургер(он пропадает) выезжает меню( фон у меня затемнялся) и крестик был уже не рядом сменю а справой стороны экрана. Как это можно сделать ?

[@CTPELOG]

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

[@vladimiroleynik8039]

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

[@ИльяПопович-в1э]

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

[@Nikolai_Myroshnychenko]

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

[@ПавелДорожкин-н7ю]

Привет, если контента много, то он уедет и обрежется(( Может лучше при клике на кнопку повесить доп. класс на section со своей шириной?

[@maximsmirnov887]

Крутые видео

[@razer4195]

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

[@ВладиславКотов-ш5б]

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

[@omeeer8254]

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

[@ilmiragubarenko3618]

Спасибо!!!

[@АндрейЦарик-ч7ж]

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

[@alexanderkorolev7904]

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

[@dowellkin]

Сделай на Sass, как в предыдущем спрашивал

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

Сенсей, сделал все как вы говорите но не работает меню возможно я что то не так вписал jquery версии 3.4.1 а normalize версии 8.0.1

[@Radag0nn563]

А можно тоже самое, но только без JS?(Если такое возможно) Я его просто не учил, и не понимаю, что там.

[@xxxan_official]

Огонь

[@SparkahTV]

сделай видео по оптимизации страницы под разные размеры браузеров

[@SuperZinenko]

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

[@alexredcross]

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