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

[@my_coolheart]

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

[@origami4khd920]

Нее

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

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

[@SFBeriK]

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

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

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

[@StarkElessar]

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

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

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

[@vovamriya2084]

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

[@alexredcross]

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

[@13MrGreg]

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

[@evgeniivavilo8678]

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

[@tarasiliuk]

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

[@criticlswitch]

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

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

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

[@piuhope1920]

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

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

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

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

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

[@viktorshatalov1920]

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

[@andyvi3116]

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

[@daniillipatkin8650]

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

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

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

[@ganster6853]

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

[@calm_night]

Тут плюс

[@mrdraud1726]

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

[@muradqurbanov2761]

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

[@anastasiyaramanava1793]

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

[@Ddddddddyu]

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

[@stasmaksimov9531]

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

[@EltunGaribov]

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

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

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

[@Дендрай]

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

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

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

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

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

[@stasmaksimov9531]

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

[@ivand7299]

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

[@_oxios_]

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

[@dobrydyadka]

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

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

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

[@audiomax111]

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

[@andriikuzmichov4022]

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

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

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

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

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

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

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

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

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

[@pavelsmirnov9818]

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

[@viktortimoshkov6020]

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

[@Vladikslavik]

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

[@dmitrid.317]

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

[@comex1]

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

[@ruslanlion1999]

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

[@vasylshpak9363]

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

[@scorpi220]

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

[@nightdog007]

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

[@user-cheps]

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

[@razer4195]

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

[@vertushka8333]

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

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

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

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

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

[@Andrii_Konohrai]

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

[@mashmix1228]

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

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

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

[@Kontrbandist]

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

[@senior_developer]

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

[@hydrargyrum01]

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

[@YuryPozdneev]

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

[@MusicStrime]

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

[@lilwayne5504]

без подключенного jquery работать не будет, будьте внимательны

[@mishatrick]

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

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

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

[@EuropugEuro]

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

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

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

[@iEfimoff]

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

[@SuperZinenko]

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

[@YaroslavlCity]

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

[@Grapeoff]

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

[@e3rmak]

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

[@joid]

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

[@_fnf1995]

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

[@vladimiroleynik8039]

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

[@Nikolai_Myroshnychenko]

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

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

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

[@VesiolieShortsi]

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

[@codersuz7226]

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

[@Dikobrazeg]

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

[@slxiv]

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

[@SparkahTV]

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

[@nikitap5868]

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

[@dorian4875]

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

[@dowellkin]

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

[@tst.decamorf4727]

При нажатии на кнопку, как сделать затемнение основного контента?

[@amegavlad2312]

Как сделать примагничивание при скроллинге? Например листнул вних и примагнителось туда, куда нужно.

[@omeeer8254]

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

[@sevi43]

Лысый хорош)

[@bogdan-e6w]

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

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

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

[@blackmazebeats2657]

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

[@alexredcross]

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

[@azhar5564]

Программа Visual Studio Code как активировать JavaScript, не получиться у меня

[@Dmitry_Harlamov]

Ставлю лойс

[@Radag0nn563]

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

[@sergeyplotnikov5031]

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

[@sardor370]

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

[@MrTayfunMC]

Привет, можешь показать прикольные примеры анимации текста?

[@flipper-limon]

как сделать так, чтобы при нажатии на пункт меню само меню скрывалось назад?

[@alexanderkorolev7904]

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

[@dnsdns3050]

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