Responsive Mega Menu and Dropdown Menu using only HTML & CSS
HTML-код
- Опубликовано: 26 окт 2020
- Responsive Mega Menu or Mega Dropdown Menu using only HTML & CSS
Download Codes From Here - www.codingnepalweb.com
Responsive Mega Menu using only HTML & CSS (Part -2)
➤ • Responsive Mega Menu a...
Second Channel - bit.ly/3aHNkru
My Code Editor - • Best Text Editor for H...
Facebook - / coding.np
Instagram - / coding.np
Music Credit:
Track: Ikson - Last Summer
➤ Watch: • Ikson - Last Summer
Track: Jimmy Hardwind - Want Me (feat. Mike Archangelo)
➤ Watch: • Jimmy Hardwind - Want ...
Track: Lost Sky - Dreams pt. II (feat. Sara Skinner) [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Lost Sky - Dreams pt. ...
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
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
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!
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!
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!
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..
Thank you so much 😍
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.
Muchas gracias por tus aportes a la comunidad. Saludos desde Argentina!!!!!!!!!
Thank you very much for your contributions to the community. Greetings from Argentina
You're welcome 💙
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.
This is incredible! Nice work buddy!
Thank you 💙
Wow nice. I want part 2 of mega menu. Thank you so much.
Sure.. It'll come day after tomorrow.. Stay tuned 😁
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! 😁
Sir G highly appreciated
i am also a webdesigner i am on training
from centre
APTECH
Nice work 🤩🤗⚘👏👏💐 ( my favorite channel ) thank uu💞
Thank you so much 😀
Many thanks, really nice work. Is it possible to activate the drop down menus when clicked the button instead of on hover?
Ótimo vídeo parabéns 👏.
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 😭
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?
The code is very clean and compact...brilliant :)
Glad you like it!
Thank you so much for your great support.👏
Always welcome
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
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,
Thank you! You're wonderful :)
Perfect... your creation always go burn
Thank you 😍
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
I have been watching others country videos bt here is far better than them❣️🇳🇵
Thank you so much and don't forget to visit channel for more awesome videos
Thank you! Mega awesome
Fantastic!
Awesome 😊 bro.....keep it up 😁
Thank you bro.. Stay tuned 😁
great work !!
Thank you 💙
Thank you so much brother.
Fantastic menu. How could you get the mega menu to stay in place when you move the mouse away?
YOO ever heard of javascript
Awsome 😍 and beautyfull 😍
Thank you 💙
Awesome!
Thank you! Thank you! Thank you!
And thank you very very very much!!
You're very welcome!
Thanks for you video. Effective
Wonderful thanks bro
You're welcome bro
hi thank u ur guide, when i add bottom layer ,dropdown item not vissible please help me
thank you very much
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?
: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
@@CodingNepal
Is the result the same whether you comment on this part or not?
Great work.
Thank you.. Stay tuned 😁
thank you teacher!
You are welcome!
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?
You may did mistakes in media query breakpoints. Please check again
@@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
Thank you so much
You're welcome 💙
totally mind blowing
Bro in any one video show your face with your name😅😁
Sure... Stay tuned
Can you make playlist for wordpress themes design?
I'll think about it
Man You Awesome 👌❤
Thank you 😍
@@CodingNepal You Always Welcome ❤
perfeito ... muito bom!
👏👏👏 thanks!!!
You're welcome 💙
great job
Thank you.. Stay tuned 😁
You are best!!
Thank you 😁
Great video
Thank you 💙
Nepali? Wow!
Thank's it's very nice
You're welcome
Nice
thanks i appreciate this one
Keep going brooo
How to make it really responsive, so you can navigate on the Smartphone (Hamburger Menu or similar)?
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
Brother, why didn't you put this video in any of your playlist?
I'll put it later.. Thank you checking our playlist videos.. Stay tuned 😁
@@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
Sure.. Brother.
So beautify looking
Love from Bangladesh....................................................*/
Keep loving 😃
what application you use please?
I have used Atom Text Editor and here is the video of it - ruclips.net/video/55VjXTeYkTE/видео.html
Bro, I wanna learn CSS, from where should I learn? please tell me
You can google it and there are many websites who provide free pdf files as well videos of css.
@@CodingNepal Brother, I don't know a proper path to learn css that's why I asked you :(
Nice menu.
How to make two dropdowns showDrop?
duplicate Dropdown Menu
what is the purpose of using this below code?
.content .row:nth-child(1),
.content .row:nth-child(2){
border-left: 0px;
}
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
Perfect.
Thank you.. Stay tuned 😁
nice
Mara program execute ni karta program ko. Plz help mee.
bro can u help me on React JS
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.
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.
Nice bhai
Thank you bhai.. Stay tuned 😁
@@CodingNepal bro why are u laughing everywhere..?
Because I'm happy while reading viewers comments :)
@@CodingNepal you make us happy by making such type of videos. .keep it up
Thank you so much 😍
for mobile view?
Hello sir How to create ecommerce website in responsive fully step by step in multiple page this please sir video upload Here
I'll make video soon. Stay tuned
Can You up file git ?
coool
toggle is not working
This tutorial showed a responsive navigation. However, it’s not in this video… wasted time watching it.
How to copy and paste like that. He only copied right once and pasted really fast. Teach me pls !
Please, mention the timestamp so, I can tell you.
@@CodingNepal 9:00 and 9:20
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.
@@CodingNepal Thanks u so much
Remember, these shortcuts are only work on Atom Text Editor. Other code editors have their own shortcuts.
Cant beleve It, I must be dreaming!!!!
Glad to hear that 😁
You have a virus in the .css
if you speak we can understand more.
I'll do in my upcoming videos