Responsive Dropdown Navigation Menu using HTML CSS and JavaScript
HTML-код
- Опубликовано: 12 июн 2024
- Responsive Drop Down Menu with Sub Menu using HTML CSS and JavaScript | Responsive Drop Down Navigation Menu with Sub Menu using and Search box | CodingLab
In this video, you will learn how to create a responsive dropdown navigation bar in HTML CSS, and JavaScript. The Dropdown menu means, the sub-menu is coming out and start visible when we do hover-click on the parent navigation link. Feel free to download all the sources of this drop-down navigation bar from the given link.
---
Hire us on Fiverr
➤ www.fiverr.com/prakashahi
Follow me on Instagram
➤ / coding.np
Visit my website for helpful coding projects with source code
➤ www.codingnepalweb.com/drop-d...
---
Timelapse:
00:00 Responsive Drop Down Menu with Sub Menu | Demo
01:40 How to create a dropdown navigation bar in HTML?
02:19 How to import an icon into HTML?
03:35 How to import a font into HTML or CSS?
04:58 How to make the navigation menu fixed?
10:00 How to add a submenu in the navigation bar?
17:27 How to make a search box in HTML?
18:18 How to make a search box in CSS?
27:02 How to make the drop-down navigation menu responsive?
#DropDownMenu #navigationBar #SubMenu #htmlcssjs
---
Music Credit:
Ikson - Lights [Official]
➤ • #32 Lights (Official)
Song: Ikson - Anywhere (Vlog No Copyright Music)
➤ Video Link: • Ikson - Anywhere (Vlog...
Song: DayFox - Lioness (Vlog No Copyright Music)
➤ Video Link: • DayFox - Lioness (Vlog...
Song: Jarico - Island (Vlog No Copyright Music)
➤ Video Link: • Video
Track: Jimmy Hardwind - Want Me (feat. Mike Archangelo)
➤ Watch: • Jimmy Hardwind - Want ...
Lost Sky - Dreams pt. II (feat. Sara Skinner) [NCS Release ]
➤ Watch: • Lost Sky - Dreams pt. ...
Track: Lost Sky - Vision [NCS Release]
➤ Watch: / 7ru1l8gtgo
Song: Ehrling - You And Me (Vlog No Copyright Music)
➤ Video Link: • Ehrling - You And Me (...
Encontrar tu canal fue lo mejor que me pasó 👍👍
enjoyed the coding and the music
Hi - instead of the dropdown being hovered, what's the best way to keep the dropdown menu to be open when you click on HTML & CSS menu and have the arrow button to stay up. Then after you click the menu button again, arrow points downward
Good Work, helped me much!
Glad to hear it!
Hi! I need to create more JS dropdowns , but that's not working, all the menus are dropdown at the same time on mobile view, any idea? btw, great video and website
This is amazing
Thank you
@@CodingLabYT You're welcome
Hi,
I used the same code like you on the video, but for me the mobile menu looks weird. The second level submenu (from the "More" link) is pushed to the right side of the sidebar. It is not displayed underneath like for you. And also the submenus only appear in the mobile menu when I click on the arrow icons and not the whole menu items, however, for the "more" link the submenu appears when I hover over the "More" menu item.
I also checked the code on your website, but it looks different from the one you use in the video.
DM me on instagram i will check
were you able to fix that issue? i had smae issue
Keep up the good work ! This is just what I was looking for, one question, I tried removing the search-box but I just ruined everything, how to do it the right way ? THANKS A BUNCH ❤
Just remove search box div from the Html and css of that
Good thanks
awesome video
please bro Give more videos of JavaScript project
Sure I will
Subscribed, Thank you for this amazing video, you have no idea how much it helped me. Actually i added a banner on top but it didn't show, when inspecting element, i knew it was hiding under the navbar, i tried everything i could but i still don't know how to correctly modify the code, please help
Thank you in advance
Thanks a lot for your comment.. You can give Position relative and Z index more than banner.
Beautiful
Thanks a lot
Thanks 😊🙏
Welcome 😊
Thank you❤
You're welcome 😊
Cool🆒🆒
nice
There's only one thing missing though. The hover state of the links. And getting the arrow to highlight with the navbar link.
Can we use always same navbar for responsive mobile menu or if not then
What is the case when we should create different mobile menu for responsiveness?
you create a different HTML menu..then you will give it a display of none and show it later with css when on mobile screen with transform- translate
@@peterkabiru5144 thanks for replying
Amazing project sir 😍😍😘
Thank you! Cheers!
First comment first view first like awesome video 😀
Yay! Thank you!
@@CodingLabYT your welcome 😀
that nice
Hi , good job ..i want to know how i can put loop in the input please ,
Bravo
Thanks a ton
Thanks
Welcome
My dream job is to make a website with HTML CSS and Javascript just like this.
You can do.. keep practicing
Hi, For some reason when I click on the search bar icon it does not show up with showInput what do i do?
Do practice repeatly till you do not get problem.
Спасибо! А Git есть?
How to add background responsive image in this website
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at
You can take source code from my website, link is in video description.
sir can you tell me please i made a dropdown Menu with right and leftbar navigation as well as footer. but my dropdown menu goes behind the right bar. can you tell me how can i bring dropdown menu on front side? plz ..
You can contact me here - www.fiverr.com/prakashahi
please make video with your voice, it is difficult to learn from background music only
I will think about it
If you speak it's great
Okey Sarang, I will think about it.
@@CodingLabYT but your work is very nice it takes so much extra effort for understanding
how to open menu and close menu in same button?
Give Position right
how about multilevel menu? i like your video and i used it, thanks a lot, but how about a multilevel menu. im kinda stuck right there
thanks and have a nice day
Thanks a ton.
Hi please make video on how to make website with login form and my sql database
I will think about it
@@CodingLabYT Ok bro
Hints: turn music off and play back at half speed. Otherwise good video.
Thankyou. I will
Please make online store website with qr payment system using HTML and css
Okey. I will think about it
It looks cool but JS doesn´t work even if I copy the JS code from your website so it was a total waste of time. I did this project from the beginning and at the end the JS code doesn´t work at all... Just frustrating...
You can download all source code file from my website
Can you tell how did you learn HTML and CSS and from where.
From RUclips videos article.
@@CodingLabYT mainly from which RUclips channel
I recommend you Yahoo Baba and Geeky Shows
href ='#! ' meaning?
if you use the link of any site instead of # and click on that anchor tag, you will be redirected. Anchors tags are used for link redirection. If you use # you will not redirect anywhere
Haven source?
Check Description.
34
sir Source code
soon
fack source code not available
im new at coding so i really can't stand how to videos that only have music and no one talking telling me why,what,how. it makes me want to nuke there youtube and pc.sorry for this but this is not a thing to just show or caption instructions take away from the video. do it better!!!!!
fark that music is annoying af, would have been better if you just talked through it
make your videos first then comment shi** on others'