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

Поділитися
Вставка
  • Опубліковано 20 гру 2024

КОМЕНТАРІ • 197

  • @my_coolheart
    @my_coolheart 6 років тому +108

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

  • @ЕгорНей-л3ф
    @ЕгорНей-л3ф 6 років тому +1

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

  • @SFBeriK
    @SFBeriK 6 років тому

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

  • @ДаниилЧайка-ч3в
    @ДаниилЧайка-ч3в 6 років тому +11

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

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

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

  • @StarkElessar
    @StarkElessar 3 роки тому

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

  • @evgeniivavilo8678
    @evgeniivavilo8678 6 років тому

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

  • @vovamriya2084
    @vovamriya2084 6 років тому

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

  • @alexredcross
    @alexredcross 6 років тому +1

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

  • @13MrGreg
    @13MrGreg 4 роки тому

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

  • @tarasiliuk
    @tarasiliuk 6 років тому

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

  • @Иван-б3н5й
    @Иван-б3н5й 6 років тому

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

  • @piuhope1920
    @piuhope1920 6 років тому

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

  • @viktorshatalov1920
    @viktorshatalov1920 5 років тому +1

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

  • @criticlswitch
    @criticlswitch 5 років тому +1

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

  • @daniillipatkin8650
    @daniillipatkin8650 6 років тому

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

  • @ДаниилВохменцев-р7в
    @ДаниилВохменцев-р7в 6 років тому +17

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

    • @ganster6853
      @ganster6853 6 років тому +4

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

    • @calm_night
      @calm_night 6 років тому +1

      Тут плюс

  • @muradqurbanov2761
    @muradqurbanov2761 6 років тому

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

  • @stasmaksimov9531
    @stasmaksimov9531 6 років тому

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

  • @КошачЬеоЧько
    @КошачЬеоЧько 6 років тому +1

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

  • @ИльяЗуев-л1ф
    @ИльяЗуев-л1ф 6 років тому

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

  • @EltunGaribov
    @EltunGaribov 6 років тому

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

  • @andyvi3116
    @andyvi3116 6 років тому

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

  • @АнатолійБогомол-ь2ю
    @АнатолійБогомол-ь2ю 5 років тому +1

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

  • @anastasiyaramanava1793
    @anastasiyaramanava1793 6 років тому

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

  • @mrdraud1726
    @mrdraud1726 6 років тому

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

  • @ivand7299
    @ivand7299 6 років тому

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

  • @stasmaksimov9531
    @stasmaksimov9531 6 років тому +1

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

  • @КтоТо-х6ь6ь
    @КтоТо-х6ь6ь 6 років тому

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

  • @Ddddddddyu
    @Ddddddddyu 5 років тому +1

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

  • @АртёмАртём-ю4ы
    @АртёмАртём-ю4ы 5 років тому

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

  • @ДенисВасильев-й3у
    @ДенисВасильев-й3у 6 років тому +2

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

  • @Дендрай
    @Дендрай 6 років тому

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

  • @_oxios_
    @_oxios_ 6 років тому

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

  • @dobrydyadka
    @dobrydyadka 6 років тому +3

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

  • @Vladikslavik
    @Vladikslavik 5 років тому +1

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

  • @andriikuzmichov4022
    @andriikuzmichov4022 6 років тому

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

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

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

    • @ЕлизаветаМурзикова
      @ЕлизаветаМурзикова 4 роки тому

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

    • @ВладимирЗлатомрезов
      @ВладимирЗлатомрезов 4 роки тому

      @@ЕлизаветаМурзикова забей. это было месяцев назад и я уже забыл что там делал. в общем идет подмена класса посредством тогле класс на jQuery. если совсем интересно пошукай курс на другом канале
      ua-cam.com/video/owNjEgRxnAQ/v-deo.html

  • @ВиолеттаМинцюк
    @ВиолеттаМинцюк 6 років тому

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

  • @audiomax111
    @audiomax111 5 років тому +1

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

  • @ruslanlion1999
    @ruslanlion1999 6 років тому +1

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

  • @comex1
    @comex1 6 років тому

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

  • @user-cheps
    @user-cheps 6 років тому

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

  • @scorpi220
    @scorpi220 5 років тому +1

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

  • @razer4195
    @razer4195 5 років тому +2

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

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

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

  • @pavelsmirnov9818
    @pavelsmirnov9818 6 років тому +1

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

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

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

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

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

  • @Andrii_Konohrai
    @Andrii_Konohrai 6 років тому +1

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

  • @dmitrid.317
    @dmitrid.317 6 років тому

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

  • @mishatrick
    @mishatrick 6 років тому

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

    • @ДмитрийГущин-ы2л
      @ДмитрийГущин-ы2л 6 років тому

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

  • @nightdog007
    @nightdog007 5 років тому

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

  • @e3rmak
    @e3rmak 6 років тому

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

  • @vertushka8333
    @vertushka8333 6 років тому

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

  • @vasylshpak9363
    @vasylshpak9363 6 років тому

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

  • @viktortimoshkov6020
    @viktortimoshkov6020 6 років тому +2

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

  • @vladimiroleynik8039
    @vladimiroleynik8039 3 роки тому

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

  • @YuryPozdneev
    @YuryPozdneev 4 роки тому +1

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

  • @codersuz7226
    @codersuz7226 4 роки тому

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

  • @tst.decamorf4727
    @tst.decamorf4727 2 роки тому

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

  • @Nikolai_Myroshnychenko
    @Nikolai_Myroshnychenko 2 роки тому

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

  • @joid
    @joid 6 років тому

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

  • @YaroslavlCity
    @YaroslavlCity 6 років тому +3

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

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

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

    • @paveltretyakov4662
      @paveltretyakov4662 3 роки тому

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

  • @ИльяПопович-в1э
    @ИльяПопович-в1э 3 роки тому

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

  • @VesiolieShortsi
    @VesiolieShortsi 4 роки тому

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

  • @azhar5564
    @azhar5564 3 роки тому

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

  • @iEfimoff
    @iEfimoff 6 років тому

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

  • @mashmix1228
    @mashmix1228 6 років тому

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

  • @senior_developer
    @senior_developer 6 років тому

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

  • @dorian4875
    @dorian4875 6 років тому +1

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

  • @hydrargyrum01
    @hydrargyrum01 6 років тому

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

  • @Kontrbandist
    @Kontrbandist 6 років тому

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

  • @EuropugEuro
    @EuropugEuro 6 років тому

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

  • @amegavlad2312
    @amegavlad2312 6 років тому

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

  • @SparkahTV
    @SparkahTV 6 років тому

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

  • @nikitap5868
    @nikitap5868 6 років тому

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

  • @Мысыкпайскиймын
    @Мысыкпайскиймын 3 роки тому

    Как задать скорость выезжающего меню?

  • @MusicStrime
    @MusicStrime 5 років тому

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

  • @flipper-limon
    @flipper-limon 6 років тому

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

  • @_fnf1995
    @_fnf1995 6 років тому

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

  • @Radag0nn563
    @Radag0nn563 6 років тому

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

  • @sevi43
    @sevi43 6 років тому +1

    Лысый хорош)

  • @ВикторМ-о4о
    @ВикторМ-о4о 4 роки тому

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

  • @sergeyplotnikov5031
    @sergeyplotnikov5031 6 років тому

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

  • @Dikobrazeg
    @Dikobrazeg 6 років тому +2

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

  • @ВладиславКотов-ш5б
    @ВладиславКотов-ш5б 6 років тому

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

  • @tigranvardanyan5044
    @tigranvardanyan5044 6 років тому

    подскажите пожалуйста что такого делает preventDefault()?

  • @blackmazebeats2657
    @blackmazebeats2657 6 років тому

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

  • @sardor370
    @sardor370 2 роки тому +1

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

  • @dnsdns3050
    @dnsdns3050 5 років тому

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

  • @ПавелДорожкин-н7ю
    @ПавелДорожкин-н7ю 6 років тому

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

  • @АндрейЦарик-ч7ж
    @АндрейЦарик-ч7ж 6 років тому

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

  • @awenn2015
    @awenn2015 4 роки тому

    Свайпами достаеться меню?

  • @vadimp4669
    @vadimp4669 6 років тому +3

    Как сделать сайт по типу слайдера вертикального?

    • @_oxios_
      @_oxios_ 6 років тому

      Vadim P над гуглить, есть готовое решение

  • @lilwayne5504
    @lilwayne5504 4 роки тому

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

  • @belokopitov
    @belokopitov 5 років тому +7

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

    • @StarkElessar
      @StarkElessar 3 роки тому

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

  • @dowellkin
    @dowellkin 6 років тому

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

  • @bogdan-e6w
    @bogdan-e6w 6 років тому

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