Easy Mega Menu and Multi Level Dropdown with Animations | HTML & CSS Tutorial (2020)

Поделиться
HTML-код
  • Опубликовано: 18 окт 2024

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

  • @codeSTACKr
    @codeSTACKr  4 года назад +2

    🦸 Become A VS Code SuperHero Today: vsCodeHero.com

  • @AlanD20
    @AlanD20 4 года назад +2

    THANK YOU SO MUCH. I've never thought about writing CSS like that. That was an actual mind-opening for me to do lots of complex design. I always wondered how you do it. even I know most of the CSS properties. Thank you so much.

  • @thanossmponias2915
    @thanossmponias2915 4 года назад +2

    Great work!! Making this huge thing responsive will make you a real hero to many . . . . .

    • @codeSTACKr
      @codeSTACKr  4 года назад +1

      This video was getting a bit long. I'm going to do one on making this responsive :)

    • @thanossmponias2915
      @thanossmponias2915 4 года назад

      @@codeSTACKr You are the best!!! But still you video is very usefull. Keep being creative

  • @jitxhere
    @jitxhere 4 года назад +2

    Simple Explanation.
    Thank You so much for this.

  • @anassl.9066
    @anassl.9066 4 года назад +5

    Keep up the beautiful work, could you please make another video to make this responsive ? Thanks in advance.

    • @codeSTACKr
      @codeSTACKr  4 года назад +5

      Yes! This video was getting a little long. So I'll make one to add the responsiveness. :)

    • @dfla5472
      @dfla5472 4 года назад

      @@codeSTACKr yaay !

    • @KadirMedia
      @KadirMedia 4 года назад +2

      @@codeSTACKr please make it mobile friendly. If you do that in the next video I will be so grateful to you !

  • @olga_lc
    @olga_lc 3 года назад

    Great video! Will that hover dropdowns work correctly on touchscreen, iphone, etc.?

  • @galleon8129
    @galleon8129 3 года назад +1

    Thank you 🙏 Thank you 🙏 Thank you 🙏! You just saved someone’s job

  • @MrJettann
    @MrJettann 3 года назад

    That was wonderful! Thank you so much!
    I just didn't understand 1 thing, how called the extension, which reminds you what colors you've already used in your project? I didn't find it in your SuperHero extension pack :)

  • @nguyenhoangminh6775
    @nguyenhoangminh6775 3 года назад +1

    You are extremely good at what you instruct. I very enjoy your tutorial and learn a lot from your instruction. Looking forward to the next things to come on your channel!

  • @targetoirtwenty-three5086
    @targetoirtwenty-three5086 3 года назад

    Thanks for all the videos you made, I have so much to learn a lot... and suffer a lot.

  • @katiabmg3413
    @katiabmg3413 3 года назад +1

    thank you so much you just saved me for my assignment

  • @saberaraoubia1528
    @saberaraoubia1528 3 года назад

    i have one litle question if you don't mind the of the item 3 why did you add (dropdown dropdown-right)

    • @codeSTACKr
      @codeSTACKr  3 года назад +1

      So the they can share the properties of "dropdown", then I can alter only the small parts needed with "dropdown-right". This way I don't duplicate code.

  • @iUmerFarooq
    @iUmerFarooq 4 года назад +1

    Hmm... That was my request 😋
    Thank you 😊

  • @streamx2
    @streamx2 3 года назад

    Thank you for this. I dont know why 90% of website design tutorials on RUclips are without navigation. I have a suggestion for your future videos if you don't mind, can you please disable the suggestion thing that displays as you are typing a property, its very distracting and covers your code so I have to wait until you type a property to copy it.

    • @codeSTACKr
      @codeSTACKr  3 года назад

      Great suggestion, thanks!

  • @elyasarkin2638
    @elyasarkin2638 3 года назад

    Great tutorial, Thank you!

  • @theweekendcoder
    @theweekendcoder 4 года назад +1

    emmet pro😬💚

  • @moai545
    @moai545 4 года назад +1

    Thank you very much For Great Work!!!!!

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

    Excelente!

  • @alaahussein3101
    @alaahussein3101 4 года назад +1

    great thanks

  • @МарияМария-ю4с
    @МарияМария-ю4с 3 месяца назад

    Спасибо за видео.

  • @beinyourguard
    @beinyourguard 4 года назад

    very good. thank you so much

  • @KadirMedia
    @KadirMedia 3 года назад +1

    Hopefully the video for adding the responsiveness will be uploaded soon 👌

    • @codeSTACKr
      @codeSTACKr  3 года назад +1

      Coming soon!

    • @KadirMedia
      @KadirMedia 3 года назад

      @@codeSTACKr appreciate it a lot !

    • @KadirMedia
      @KadirMedia 3 года назад

      You can''t imagine how useful your videos are!

  • @mdmahbubalam3873
    @mdmahbubalam3873 3 года назад +1

    what is the name of the color theme of vs code and what the name of extension that blinking yellow where is writing courser standing.please let me know

    • @codeSTACKr
      @codeSTACKr  3 года назад

      It my theme, codeSTACKr. And the blinking cursor is just cursor settings.

  • @samvelpetrosyan9429
    @samvelpetrosyan9429 4 года назад

    Nice!

  • @spicybbqtasty3960
    @spicybbqtasty3960 3 года назад

    Why don't you use sass? I know you wrote the rough draft in it.

  • @FarazKhan-ej8ck
    @FarazKhan-ej8ck 3 года назад

    .content .col .img{} is make the image so large and floating freely on the entire screen.
    how to control this?

  • @hussnainjav3d
    @hussnainjav3d 4 года назад

    What's the need of position: relative in header ?

  • @ayeolink
    @ayeolink 4 года назад +1

    Can I have th theme that you're using int the vscode please🙏, I like it❤

    • @codeSTACKr
      @codeSTACKr  4 года назад +2

      codeSTACKr theme :) Link is in the description

  • @shubhamsagar9153
    @shubhamsagar9153 3 года назад

    at 9:10 there is no dropdown class then then hw is it you r using it to change style sir

  • @lycan2494
    @lycan2494 3 года назад

    25:58 panic HAHA

  • @MuhammadAli-wi2sr
    @MuhammadAli-wi2sr 3 года назад

    What is the vs code theme you are using.....

    • @codeSTACKr
      @codeSTACKr  3 года назад

      It's my codeSTACKr Theme: marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme

    • @MuhammadAli-wi2sr
      @MuhammadAli-wi2sr 3 года назад

      @@codeSTACKr thanks

  • @SachithSenarathneanimo
    @SachithSenarathneanimo 4 года назад +2

    Anybody know the plugins that he has used in VS code here?

  • @lowercaseguy3578
    @lowercaseguy3578 4 года назад

    If ican use frameworks easily , why shud I learn to make this , just asking .....

    • @codeSTACKr
      @codeSTACKr  4 года назад

      You should learn now to make things with HTML/CSS before learning a framework.

    • @lowercaseguy3578
      @lowercaseguy3578 4 года назад

      @@codeSTACKr I've been doing that I just needed your words for extra affirmation .... Lolz

  • @Wex86
    @Wex86 4 года назад

    How come your caret is animated like that?

  • @melikai187
    @melikai187 4 года назад +2

    I love your videos. Also w/ you emmet you can do something like ul>li{test $}*3

  • @duckygomez1163
    @duckygomez1163 4 года назад +1

    Second

  • @thecscontent5110
    @thecscontent5110 4 года назад

    I also do videos about programming!😁

  • @emorock_2592
    @emorock_2592 4 года назад

    I love it but this is not a responsive yet.

    • @codeSTACKr
      @codeSTACKr  4 года назад +1

      I'll have a video just for that 😁

  • @zeyadessam4173
    @zeyadessam4173 4 года назад

    second

  • @luigis.3909
    @luigis.3909 4 года назад

    Menu is not responsive :-P

    • @codeSTACKr
      @codeSTACKr  4 года назад

      This video was getting a bit long. I'm going to do one on making this responsive.

    • @luigis.3909
      @luigis.3909 4 года назад

      @@codeSTACKr ok i suggest you an useful concept for a video: a sidebar that transform in a bottombar for mobile viewport
      I found this github.com/tailwindtoolbox/Sidebar-Bottom
      But i prefer pure css than tailwind