Responsive Mega Menu and Dropdown Menu using only HTML & CSS

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

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

  • @CodingNepal
    @CodingNepal  4 года назад +19

    Nowadays font awesome CDN link/script that I provided not support so your icons may not be showing. Just replace that line no.8 script tag with this

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

      Many thanks bro for these tutorials . If you could add a responsive search bar to this mega menu . I love your videos and I'm learning a Lot . Keep up

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

      the above Pinned link is "invalid file type". The "hamburger" icon does not show up when screen size is reduced. How can I solve this issue? It's a big problem. Also it would be helpful to provide a guide link to code to: how do I insert a Logo image (100px max)- instead of just type for logo. and where do you place main content of page because your code is all in the "" instead of in a . I don't understand. Please help me!

  • @hassenhamrouni2147
    @hassenhamrouni2147 4 года назад +19

    Many thanks for your time to go through my request . I love what i'm seeing and i'm learning a lot from you . Your are AWESOME AT WHAT YOU DO..

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

    wow...just wow. You so simplified what I had known before. Now I learnt a simpler way, and with cleaner and shorter codes. I am subscribing right away. Where have you been all this while? OMG!

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

    Muchas gracias por tus aportes a la comunidad. Saludos desde Argentina!!!!!!!!!
    Thank you very much for your contributions to the community. Greetings from Argentina

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

    Thank you so much for this! I had been looking everywhere for an ideal menu for my site redesign, this video was super helpful :D you are awesome!

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

    Sir G highly appreciated
    i am also a webdesigner i am on training
    from centre
    APTECH

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

    Wow nice. I want part 2 of mega menu. Thank you so much.

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

      Sure.. It'll come day after tomorrow.. Stay tuned 😁

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

    I have been watching others country videos bt here is far better than them❣️🇳🇵

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

      Thank you so much and don't forget to visit channel for more awesome videos

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

    Hey, I din't undestand what the css code below is doing:
    .content .row:nth-child(1),
    .content .row:nth-child(2){
    border-left: 0px;
    }
    Could you help me undestand that?

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

      :nth-child() is a selector and the above-mentioned codes mean select the first and second child of the .content which has .row class name and style the left border of these childs to 0px;
      Why did I do this?
      Because there are many childs of .content(parent) which has .row class name and we have to style the left border of the first and second child only so I did this. We can also style the first and second child only by giving other class names except .row

    • @ABC-el3ql
      @ABC-el3ql 2 года назад

      @@CodingNepal
      Is the result the same whether you comment on this part or not?

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

    how did you get the menu to stay while you hovered through the menu items? When I hover over my links the menu appears but it disappears when I try to select a menu item 😭

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

    Thanks alot for this man! May God bless you. And by the way the music is incredible, I totally relate to it in my current life situation (relationship with coding). Thanks for your time and dedication to help out.

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

    when I create 2-3 mega menu with your code, It's working on desktop but in mobile working first menu only not other how can I solve?

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

      You may did mistakes in media query breakpoints. Please check again

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

      @@CodingNepal I know the problem in media query but don't understand what is it? I use same code which you use but don't understand where is the problem. please help me, can you make two mega menu with your code so I can understand

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

    Incrível, este é o melhor navbar para qualquer tipo de site, não consegui acreditar! Parabéns. muito obrigado pelo seu tempo e esforço.

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

    9:00 how did you make it? copy and paste all of them like that. I search and read a lot of document on google but still dont know how to do it :(. Can you help me

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

    Hi there,
    I see you make really good videos! Perhaps could you make one on a shopping cart with local storage (with source code)? It's very hard to find any good tutorials on that. Could you help me out please? I would really appreciate it! Nice tutorial by the way! 😁

  • @rennieraka8314
    @rennieraka8314 5 месяцев назад

    Hi, how do you increase the height and width of the megamenu content to accomodate many columns and list?

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

    Many thanks, really nice work. Is it possible to activate the drop down menus when clicked the button instead of on hover?

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

    thanks for course but i have got a question for you, how to make a slide menubar in responsive like for amazone without a burger thanks

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

    Thank you so much for this, Responsive Mega Menu and Dropdown Menu using only HTML & CSS create successful and under next step video please thanks,

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

    Thank you so much for your great support.👏

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

    Fantastic menu. How could you get the mega menu to stay in place when you move the mouse away?

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

    Nice work 🤩🤗⚘👏👏💐 ( my favorite channel ) thank uu💞

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

    This is incredible! Nice work buddy!

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

    Your work is really awesome...God bless you...and my wish is that you earn a lot for your efforts...may I know where are you exactly located?

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

    Perfect... your creation always go burn

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

    How to make it really responsive, so you can navigate on the Smartphone (Hamburger Menu or similar)?

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

      Oh I see, there is a second part. Sorry. Good work, one or maybe the best HTML & CSS responsive Dropdown Menu video I found so far

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

    hi thank u ur guide, when i add bottom layer ,dropdown item not vissible please help me

  • @Mahnoor_Shahzadi
    @Mahnoor_Shahzadi Месяц назад +1

    hahaha i made it change images on hover over the text, all nav items separate from one another have their own default images also 😍😉😉😋😋

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

    The code is very clean and compact...brilliant :)

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

    Awsome 😍 and beautyfull 😍

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

    Can you make playlist for wordpress themes design?

  • @ABC-el3ql
    @ABC-el3ql 2 года назад

    Awesome!
    Thank you! Thank you! Thank you!
    And thank you very very very much!!

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

    Nice menu.
    How to make two dropdowns showDrop?
    duplicate Dropdown Menu

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

    Love from Bangladesh....................................................*/

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

    Ótimo vídeo parabéns 👏.

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

    Nepali? Wow!

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

    Mara program execute ni karta program ko. Plz help mee.

  • @RaviKant-ey8yp
    @RaviKant-ey8yp 4 года назад +1

    Brother, why didn't you put this video in any of your playlist?

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

      I'll put it later.. Thank you checking our playlist videos.. Stay tuned 😁

    • @RaviKant-ey8yp
      @RaviKant-ey8yp 4 года назад +1

      @@CodingNepal Bother, I always use playlist for getting videos seperately, its very helpful, please always add videos to their respective playlist, Its really very helpful man

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

      Sure.. Brother.

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

    Thank you! You're wonderful :)

  • @RaviKant-ey8yp
    @RaviKant-ey8yp 4 года назад +1

    Bro, I wanna learn CSS, from where should I learn? please tell me

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

      You can google it and there are many websites who provide free pdf files as well videos of css.

    • @RaviKant-ey8yp
      @RaviKant-ey8yp 4 года назад

      @@CodingNepal Brother, I don't know a proper path to learn css that's why I asked you :(

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

    Wonderful thanks bro

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

    Bro in any one video show your face with your name😅😁

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

    Awesome 😊 bro.....keep it up 😁

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

      Thank you bro.. Stay tuned 😁

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

    Thank you so much brother.

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

    Thanks for you video. Effective

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

    what is the purpose of using this below code?
    .content .row:nth-child(1),
    .content .row:nth-child(2){
    border-left: 0px;
    }

    • @ЕленаБорискина-п8ю
      @ЕленаБорискина-п8ю 3 года назад +1

      CodingNepal
      7 месяцев назад
      :nth-child() is a selector and the above-mentioned codes mean select the first and second child of the .content which has .row class name and style the left border of these childs to 0px;
      Why did I do this?
      Because there are many childs of .content(parent) which has .row class name and we have to style the left border of the first and second child only so I did this. We can also style the first and second child only by giving other class names except .row

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

    Thank you! Mega awesome

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

    what application you use please?

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

      I have used Atom Text Editor and here is the video of it - ruclips.net/video/55VjXTeYkTE/видео.html

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

    thank you teacher!

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

    totally mind blowing

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

    This tutorial showed a responsive navigation. However, it’s not in this video… wasted time watching it.

  • @shoaibakhtar2831
    @shoaibakhtar2831 3 месяца назад +1

    8:50

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

    Nice

  • @Tarun-uj4vq
    @Tarun-uj4vq 4 года назад +1

    Hello sir How to create ecommerce website in responsive fully step by step in multiple page this please sir video upload Here

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

      I'll make video soon. Stay tuned

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

    bro can u help me on React JS

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

    Man You Awesome 👌❤

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

    Thank you so much

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

    Thank's it's very nice

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

    Fantastic!

  • @MohammadAsif-td3li
    @MohammadAsif-td3li 4 года назад +1

    Great work.

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

    How to copy and paste like that. He only copied right once and pasted really fast. Teach me pls !

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

      Please, mention the timestamp so, I can tell you.

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

      @@CodingNepal 9:00 and 9:20

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

      For multiple select: Press ctrl and click in every place you want.
      For duplicate code: Select codes you want to duplicate then press ctrl+shift+d to duplicate it.

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

      @@CodingNepal Thanks u so much

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

      Remember, these shortcuts are only work on Atom Text Editor. Other code editors have their own shortcuts.

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

    thank you very much

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

    great work !!

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

    Great video

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

    great job

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

    thanks i appreciate this one

  • @Tarun-uj4vq
    @Tarun-uj4vq 4 года назад

    So beautify looking

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

    for mobile view?

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

    You are best!!

  • @saranyab.s2496
    @saranyab.s2496 3 года назад

    toggle is not working

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

    Can You up file git ?

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

    Keep going brooo

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

    Cant beleve It, I must be dreaming!!!!

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

    👏👏👏 thanks!!!

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

    Nice bhai

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

      Thank you bhai.. Stay tuned 😁

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

      @@CodingNepal bro why are u laughing everywhere..?

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

      Because I'm happy while reading viewers comments :)

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

      @@CodingNepal you make us happy by making such type of videos. .keep it up

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

      Thank you so much 😍

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

    nice

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

    perfeito ... muito bom!

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

    Perfect.

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

    if you speak we can understand more.

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

      I'll do in my upcoming videos

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

    You have a virus in the .css

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

    Update: downloading your source code from (www.codingnepalweb.com/p/download-timer-responsive-mega-menu.html) will work, but copied your html and css files from here didn;t work: www.codingnepalweb.com/2020/10/responsive-mega-menu-and-dropdown-menu.html
    Original comment: Dear codingnepal, I copied your code from your website but it's not working. I tried it in my vscode ide, it doesn't work.

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

      Yes codes may not work when you copy and paste because I got multiple errors while posting blog post so I've commented some lines of codes.. Just download files instead of copying codes or if you know basic html css then just uncomment the commented lines.

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

    coool