CSS фича #8 ➤ Выезжающее меню слева урок | CSS3 left menu lesson
HTML-код
- Опубликовано: 20 июн 2018
- Вы просили меня показать, как можно сделать выезжающее меню, которое отодвигает контент. Исходник тут: 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 
Развлечения
![Chance The Rapper, DJ Premier - Together (2024) | [Official Music Video]](http://i.ytimg.com/vi/ZVwTX6WP-MM/mqdefault.jpg)
JS для самых маленьких или JS фичи - очень было бы круто, ждём!
Нее
Все уроки очень подробные. Нравится подача материала и грамотные пояснения без лишней "воды"!
Это наверное самые понятные и крутые видео. Кайфую, когда смотрю тебя.) Спасибо огромное!
Давно уже слежу за каналом и его развитием, так что отдельно хочу поблагодарить за вот такие небольшие, но очень полезные уроки)
Лайк автоматом, хороший контент и отличная подача!!!))
Спасибо за такое количество уроков, посвященных меня. Не знаю как у остальных, но у меня до этого времени были постоянные проблема с версткой красивого, адаптивного меню.
Хорошие темы, и раскрыты максимально понятно, спасибо за работу!)
Спасибо большое за твой труд, за твой контент! За твой канал! И спасибо, что когда пишешь код - ы объясняешь, что и зачем!
Отличная штука. Спасибо Артем за то, что делаешь! Смотрел многих, но у Артема всегда понятно и голос не противный))
Спасибо за видео. Как всегда много полезного, и доступно объяснил!
Артём, спасибо за классный контент! Лайк за видики.
Артём ты крут! Нереально доступно объясняешь! Спасибо!
очень крутые css-ные фишки, спасибо за рубрику)
Очень круто !! Все понятно и интересно у самого возникает желание сделать и попробовать что то новое.
Артём, ты крут! Все чётко и ясно! 🔥больше фишек!!!
Приятный парень, приятно и понятно объясняет, спасибо)
Обязательно продолжай, очень интересно)
лойс не глядя, хорошо подаешь информацию, удачи в развитии канала
Спасибо, хоть кто-то сделал видео с такой актуальной фичей
Очень крутое видео. Для начинающих это крутой источник знаний и различных фишек. Продолжай делать такие видео далее. Лайк :)
Исламов просто красавчик!!!! RELATIVE)))))класс!!!
Супер как и предыдущие видео, ждем еще!!
Все круто,спасибо за все.Продолжай в том же духе.Ты как лэтсплэйщик веселый,только прогер
Ты круче всех! Продолжай в том же духе!
Круто. Спасибо за такие крутые видео уроки.
До мурашек, жги !
Царский ЛАЙК! Любые фичи давай))
вижу урок сss фич от Артема - влепляю царский лайк. Как всегда, всё круто и безумно просто! По поводу грамотности произношения английских слов, правильно произносить не хайден, а хиден, но это уже придирки) Perspective правильно произносишь!)
Я конечно не учитель англ. языка но мне твоё произношение рилЕЙтив нравится больше!))
очень интересно и доступно! Спасибо!
спасибо, крутые уроки)
Тройное уважение
Больше уроков по jS 👍👍👍
Годная рубрика! Канал растет.
Спасибо. Удачи вам
Все красиво, спасибо)
Очень классно, спасибо!!
Жду JS фичи и jquery! спасибо тебе за старания)
Артём, сделай пожалуйста видос по теням, например про то как это реализовано в material design при наведении на объект.
Хороший урок. Лойс
влепил 120-килограммовый лойс!
Все круто. Сделай видос по оптимизации для retina дисплеев
Очень классная тема
Тут плюс
Круто! Мучу такие штуки на бутстрапе. Там есть колапс копмонент.
Красавчик!!!
Хотелось бы увидеть разные оформления чек-боксов, радио-батонов и разных переключателей ))
Да поддерживаю, JS
очень круто 👍👍👍
Всё круто. Замути видос про то, как делать расширения для браузера и как его опубликовать
Мне нравится формат этих видиков)) го некст!
Спасибо, Артём! Хороший тутор.
И вот такой вопрос. Последнее время я всё чаще использую .svg. Подкупает масштабируемость , эффекты и фильтры, возможность обработки javascript и css. Я и background-image теперь иногда делаю с svg. Но сверлит мысль о недостаточной браузерной поддержке. Взглянешь потом чем-нибудь, всплакнёшь(сразу времена IE6 вспомнились, гореть ему в аду! ) и придётся переделывать.
Я фрилансер, всегда один. О новинках и тенденциях только и узнаю от блогеров.
Так как с svg? Не рано его широко юзать? А то я подсел...
очень круто
В копилку с "релэйтив": hidden читается как "хИден", а не "хАйден". p.s. Спасибо за очередную фичу, годно!)
С футболкой просто выстрелило х)
Спасибо!!!
Крутые видео
Лысый хорош)
Ставлю лойс
Уже писал, повторюсь. Цвета можно взять если кликнуть на ссылку "Assets" в левом-нижнем углу.
Согласен со всеми, крутая рубрика!
По видео: действительно не хватает затемнения контента. Ну это наверное можно реализовать через наложение полупрозрачного растянутого ::after для контентной части.
Интересно как закрытие сделать при нажатии на затемненный контент..
Плюс тут заморочка с гамбургером возникнет: это же работает так: нажал на гамбургер, меню добавляется класс, гамбургеру тоже, меню выехало, гамбургер проанимировался. Ок, теперь нажимаем на контент, меню закрылось, а на гамбургер ведь не нажимали, он так и остался в состоянии открытого меню... Тут надо как-то к состоянию меню привязывать. Может знает кто как?
Клевые видосы, лайк поставил. Сделай урок как можно сделать изогнутый текст вокруг окружности, есть вариант каждую букву возвести в span и с помощью css transform: rotate() крутить, не очень удобно особенно если этот текст должен меняться из админки CMS, я делал с помощью js (получилось) он как раз автоматом возводил в span каждую букву и подкручивал как нужно, видел способ как делают с помощь svg
Артем продолжайте видео по CSS
С relative разобрались, теперь с hidden. Правильно произносится как хидн :-)))
Все, заработало, другой скрипт использовал. Нужно еще поэкспериментировать и потом скину ссылку на исходники
Можно ссылку?
@@user-vx8oy8vh3g забей. это было месяцев назад и я уже забыл что там делал. в общем идет подмена класса посредством тогле класс на jQuery. если совсем интересно пошукай курс на другом канале
ruclips.net/video/owNjEgRxnAQ/видео.html
Мои лайки все Царские! ;)
ты топ в ру сегменте
Артём, подскажи характеристики своего Mac пожалуйста и хватает ли его для всех твоих задач?
С наступающим
Огонь
лайк бро )
Артём, будет ли видео про онлайн кассы? Разбери вопрос налогов с 1 июля 2018.
Подписался и на колокольчик нажал
Еще хороший урок можно сделать про Contenteditable
Просто супер ваших видео мне нравиться можете снять видео о создания личного кабинета польностью на php7 myssql на 100% защищенными опен сервере
Ти понимаешь что единственний кто смог мне помочь в етом почему все не ти))Если что я руский не очень хорошо знаю...
Норд, кто может подсказать, я просто не совсем понял.
Когда прописывался content_active и menu_active но у нас же в html разметке не задан данные классы, так как он к нему привязался, а псевдо прописывается вроде :active? Объясните пожалуйста)
Тема менюшек пошла. А если, допустим, всякие приколы и фишки для кнопок заказа звонка с анимацией и т.п.?)
Я ещё хотел бы увидеть JS фичи
Было бы интересно сделать урок по стилизации чекбоксов
Сделай несколько вариаций меню с категориями товаров для интернет магазина)
А в контейнере 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)
relative поднял настроение )
Артём, спасибо за труды!
Напрашивается схожая тема: горизонтальное меню-аккордеон.
Сделай на Sass, как в предыдущем спрашивал
JS фичи было бы круто. А в CSS фичах давай аннимированый background!
Когда будет js для новичков?) заранее спасибо)
больше, давай больше муток
найс
Хочу посмотреть пример бесконечной бесшовной анимации (например слева подымаются несколько блоков в которых анимация цифр)
на ВР 14 подобное будет или там будет не до этого ?
все круто кроме перезагрузки web страницы - т.е. меню выехало - пользователь что-ьл делает потом перезагрузка страницы и меню само закрывается обратно и нужно снова щелкать по бургеру. Как сохранить меню в выехавшем положении при перезагрузке страницы? понимаю этот пост давно вышел, 2018г но если есть возможность пожалуйста подскажите
Привет, можешь показать прикольные примеры анимации текста?
сделай видео по оптимизации страницы под разные размеры браузеров
даёшь "видики" по JS! )
Советы как писать код с разными размерами изображений на макетах (десктоп планшет телефон) . С учетом скорости загрузки страницы.
у меня сначала не сработала часть js, я решил скопировать весь код в codepen и в коде javascript выскакивает это: Uncaught ReferenceError: $ is not defined. Подскажите пожалуйста, в чем проблема?
Подскажите пожалуйста, как при открытии меню в 30%, основной контент сужался до 70%, чтоб меню не перекрывало контент?
То есть, правильно ли я понял - чтобы меню выезжало на мобильных разрешениях, то я должен весь этот CSS-код, поместить в соответствующий медиа-запрос, и убрать его с десктоп-разрешения, верно?
А можно тоже самое, но только без JS?(Если такое возможно) Я его просто не учил, и не понимаю, что там.
как сделать , чтоб вместо меню был список чего та(музыки , или же друзей типа)
Как изменить квадрат(меню) на свою картинку(три полоски)