CSS фича #8 ➤ Выезжающее меню слева урок | CSS3 left menu lesson
Рет қаралды 79,257
6 жыл бұрынВы просили меня показать, как можно сделать выезжающее меню, которое отодвигает контент. Исходник тут: 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
@my_coolheart 6 жыл бұрын
JS для самых маленьких или JS фичи - очень было бы круто, ждём!
@origami4khd920 2 жыл бұрын
Нее
@13MrGreg 3 жыл бұрын
Давно уже слежу за каналом и его развитием, так что отдельно хочу поблагодарить за вот такие небольшие, но очень полезные уроки)
@SFBeriK 6 жыл бұрын
Все уроки очень подробные. Нравится подача материала и грамотные пояснения без лишней "воды"!
@user-cw6hs7xf9t 6 жыл бұрын
Спасибо за такое количество уроков, посвященных меня. Не знаю как у остальных, но у меня до этого времени были постоянные проблема с версткой красивого, адаптивного меню.
@user-ob8xp1zy5b 3 жыл бұрын
Это наверное самые понятные и крутые видео. Кайфую, когда смотрю тебя.) Спасибо огромное!
@user-kw2ky2bq9l 6 жыл бұрын
Лайк автоматом, хороший контент и отличная подача!!!))
@evgeniivavilo8678 5 жыл бұрын
Отличная штука. Спасибо Артем за то, что делаешь! Смотрел многих, но у Артема всегда понятно и голос не противный))
@StarkElessar 3 жыл бұрын
Спасибо большое за твой труд, за твой контент! За твой канал! И спасибо, что когда пишешь код - ы объясняешь, что и зачем!
@alexredcross 6 жыл бұрын
Хорошие темы, и раскрыты максимально понятно, спасибо за работу!)
@criticlswitch 5 жыл бұрын
Артём, спасибо за классный контент! Лайк за видики.
@user-hm7kv6vb4f 5 жыл бұрын
Спасибо за видео. Как всегда много полезного, и доступно объяснил!
@user-me8dt7sz8i 6 жыл бұрын
Артём ты крут! Нереально доступно объясняешь! Спасибо!
@anastasiyaramanava1793 6 жыл бұрын
очень крутые css-ные фишки, спасибо за рубрику)
@muradqurbanov2761 6 жыл бұрын
Супер как и предыдущие видео, ждем еще!!
@user-ts1st1gc2q 6 жыл бұрын
Очень круто !! Все понятно и интересно у самого возникает желание сделать и попробовать что то новое.
@mrdraud1726 6 жыл бұрын
лойс не глядя, хорошо подаешь информацию, удачи в развитии канала
@piuhope1920 6 жыл бұрын
Приятный парень, приятно и понятно объясняет, спасибо)
@user-jg7ly1ib2z 4 жыл бұрын
Обязательно продолжай, очень интересно)
@stasmaksimov9531 6 жыл бұрын
Артём, ты крут! Все чётко и ясно! 🔥больше фишек!!!
@_oxios_ 6 жыл бұрын
До мурашек, жги !
@tarasiliuk 5 жыл бұрын
Очень крутое видео. Для начинающих это крутой источник знаний и различных фишек. Продолжай делать такие видео далее. Лайк :)
@user-hq7qo3rx4j 6 жыл бұрын
Ты круче всех! Продолжай в том же духе!
@andyvi3116 6 жыл бұрын
вижу урок сss фич от Артема - влепляю царский лайк. Как всегда, всё круто и безумно просто! По поводу грамотности произношения английских слов, правильно произносить не хайден, а хиден, но это уже придирки) Perspective правильно произносишь!)
@Ddddddddyu 5 жыл бұрын
Круто. Спасибо за такие крутые видео уроки.
@viktorshatalov1920 4 жыл бұрын
Исламов просто красавчик!!!! RELATIVE)))))класс!!!
@user-lp1hb2tv9x 6 жыл бұрын
Царский ЛАЙК! Любые фичи давай))
@daniillipatkin8650 6 жыл бұрын
Спасибо, хоть кто-то сделал видео с такой актуальной фичей
@user-bt4vc1jq3b 6 жыл бұрын
Все круто,спасибо за все.Продолжай в том же духе.Ты как лэтсплэйщик веселый,только прогер
@pavelsmirnov9818 6 жыл бұрын
спасибо, крутые уроки)
@ivand7299 6 жыл бұрын
Годная рубрика! Канал растет.
@vovamriya2084 6 жыл бұрын
Я конечно не учитель англ. языка но мне твоё произношение рилЕЙтив нравится больше!))
@dmitrid.317 6 жыл бұрын
очень интересно и доступно! Спасибо!
@audiomax111 5 жыл бұрын
Тройное уважение
@mashmix1228 6 жыл бұрын
Все красиво, спасибо)
@stasmaksimov9531 6 жыл бұрын
Больше уроков по jS 👍👍👍
@Kontrbandist 6 жыл бұрын
Очень классно, спасибо!!
@hydrargyrum01 5 жыл бұрын
Спасибо. Удачи вам
@senior_developer 6 жыл бұрын
Хороший урок. Лойс
@andriikuzmichov4022 6 жыл бұрын
Хотелось бы увидеть разные оформления чек-боксов, радио-батонов и разных переключателей ))
@user-rc2uk5hp6f 4 жыл бұрын
очень круто 👍👍👍
@slxiv 4 жыл бұрын
Красавчик!!!
@nightdog007 5 жыл бұрын
влепил 120-килограммовый лойс!
@vasylshpak9363 6 жыл бұрын
Жду JS фичи и jquery! спасибо тебе за старания)
@dobrydyadka 6 жыл бұрын
Артём, сделай пожалуйста видос по теням, например про то как это реализовано в material design при наведении на объект.
@m1akarov442 2 жыл бұрын
очень круто
@maximsmirnov887 6 жыл бұрын
Крутые видео
@user-wu3bx4vw4b 6 жыл бұрын
Круто! Мучу такие штуки на бутстрапе. Там есть колапс копмонент.
@viktortimoshkov6020 6 жыл бұрын
Мне нравится формат этих видиков)) го некст!
@Dmitry_Harlamov 6 жыл бұрын
Ставлю лойс
@comex1 6 жыл бұрын
Всё круто. Замути видос про то, как делать расширения для браузера и как его опубликовать
@user-kc3wx1xy2k 6 жыл бұрын
лайк бро )
@ilmiragubarenko3618 6 жыл бұрын
Спасибо!!!
@user-pv1kj1fq7p 6 жыл бұрын
С футболкой просто выстрелило х)
@user-bw5gg8mc8k 6 жыл бұрын
Все круто. Сделай видос по оптимизации для retina дисплеев
@ganster6853 6 жыл бұрын
Очень классная тема
@calm_night 6 жыл бұрын
Тут плюс
@sevi43 6 жыл бұрын
Лысый хорош)
@xxxan_official 5 жыл бұрын
Огонь
@_fnf1995 6 жыл бұрын
Да поддерживаю, JS
@Grapeoff 6 жыл бұрын
С наступающим
@user-bd8rz6ok4z 6 жыл бұрын
Мои лайки все Царские! ;)
@ruslanlion1999 6 жыл бұрын
В копилку с "релэйтив": hidden читается как "хИден", а не "хАйден". p.s. Спасибо за очередную фичу, годно!)
@mojoooCo 6 жыл бұрын
ты топ в ру сегменте
@alexanderkorolev7904 5 жыл бұрын
Подписался и на колокольчик нажал
@user-dm1ix4co9z 6 жыл бұрын
Уже писал, повторюсь. Цвета можно взять если кликнуть на ссылку "Assets" в левом-нижнем углу.
@Vladikslavik 4 жыл бұрын
С relative разобрались, теперь с hidden. Правильно произносится как хидн :-)))
@user-cheps 6 жыл бұрын
Согласен со всеми, крутая рубрика! По видео: действительно не хватает затемнения контента. Ну это наверное можно реализовать через наложение полупрозрачного растянутого ::after для контентной части. Интересно как закрытие сделать при нажатии на затемненный контент.. Плюс тут заморочка с гамбургером возникнет: это же работает так: нажал на гамбургер, меню добавляется класс, гамбургеру тоже, меню выехало, гамбургер проанимировался. Ок, теперь нажимаем на контент, меню закрылось, а на гамбургер ведь не нажимали, он так и остался в состоянии открытого меню... Тут надо как-то к состоянию меню привязывать. Может знает кто как?
@Andrii_Konohrai 6 жыл бұрын
Тема менюшек пошла. А если, допустим, всякие приколы и фишки для кнопок заказа звонка с анимацией и т.п.?)
@EuropugEuro 6 жыл бұрын
Артем продолжайте видео по CSS
@vertushka8333 6 жыл бұрын
Было бы интересно сделать урок по стилизации чекбоксов
@joid 6 жыл бұрын
Клевые видосы, лайк поставил. Сделай урок как можно сделать изогнутый текст вокруг окружности, есть вариант каждую букву возвести в span и с помощью css transform: rotate() крутить, не очень удобно особенно если этот текст должен меняться из админки CMS, я делал с помощью js (получилось) он как раз автоматом возводил в span каждую букву и подкручивал как нужно, видел способ как делают с помощь svg
@YaroslavlCity 6 жыл бұрын
Спасибо, Артём! Хороший тутор. И вот такой вопрос. Последнее время я всё чаще использую .svg. Подкупает масштабируемость , эффекты и фильтры, возможность обработки javascript и css. Я и background-image теперь иногда делаю с svg. Но сверлит мысль о недостаточной браузерной поддержке. Взглянешь потом чем-нибудь, всплакнёшь(сразу времена IE6 вспомнились, гореть ему в аду! ) и придётся переделывать. Я фрилансер, всегда один. О новинках и тенденциях только и узнаю от блогеров. Так как с svg? Не рано его широко юзать? А то я подсел...
@iEfimoff 6 жыл бұрын
Еще хороший урок можно сделать про Contenteditable
@e3rmak 6 жыл бұрын
Артём, будет ли видео про онлайн кассы? Разбери вопрос налогов с 1 июля 2018.
@bogdan.k.s 6 жыл бұрын
Сделай несколько вариаций меню с категориями товаров для интернет магазина)
@islamgapisov197 6 жыл бұрын
найс
@Dikobrazeg 6 жыл бұрын
Я ещё хотел бы увидеть JS фичи
@user-js3sy2qv7m 4 жыл бұрын
Все, заработало, другой скрипт использовал. Нужно еще поэкспериментировать и потом скину ссылку на исходники
@user-vx8oy8vh3g 3 жыл бұрын
Можно ссылку?
@user-js3sy2qv7m 3 жыл бұрын
@@user-vx8oy8vh3g забей. это было месяцев назад и я уже забыл что там делал. в общем идет подмена класса посредством тогле класс на jQuery. если совсем интересно пошукай курс на другом канале kzfaq.info/get/bejne/pd1-naiYt97ScYU.html
@MusicStrime 4 жыл бұрын
Ти понимаешь что единственний кто смог мне помочь в етом почему все не ти))Если что я руский не очень хорошо знаю...
@user-qb7jg4hx5l 6 жыл бұрын
relative поднял настроение )
@codersuz7226 4 жыл бұрын
Просто супер ваших видео мне нравиться можете снять видео о создания личного кабинета польностью на php7 myssql на 100% защищенными опен сервере
@user-dp1yd8pz4j 6 жыл бұрын
больше, давай больше муток
@omeeer8254 6 жыл бұрын
Артём, подскажи характеристики своего Mac пожалуйста и хватает ли его для всех твоих задач?
@nikitap5868 6 жыл бұрын
JS фичи было бы круто. А в CSS фичах давай аннимированый background!
@a1eksr 6 жыл бұрын
даёшь "видики" по JS! )
@dowellkin 6 жыл бұрын
Сделай на Sass, как в предыдущем спрашивал
@scorpi220 4 жыл бұрын
Норд, кто может подсказать, я просто не совсем понял. Когда прописывался content_active и menu_active но у нас же в html разметке не задан данные классы, так как он к нему привязался, а псевдо прописывается вроде :active? Объясните пожалуйста)
@serg9836 6 жыл бұрын
Даёшь #9
@user-xg3ik2zg5j 4 жыл бұрын
Хочу посмотреть пример бесконечной бесшовной анимации (например слева подымаются несколько блоков в которых анимация цифр)
@zcbesaba 6 жыл бұрын
good
@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-xg3ik2zg5j 4 жыл бұрын
Советы как писать код с разными размерами изображений на макетах (десктоп планшет телефон) . С учетом скорости загрузки страницы.
@alexredcross 6 жыл бұрын
Когда будет js для новичков?) заранее спасибо)
@user-ie6jd2ul2c 3 жыл бұрын
Сделайте подробный урок по Js пожалуйста
@alpha-dzhem 6 жыл бұрын
Артём, спасибо за труды! Напрашивается схожая тема: горизонтальное меню-аккордеон.
@razer4195 4 жыл бұрын
Как изменить квадрат(меню) на свою картинку(три полоски)
@SparkahTV 6 жыл бұрын
сделай видео по оптимизации страницы под разные размеры браузеров
@mishatrick 6 жыл бұрын
Урок полезный, но хотелось бы увидеть, как реализовать, чтобы на десктопе было обычное меню, а при сужении экрана оно превращалось в такое, как на этом видео.
@user-oh7ri6do7l 6 жыл бұрын
Медиа. Кнопка изначально скрыта, показано основное меню. При нужной ширине экрана прячешь основное меню и показываешь кнопку
@user-yc5jb3ys9f 4 жыл бұрын
у меня сначала не сработала часть js, я решил скопировать весь код в codepen и в коде javascript выскакивает это: Uncaught ReferenceError: $ is not defined. Подскажите пожалуйста, в чем проблема?
@vladimiroleynik8039 2 жыл бұрын
все круто кроме перезагрузки web страницы - т.е. меню выехало - пользователь что-ьл делает потом перезагрузка страницы и меню само закрывается обратно и нужно снова щелкать по бургеру. Как сохранить меню в выехавшем положении при перезагрузке страницы? понимаю этот пост давно вышел, 2018г но если есть возможность пожалуйста подскажите
@amegavlad2312 6 жыл бұрын
Как сделать примагничивание при скроллинге? Например листнул вних и примагнителось туда, куда нужно.
@meneralo4kacool 6 жыл бұрын
css выпадающие списки давай)
Gufee.medalin
Рет қаралды 8 МЛН
Фрілансер по життю
Рет қаралды 400 М.
Ulbi TV
Рет қаралды 59 М.
Pomazkov JS
Рет қаралды 254 М.
ФИЛЬМАКРАТ
Рет қаралды 2,3 МЛН