Выдвижное меню без JavaScript

Поделиться
HTML-код
  • Опубликовано: 1 авг 2021
  • Всем привет друзья, из этого видео вы узнаете как сделать выдвижное меню на чистом CSS без использования JavaScript, приятного просмотра!
    Cсылки:
    Архив с файлами сайта - disk.yandex.ru/d/ghPXuEna9CG_bA
    Группа ssttrano вк - ssttrano_group
    Мой вк - ssttrano
    Группа вк RENEDE Design (логотипы) - renededisign
    Музыка из видео:
    Песня из видео: LAZERHAWK - SO FAR AWAY
    Взято с канала: Ezek5
    Песня из видео: Euan Ellis - Night Visions
    Взято с канала: Definition of Chill.
    Лицензия - не предоставлена
    Проверено на сайте: eproves.com
    Песня из видео: Euan Ellis - Night Visions
    Взято с канала: Definition of Chill.
    Лицензия - не предоставлена
    Проверено на сайте: eproves.com
    #html #css #ssttrano

Комментарии • 106

  • @user-bq4mb3zg7h
    @user-bq4mb3zg7h 2 года назад +38

    *Такой контент заслуживает большего* 👍🏽

    • @ssttrano
      @ssttrano  2 года назад +3

      Спасибо 💫

  • @ssttrano
    @ssttrano  2 года назад +11

    Всем спасибо за просмотр)
    Теперь ваша задача - написать какие либо свои вопросы, если они есть
    А моя - найти программу для записи что бы не было потери фпс при записи...

    • @evgenichperedela6430
      @evgenichperedela6430 2 года назад +1

      Помоги пожалуйста!!!
      У меня меню открывается ПОД блоками , как это можна исправить?

  • @tryamfull
    @tryamfull Год назад

    Спасибо за контент, сейчас для меня это очень актуально, а Вы объяснили на примерах и доходчиво, жду еще видео, не забрасывайте. Особенно шуточки, которые проскальзывают в видео♥

  • @user-pk4lp4gw9c
    @user-pk4lp4gw9c Год назад

    Одно удовольствие смотреть ваши видео

  • @TimChaplinman
    @TimChaplinman 2 года назад +8

    Отличный формат. Коротко и по существу. А еще приятная атмосферная музычка)

    • @ssttrano
      @ssttrano  2 года назад

      Приятно читать)

    • @phitrow
      @phitrow 7 месяцев назад

      и не громко, как иногда бывает.

  • @Hach
    @Hach 2 года назад +2

    Видео супер, на ютубе не хватает таких видео.

  • @Duh280
    @Duh280 Год назад +1

    Афигенно! Просто и со вкусом👍

  • @zaharborovskiy7531
    @zaharborovskiy7531 2 года назад +3

    Видос супер! Всё четко, без спешки, спасибо!

    • @ssttrano
      @ssttrano  2 года назад

      рад что понравилось💫

  • @topttedhbiu_dejlbfuh4uk956
    @topttedhbiu_dejlbfuh4uk956 9 месяцев назад

    Как же долго я искал тебя брат, даже GPT помочь не смог, красавчик!!!

  • @cesar8365
    @cesar8365 7 месяцев назад

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

  • @helicobacterpylori7447
    @helicobacterpylori7447 Год назад +2

    Друг, ты легенда, спасибо тебе большое

  • @user-zw9mp2fd7d
    @user-zw9mp2fd7d Год назад +1

    Друг большое спасибо тебе за такой интересный контент, давно искал как сделать простое адаптивное меню, но твой вариант просто порадовал. Супер, 👍👏😆

    • @StarmanNo1
      @StarmanNo1 11 месяцев назад

      Оно хорошо работает на телефонах?

  • @user-ed7jn4vd6y
    @user-ed7jn4vd6y 2 месяца назад

    Спасибо большое, очень полезное видео!!!!!

  • @user-lk5ey8pj5y
    @user-lk5ey8pj5y Год назад +1

    Спасибо за полезную инфу!!!

  • @Serik01kz
    @Serik01kz 2 года назад +2

    Привет спасиба за меню необычный и интересно продолжай том же духе

  • @yankevich-andrey
    @yankevich-andrey 11 месяцев назад +3

    Напишу комментарий не только в поддержку канала, а с огромной благодарностью автору!
    Единственное, было бы хорошо если б текстовые подсказки-пояснения были чуть дольше на экране (приходится перематывать назад и ставить на паузу)

  • @nastasa6313
    @nastasa6313 8 месяцев назад

    Спасибо больше, очень понятно, полезно и очень помогло

  • @ruslankarimov5643
    @ruslankarimov5643 10 месяцев назад

    Супер! Большое спасибо! Подписался на канал

  • @Caro1109
    @Caro1109 8 месяцев назад

    Самый кайфовый гайд, спасибо

  • @user-fx1ny5ee6d
    @user-fx1ny5ee6d Год назад +1

    Спасибо, здорово!

  • @mkhllk_
    @mkhllk_ 11 месяцев назад +1

    Очень круто и классно 👍

  • @user-zr8pj1zz2p
    @user-zr8pj1zz2p Год назад +1

    Красиво:)
    Рекомендую для стилизации первой буквы псевдоэлемент :first-letter вместо span в HTML

  • @yebfudeu3313
    @yebfudeu3313 Год назад

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

  • @muborakshoh.2003
    @muborakshoh.2003 2 месяца назад

    Спасибо за информацию

  • @one_mik
    @one_mik Год назад +1

    как же красивый background😊

  • @badiavictor5332
    @badiavictor5332 Год назад

    spasibo bolishoe!!!

  • @berry_v1bes
    @berry_v1bes Год назад

    Красавец !!!!

  • @user-hb5ul2jx6p
    @user-hb5ul2jx6p Год назад +1

    Спасибо, Вам

  • @VULUCK
    @VULUCK Год назад +2

    Здорово получилось

  • @ggbro5234
    @ggbro5234 Год назад

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

  • @user-rt6hg3sx5v
    @user-rt6hg3sx5v 10 месяцев назад

    Классно получилось)

  • @_duty_free
    @_duty_free Год назад

    топ канал, с топ контентом

  • @user-pl8if5je5b
    @user-pl8if5je5b 28 дней назад

    Спасибо ❤

  • @fedzet5511
    @fedzet5511 2 месяца назад

    чел просто мега гений спасибо

  • @ryan_igor
    @ryan_igor Год назад

    Дуже дякую за відео!!

  • @user-co5yn9op3f
    @user-co5yn9op3f Год назад

    Спасибо большое!!!

  • @famix7431
    @famix7431 9 месяцев назад

    спасибо🍉

  • @user-xi8hk9ze6k
    @user-xi8hk9ze6k 2 года назад

    Красаучик)

  • @dlayutuba
    @dlayutuba 9 месяцев назад

    Мне понравилось

  • @user-qy4sn1xp8y
    @user-qy4sn1xp8y Год назад +2

    Все отлично, но попробуй увеличить экран в области, где идет написание кода.

  • @eg6r472
    @eg6r472 7 месяцев назад

    Это очень красиво и просто!
    Но у меня вопрос: можно сделать, что бы он выдвигался при нажатии или что бы при убирани курсора, он также плавно задвигался назад?

  • @flashtaken
    @flashtaken 11 месяцев назад

    харош

  • @n3159
    @n3159 2 года назад +1

    Ну чтож, теперь надо точно тоже пилить видос

  • @pasitoaegis
    @pasitoaegis 2 года назад

    Супер, что сказать

    • @ssttrano
      @ssttrano  2 года назад

      Спасибо, аххах

  • @user-iv2dd3ir2v
    @user-iv2dd3ir2v 2 года назад

    Такой контент топовий

  • @n3159
    @n3159 2 года назад +1

    Кста безусловно лайк

    • @ssttrano
      @ssttrano  2 года назад

      💪🏿

    • @n3159
      @n3159 2 года назад +1

      Рука Владика?

  • @eqz31
    @eqz31 Год назад

    У меня есть вопрос. Почему когда я навожу на определенную часть этой навигационной панели, то она сворачивается даже если я не нахожусь за ее пределами?

  • @insidiousgoblin3258
    @insidiousgoblin3258 Год назад

    а как зделать так чтобы текст который тбудет на этой страничке не урезал меню навигации,тоесть чтобы меню навигации было планов више?

  • @henricqwinto6388
    @henricqwinto6388 2 года назад

    Гут 👍

  • @lutayabebra
    @lutayabebra 2 года назад +1

    7:36 эффект наведения

  • @endplay-offs1952
    @endplay-offs1952 2 месяца назад

    не получается, пишу точь в точь, а нифига не работает? может быть из-за формата картинки?
    а так спасибо, очень кратко и по существу

  • @mrkasper_v_dome4704
    @mrkasper_v_dome4704 2 года назад +2

    Видос интересный . Правда чот у меня менюшка так и не открылась. Но с твоего архива работает.
    Кстати а почему в файле из твоего архива нету backdrop?

    • @seich3735
      @seich3735 7 месяцев назад

      У меня тоже она не открывается

  • @gacha_dasha5744
    @gacha_dasha5744 Год назад +2

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

  • @alekseytsyganov9560
    @alekseytsyganov9560 Месяц назад

    Чё делать, если при увеличении масштаба менюшка ломается?

  • @nastaybirudeshvili6706
    @nastaybirudeshvili6706 2 года назад

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

  • @user-zv6cw4uf1k
    @user-zv6cw4uf1k Год назад

    У меня не ушло меню влево оно сбоку экрана появляется и все

  • @maxijerox338
    @maxijerox338 2 месяца назад

    Есть одна проблема когда я хотел сделать анимацию что бы при наведение открылось и закрывалост я так же все писал но нечего не работает что делать подскажите?

    • @ssttrano
      @ssttrano  2 месяца назад

      Можете в личные сообщения отправить скриншоты кода, помогу

  • @olegvasich8956
    @olegvasich8956 Год назад

    а что по таблет и моб?

  • @Dik131WZD
    @Dik131WZD 2 года назад +2

    А как сделать навигацию не сверху, а сбоку: чтобы основной контент двигался, когда разворачиваешь меню?

  • @Serik01kz
    @Serik01kz 2 года назад

    А ты можешь добавит логотип и поск у меня не получилось добавит в логотип

  • @mydream6823
    @mydream6823 Год назад

    Гайд доступный и понятный, но таблички с всплывающим текстом подсказок лучше сделать чуть подольше, а то не успеваешь читать(

  • @user-vi8zv1ls8z
    @user-vi8zv1ls8z 3 месяца назад

    Поменял в шаблоне текст, теперь не работает меню. Кто знает как исправить?

  • @user-ox1bh3vh2t
    @user-ox1bh3vh2t 2 года назад +1

    7:42 главная мысль: выдвижение меню

  • @nastaybirudeshvili6706
    @nastaybirudeshvili6706 2 года назад

    я получил оргазм глаз, спасибо.

    • @ssttrano
      @ssttrano  2 года назад

      Хорошо что только глаз, аххах

    • @user-fy3jo6qw4e
      @user-fy3jo6qw4e Год назад

      Пхпхахахахаха почему че тут такого красивого

  • @Ruaa-ov4fq
    @Ruaa-ov4fq Год назад

    Проблема с картинками можно подробнее 🥱

  • @user-iv2dd3ir2v
    @user-iv2dd3ir2v 2 года назад

    проблема картинки нема и остум між home
    profel
    registration
    enter як исправить

  • @user-ij2fk5qy2e
    @user-ij2fk5qy2e Год назад

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

    • @ssttrano
      @ssttrano  Год назад +1

      пишешь
      li {
      list-style: none
      }
      a {
      text-decoration: none
      }

    • @user-ij2fk5qy2e
      @user-ij2fk5qy2e Год назад

      @@ssttrano все благодарю брах

  • @sora8274
    @sora8274 2 года назад

    А как разместить текст в блоке вне меню, чтобы он был поверх фото?

    • @ssttrano
      @ssttrano  2 года назад

      Если я правильно тебя понял, то у меня есть видео на канале, про размещение текста над картинкой

    • @tengrigani1004
      @tengrigani1004 Год назад

      Просто position: absolute и z 1

    • @tengrigani1004
      @tengrigani1004 Год назад

      Бля я не на компе, напиши z и там найдешь

    • @tengrigani1004
      @tengrigani1004 Год назад

      Гол назад ну ок

  • @evgenichperedela6430
    @evgenichperedela6430 2 года назад +1

    Помогите пожалуйста!!!
    У меня меню открывается ПОД блоками , как это можна исправить?
    За видос спасибо, лайк поставил)

    • @ssttrano
      @ssttrano  2 года назад +1

      Скорее всего проблема в том что в меню не прописано position: fixed;
      Если не поможет то напиши в вк, буду рад помочь)

    • @presstoff9470
      @presstoff9470 2 года назад

      @@ssttrano Если я использую эту функцию, у меня пропадает все меню

    • @ssttrano
      @ssttrano  2 года назад

      @@presstoff9470 Допиши так же top:0; left:0;
      Если что то пойдет не так и не сработает то напиши в вк, разберемся со всеми проблемками

    • @presstoff9470
      @presstoff9470 2 года назад

      @@ssttrano да, спасибо) Уже решила проблему)

  • @user-hn9nb2bs4z
    @user-hn9nb2bs4z Год назад

    Как добавить текст, а то всё слетает?

    • @ssttrano
      @ssttrano  Год назад

      привет, если помощь еще требуется то можешь связаться со мной в вк

  • @Serik01kz
    @Serik01kz 2 года назад

    Если сможешь здеат и улучить тогда я потишус и скажу друзям чтобы подписались

  • @silverraze885
    @silverraze885 2 года назад

    @ssttrano можно текст?

    • @ssttrano
      @ssttrano  2 года назад

      Текста больше нет

    • @silverraze885
      @silverraze885 2 года назад

      @@ssttrano Ну ладно