Dropdown Navigation Menu with Flexbox

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

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

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

    Thank you for this video! I was having a hard time on how to build a drop down menu without using JS, and I don't want to use JS for now to make it because i want to master CSS first, before I finally dive into JS, and your video helped me on this. Actually I'll have to spend some more time to understand the usage of the pseudo elements, like the one used to show that line under the parent li. Anyway thank you for the content and hugs from Brazil!

  • @madangopalpaul6534
    @madangopalpaul6534 3 года назад +5

    Thank you so much! I love all of your content, your way of explanation is very clear and understable ❤️your channel is really life saver when it comes to programmers who are self learning❤️

  • @beinyourguard
    @beinyourguard 3 года назад +3

    really simple, really nice and really easy to understand

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

    Thanks so much I have seen lots of tutorials but you explain your code or your next step very clearly. Lover the way you teach from now on I a gone follow your channel more and more 👏👏👏👏

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

    Fantastic video! THANK YOU!

  • @ashharmansuri6816
    @ashharmansuri6816 3 года назад +4

    Every cool ,I was looking for it but how to make it responsive?

  • @danielcir8675
    @danielcir8675 3 года назад +3

    An amazing video, like all the others!!! Thanks Angela!!!

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

    OMG! I was really struggling Thank You so much.

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

    Thanks Angela, i like your design process

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

    Your voice is as beautiful as CSS

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

    You are amazing Maam. Thank you soo much!

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

    Thanks)). Does this technique work on mobile devices where by a user needs to tap on the menu to activate the drop down items ? Also, would the drop down be activated using the "tab" key to navigate? Could anyone please respond? thanks. ))

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

    Hello I am using this nav in my project but it is overlapping my content. And if I give Margin top to my components the whole navbar come down

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

    Amazing navbar. Can you make a video on how to make this responsive?

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

    A very nice tutorial! But I'm using sublimeText to code in html/css and I can't put the line under the element of the menu bar... I can't write "&:hover::after" in this editor, there is another technique?

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

    Hello there.
    Great Channel.
    Have you made a video on which modern way to "insert" header and footer across multiple HTML pages - similar to the way we used "includes" in .php pages in the past.
    Thanks you.

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

    Great fan of your videos.
    Can you tell me what shortcuts were you using while coding? How can you auto complete all the the html tags in codepen?

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

    This is awesome!

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

    I can assure you, that you have created the most comprehensive "Dropdown Navigation Menu with Flexbox" video. BRAVO!
    I am wondering whether one could profit from your services and if positive how one could get in contact with you.

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

    Nice video keep doing this content

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

    Do you need flexbox applied to the drop down items, with the gap? You’ve added padding to each list item & they’re already in a column naturally as they’re in a UL?
    Not sure if I’ve missed something here? Just curious

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

      The gap provides a little more space between each element when they are in the hover state. Instead of using Flexbox you can accomplish this by adding a margin around each element.

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

      @@angeladesign737 ah ok, see what you mean. Was just thinking that would having flexbox make the browser work a bit more doing layout over adding margins & paddings to space around elements

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

    Thank you so much! Very nice tutorial and amazing explanations! Can you please explain how to perform this exact tutorial with a responsive navigation?

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

    cant u just use a table header and table list, that way u dont gotta remove all the list buttons and other stuff?

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

    Do you have a tutorial on making a responsive navbar which will transform to a hamburger menu on a small device? Thanks!

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

    Thank you!

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

    Thank u so much

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

    Thank you

  • @nobody-bt7mu
    @nobody-bt7mu 2 года назад

    Thanks!

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

    Thanks !!

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

    👏👏👏

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

    Thanks

  • @林明華-z1z
    @林明華-z1z 3 года назад

    請問妳有考慮用中文講解嗎?

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

    Why are you using SCSS?
    Bad idea.

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

      How do you mean?

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

    as always great videos.
    Big Fan.
    please upload tutorials on React

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

      Thank you! I have a few tutorials on React on my channel, like this one: ruclips.net/video/4KxHcbQ8GYQ/видео.html

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

      @@angeladesign737 great

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

    you shouldve mentioned in the title that you were going to use SCSS, wasted my time coding this out

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

      Literally within the first minute she said SCSS was being used.

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

      ha. funny. joek's on you.
      the necromacing here is mainly to let people know that css IS provided.
      here's a fun--ner fact: you were given all the tools to succeed in replicating this; css included if you see the description
      the link takes you to codepen which allows to compile scss and will show exactly the css output. you can swap between the two

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

    SCSS??????? WTF

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

    Thankyou sooo much🫂, im struggling with this for more than a week, watched many videos but nothing helped 😢

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

    Great. Thanks for your explanation!