Simple Responsive Dropdown Navigation Menu Using Pure HTML And CSS Only

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

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

  • @DA-gv6qc
    @DA-gv6qc Год назад +1

    Thank you so much!!! After hours & hours struggling to understand, you helped me. Your method is logic and easy to follow.

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

    AWESOME SIR, ITS SAVE ME THIS IS VERY HELPFUL CONTENT
    THANKYOU SIR🙏🙏

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

    God bless you more my mentor. I love you. Just exactly how my client wanted his navbar to be.

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

    Super Mister!
    Incredibly nice, I'm just wow

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

    Perfect! Exactly what I was looking for!

  • @VeioJuvenciobh
    @VeioJuvenciobh 2 года назад +9

    Muito bom! parabéns! Menu responsivo, prático e fácil de fazer. Congratulations!

  • @m.arehman8652
    @m.arehman8652 Год назад

    Really Excellent ,only with html and css. Great

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

    Outstanding 👍👌
    I always watching your videos and I've learned a lot of new things. Please keep making such a great videos.
    Thanks...

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

    GREAT!!!
    Thank a lot bro. You save my life. 😉
    Blessings from Venezuela.

  • @sinnyozzy
    @sinnyozzy 3 года назад +45

    These tutorials would be so much better without the annoying music, a verbal explanation and not 12 showings of the menu before you get into the details.

  • @bethelmasunungure2343
    @bethelmasunungure2343 6 месяцев назад

    Thank you so much for this beautiful and informative video.

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

    This is Amazing 🤩😍 Sir I Using your Design In My Project

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

    This was incredibly helpful! Thank you very much ❤

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

    This is what I exactly needed to build my physics website.

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

    Thank you so much for this. Great video! Helped a lot

  • @RajeshKumar-uw9qi
    @RajeshKumar-uw9qi 3 года назад

    Your every tutorial teach something good stuff 👍🙏🙏

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

    Amazing tutorial, helps me a lot, thanks

  • @dl.bestfriend
    @dl.bestfriend 3 года назад

    I like video and channel you. Keep up the spirit of making good videos!

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

    Phenomenal 🎉

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

    Amazing tutorials. Just used it for a project and it working fine with some little edits though👍👍

  • @paradox987
    @paradox987 3 года назад +24

    Amazing content sir...
    nicely done by html and css...
    can you please provide the source code of the project ?

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

    This Channel deserve 10 m subs

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

    This was great.
    Thanks Sir

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

    Great tutoriel ❤

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

    OMGG THANKYOUU SSOOO MUCH for thiss vidd

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

    Brilliant ! Thanks bro

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

    :focus-within, tanks bro

  • @14deathbychocolate14
    @14deathbychocolate14 2 года назад

    Thank you so much for this. Great video!

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

    thank you so much may allah bless you and give to you what you want

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

    Subscribed! Content is amazing

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

    Very much nice content very pog

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

    Thank you for sharing. You did an amazing job with the video, code and background music!

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

    Great content brother, keep it up!

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

    good and awesome work
    and decent background music

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

    nice one impressive

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

    Simple and profesional. Thanks.

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

    thank you for sharing such helpful code!!

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

    Thank's for this video

  • @meorrosman5595
    @meorrosman5595 3 месяца назад

    How to make when you click on that UL again that LI will be disappear, I don't want to click on blank page to make it disappear. You know what I mean right? do I need to learn Java on that request?

    • @MrWebDesignerAnas
      @MrWebDesignerAnas  3 месяца назад

      great suggestion, I will try to improve on my next video.

  • @fabrizioaq-gy3bm
    @fabrizioaq-gy3bm Год назад

    Thank u so match for tutorial :3

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

    Thank you very much for your help :)

  • @gaelgodefroy5129
    @gaelgodefroy5129 4 месяца назад

    Excellent !

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

    muchas gracias compadre, me ayudo bastante

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

    Great concept, but how do you suggest I go about this with a bit of adjustment if I don't want the header to be fixed and for those drop-down content should only have that z-index factor? Would really appreciate your help.

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

      you can use 'position:sticky;' instead of fixed and z-index is important if you want your navbar above of your rest of the contents

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

    Thanks for making this guide. I used your basic concepts and adapted it to be used in React!

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

    Thank you so much for this video.

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

    Are you available to apply this video tutorial to an existing website running on Textpattern CMS? Paid work obviously. Please let me know. Thanks.

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

    Please provide us the link in description of code written so that it is easy to decode and implement. Thanks

    • @JulioCesar-hh9wq
      @JulioCesar-hh9wq 2 года назад +1

      @Benjabbj se te salio el spanish del enojo, carnal?

    • @JulioCesar-hh9wq
      @JulioCesar-hh9wq 2 года назад

      @Benjabbj yo no dije eso jaja, es lo que tu quieras entender al final del dia, ademas el codigo gratis ya lo da en el video carnal :v

    • @JulioCesar-hh9wq
      @JulioCesar-hh9wq 2 года назад

      @Benjabbj te lo repito al final del dia tu crees lo que quieres creer

  • @RH-xw6fr
    @RH-xw6fr Год назад

    Thanks very useful

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

    Cool !!!! excellent idea.

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

    Superb 😍

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

    really really really thank you you are at the top of all others

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

    When you click a link on the small screen, the drop-down menu should close. How can we do that?

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

    awesome❤️❤️❤️

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

    Respected Sir
    i can link bootstrap with custom css fil.
    Link bootstrap file the navbar drop-down is not properly work. Please provide some solution sir ji

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

    How do you make the user add stuff to the drop down please?

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

    Thank you for this easy to follow video! ♥
    In mobile view, is there a code where clicking anywhere else (other than the Menu button) leaves the menu?

  • @NicNac-b5n
    @NicNac-b5n Год назад

    How do I now add a paragraph or some kind of text? Because the text stays behind the logo and i cant move it. any tips?

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

    Excelente como siempre!

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

    Hello, can you make a drop-down menu for blogger, yeah I know it can also be useful for blogger, but it is annoying if you wish to add content to this menu, you need to go to the theme and then you add it, but if you make a drop-down menu in then, we can add any content through layout tab, so please make a video on this topic 🙏

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

    Bro Which software using for screen recording?

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

    Hello, is the code on github? Or somewhere else? Thank you.

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

    in media query, my nav bar shows at the bottom of the page after set the top to 100%

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

    Hello sir. I have a suggestion:
    Can you make a responsive nav bar like this but with the search field and search button between the logo and nav links?
    If you agree with this suggestion, I appreciate that.

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

      thanks for the suggestions
      maybe I have used this method somewhere!
      watch this video : ruclips.net/video/1ouRuUE3BR4/видео.html

  • @maurizio1566
    @maurizio1566 15 дней назад

    Wonderful. Where could i find the source code?

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

    Awesome!!!!

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

    amazing. I have a question. Could I have 2 columns in small screen 991px?

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

      well you can if you use media queries

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

      @@MrWebDesignerAnas I tried to change width to 50 percent. It's working for me

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

    There is nothing in the menu items - you have only made them. Do you know how to do that?

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

    muito obg cara, o unico q deu certo no meu projeto!!1

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

    how to make drop down smooth and when i hover also smooth animation? also great tutorial, thanks.

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

    Great video! Can someone please help me, after you have the menu ready, what is the code to reedirect to the page you want to link when you click in "News" or about, etc.

  • @fuadagayev-mg7fk
    @fuadagayev-mg7fk Год назад

    Perfect

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

    Hello sir...... Nicely made but after creating this landing page if we want to create another section it overlaps with the home section. Can you tell what is wrong?

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

      you have to use position:fixed for .header with z-index:1000;

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

      you can also try to change
      position: fixed; to position: sticky;

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

      @@MrWebDesignerAnas its not working

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

    thanks a lot

  • @Jamon-xj3ip
    @Jamon-xj3ip 2 года назад +1

    hey brother very good video, can you put the template please?

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

    What color theme is it?

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

    super, danke

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

    Awesome

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

    How do you connect tabs to those dropdowns ?

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

    nice

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

    Wow, your skill is great.

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

      Thanks! Saitamaaaaaaaaa!!! big fan of this anime!!!!

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

    Thanks

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

    please post a simple shopping cart design video with cash on delivery and online payment API integration with checkout form...html css javascript ...

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

    In Mobile view not scrollable dropdown menu?????

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

      you have apply 'overflow-y:scroll; height:600px'; to the .navbar class container when mobile responsive

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

      @@MrWebDesignerAnas Thanks Brother It's Work For me. Best Simple Method

  • @jjr.my05
    @jjr.my05 2 года назад

    Excellent video!! somebody could help me? i am making my navbar and it doesn't recognize me the second ul, it only recognizes the main one, so i can't make the dropdown. can anyone help me?

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

      try to give a class name to the second ul and target it and style it

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

    Grt sir ! Can u provide source code ?

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

    good ... ok ...

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

    How do I get a copy of source code?

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

    mobile view menu button is now working and not displaying the links

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

    Thanks but I never got the focus-within to work. Checked it over and over

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

      which browser you are using? it doesn't support all the browsers yet

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

    thank u

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

    vai client ke amaka bola daba tar project a ami ke deia navigation make korbo ? pleace answer me ?

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

    What is the song name in the beginning of the video?

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

    thanks

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

    Show my Friends 👍

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

    The code is not working.... checked 5times the code is same as yours

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

    can you give mecode of this ✌

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

    for me the ".navbar" on css, had to be just "nav"

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

    Create a website and show it of Dropdown Navigation Menu pleace

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

    You should have created shorts rather than this. In long video also you are doing so fast that it's difficult to follow