Responsive Mega Menu and Dropdown Menu using only HTML & CSS
ฝัง
- เผยแพร่เมื่อ 6 ก.ย. 2024
- Responsive Mega Menu or Mega Dropdown Menu using only HTML & CSS
Download Codes From Here - www.codingnepa...
Responsive Mega Menu using only HTML & CSS (Part -2)
➤ • Responsive Mega Menu a...
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!
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 😍
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!
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!
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 💙
Wow nice. I want part 2 of mega menu. Thank you so much.
Sure.. It'll come day after tomorrow.. Stay tuned 😁
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?
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.
Hi, how do you increase the height and width of the megamenu content to accomodate many columns and list?
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
This is incredible! Nice work buddy!
Thank you 💙
Sir G highly appreciated
i am also a webdesigner i am on training
from centre
APTECH
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
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 😭
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! 😁
Many thanks, really nice work. Is it possible to activate the drop down menus when clicked the button instead of on hover?
Fantastic menu. How could you get the mega menu to stay in place when you move the mouse away?
YOO ever heard of javascript
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
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
Thank you so much for your great support.👏
Always welcome
Nice work 🤩🤗⚘👏👏💐 ( my favorite channel ) thank uu💞
Thank you so much 😀
Awsome 😍 and beautyfull 😍
Thank you 💙
8:50
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,
Perfect... your creation always go burn
Thank you 😍
hi thank u ur guide, when i add bottom layer ,dropdown item not vissible please help me
Ótimo vídeo parabéns 👏.
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
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?
Nepali? Wow!
This tutorial showed a responsive navigation. However, it’s not in this video… wasted time watching it.
great work !!
Thank you 💙
Fantastic!
Can you make playlist for wordpress themes design?
I'll think about it
Bro in any one video show your face with your name😅😁
Sure... Stay tuned
Awesome 😊 bro.....keep it up 😁
Thank you bro.. Stay tuned 😁
The code is very clean and compact...brilliant :)
Glad you like it!
what application you use please?
I have used Atom Text Editor and here is the video of it - th-cam.com/video/55VjXTeYkTE/w-d-xo.html
Thank you! You're wonderful :)
Mara program execute ni karta program ko. Plz help mee.
Thank you! Mega awesome
bro can u help me on React JS
Wonderful thanks bro
You're welcome bro
Thank you so much brother.
totally mind blowing
Awesome!
Thank you! Thank you! Thank you!
And thank you very very very much!!
You're very welcome!
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
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 :(
Great work.
Thank you.. Stay tuned 😁
Nice
for mobile view?
great job
Thank you.. Stay tuned 😁
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.
Love from Bangladesh....................................................*/
Keep loving 😃
Thank you so much
You're welcome 💙
Man You Awesome 👌❤
Thank you 😍
@@CodingNepal You Always Welcome ❤
Thanks for you video. Effective
toggle is not working
thank you teacher!
You are welcome!
perfeito ... muito bom!
Great video
Thank you 💙
Can You up file git ?
thanks i appreciate this one
Thank's it's very nice
You're welcome
thank you very much
👏👏👏 thanks!!!
You're welcome 💙
You are best!!
Thank you 😁
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
So beautify looking
Nice menu.
How to make two dropdowns showDrop?
duplicate Dropdown Menu
nice
Keep going brooo
Perfect.
Thank you.. Stay tuned 😁
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.
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 😍
You have a virus in the .css
Cant beleve It, I must be dreaming!!!!
Glad to hear that 😁
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.
if you speak we can understand more.
I'll do in my upcoming videos
coool