Responsive Dropdown Sidebar Menu using HTML CSS and JavaScript | Side Navigation Bar
HTML-код
- Опубликовано: 29 апр 2024
- In this video, You will learn to create a Responsive Dropdown Sidebar Menu or Side Navigation Menu Bar. When you click on the dropdown icon of this sidebar menu its submenu will appear. Also, I have added a tooltip box that appears when the sidebar is in closed status. I have provided all the source code links below.
---
Hire us on Fiverr
➤ www.fiverr.com/prakashahi
Follow me on Instagram
➤ / coding.np
---
Timestamps:
00:00 Dropdown Sidebar Menu | Demo
01:42 How to make a dropdown sidebar in HTML?
02:07 How to make icons in HTML?
02:38 How to change the font in CSS?
03:36 How to make sidebar fixed
09:07 How to add a submenu in the sidebar?
11:04 How to make a tooltip for the sidebar?
19:20 Make a profile and add a photo on the sidebar
23:52 JavaScript code for sidebar dropdown
28:49 How to make dashboard sidebar menu
#DropdownMenu #SidebarMenu #HTMLCSSJS #javascripttutorial
---
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 ...
Track: Lost Sky - Vision [NCS Release]
➤ Watch: / 7ru1l8gtgo
Song: Ehrling - You And Me (Vlog No Copyright Music)
➤ Video Link: • Ehrling - You And Me (...
If you got any queries related to this tutorial, please let me know.
Jooppppoppoò
Which IDE you used in this video?
Can be used along with bootstrap?
Can you create multi level drop-down sidebar
Can you render this side bar with diferent buttons on diferent page? Like facebook navigation. Top navigation change side bar. I got stuck when I've try this..
Many RUclipsrs sell their project's source code, but you provide us free source code of every tutorial.. Thank you so much bruh.
@@codingknowledge9148 You are right
It's my pleasure, Happy to help
@@CodingLabYT you should run adds man, you need to monetize your work... also if you'd record your voice while recording you'll make hole lot of views and subscribers.. hope you well
Right 👍
@@cristianmargineanu8279 so i love just music c:
A 3 anos atrás eu pensei em um menu dessa forma, por não conseguir dominar programação nunca me arrisquei a fazer, ficou top demais!
Very educational. I'm relatively new with HTML/CSS, but was able to type along and complete a working model though it was challenging. Your layout asthetic is superb and your CSS code very well organized and easy to learn from. My next challenge will be to adapt this model to a website I'm creating for myself. I'm sure I will be back to this instruction many times before I might be able to gain a full mastery of these concepts. Thank you very much.
Glad it was helpful!
@@CodingLabYT PS: Admitted color-geek. #1d1b31, the more I look at, the more I like it.
This is some serious detailing which I couldn't have think of, thanks for this masterpiece 😍
Glad you like it!
One of the best designs I've ever seen. However, you should also add the following to your project.
1: Light/Dark theme
2: Topbar for Language selector, full screen, search bar, profile etc.
Thanks!
Saves me an hour plus of work. You rock! thumbs up.
Glad to hear that.
I'm getting into programming and this helped me so much, thank you! The only thing I don't really understand is
.sidebar.close ~ .home-section
it all works except this one and I can't understand why.
Followed through your tutorial step by step and there was a bug you also noticed and fixed at 37:07 . Hats off and kudos to you sir for such an amazing tutorial and sharing of knowledge, i have learnt so much in terms of CSS coding.
Glad to hear that, best regards!!
Good video! 👏🏽👏🏽👍🏽
How would you put text under the Dropdown Sidebar?
This sidebar menu is one of the best sidebars that i know so far
But there is two important UX hints that make this sidebar menu to a most premium and modern sidebar menu.
1. Place the hamburger menu button icon on the left of sidebar, so when you click to collapse or expand the sidebar, there is no need to move the mouse cursor on the left or right to close or open the sidebar.
2. Another important hint is when you click on arrow to show or hide the drop-down of every part, it will be better if the previous opened drop-down be closed, i mean for a better User Experience you can set the drop-downs to only one of them be opened at the same time and just when clicked on the another drop-down, the previous opened drop-down become closed.
i was planning to design a sidebar menu for my website panel, but your lovely and professional sidebar menu made me Surprised 😍👏
Yeah you are right and thanks for your tips.. But to make easy to understand for viewers , I used less codes.
@@CodingLabYT that's so good and very well👏👏
Hi, thank you for sharing this great side bar, I have a quick question, how can I make the side bar to be closed by default?
Great job!! Keep moving forward!!
Thank you cam
Excellent!! This is that I was looking for
Cheers!!
So much thanks man, I really appreciate it. It is good that something like this exist that helps beginners like me. Thanks!
Glad it helped!
Thank you for sharing your valuable knowledge. I just admire how you create such beautiful navigation every time. Sometimes/ many times it gets above my head. Request: If you would add instructions by your voice I think it would be easier to understand (I hope its not asking for much). Thanks once again and I am very grateful to you.
Wow, thank you!, Okey I will think about it.
great work and adding value to all the people who want to increase their skills, thanks bro
I appreciate that!
Thank you, I learned so much html and css from your video
Glad it helped!
It's very...very...stunning....simply a work of art!!!
Thank you! Cheers!
Thanks and Excellent. Loved the way you teach. We expect more to come. God bless you dear :)
Glad to hear that.. Sure I will
@@CodingLabYT Thank you and will stick to your channel since it's very different from others. I'd expect and appreciate if you could carry on with the complete dashboard pages since you've taught us the sidebar :)
Thank you so much Asfandyar
is what I was looking for for my very good Dashboard ❤
Glad you like it. Best regards!!
Thank you very much friend. I wanted to add another submenu inside the submenu... I'm having trouble
Hello brother, this is really awesome.
Really pity on me, I didn't see your channel till today.
Just subscribed now :)
Glad to hear that. Welcome
Good tutorial , thanks ✨✨
Hi there , this is really cool and amazing.
i have never seen this type of creativity like its really good
Just subscribed now & i learned a lot from this video :)
Thanks a ton.. and welcome.. Best regards!!
How can I adapt the file I will create to vue router-link?
Hey can I ask? How can the closed sidebar not display a profile photo, but instead use a button like logout? And it doesn't affect the logout button on profile page when the sidebar is opened, and appearing the logout button when sidebar is closed? Thanks
Great video! I just can't figure out how to make the sub menu go up instead of down
I hope you will reech 1lakh subscribers soon because you always came beautiful and amazing projects for us.
Glad to hear that Jugal and thank you for liking my tutorials
Thank you and Could you do same thing with using React js ?
Excelente, muchas gracias.
Wow! Awesome. Thank you so much
Thank you too
Quality Content! Thanks a lot!
Much appreciated!
Try to follow ur tutorial. Need css script source to compare. tq sir
It all works splendidly. Thank you so much for the step-by-step, especially for us, who are just getting into web dev. But I have had only one issue so far, its the navlink overflow. it has two of them: one at 27:42 and another at 34:55. Since only the second one works, the first one connected to in-sidebar scrolling stops working or gets overridden. Any solution to that?
You can take source code, link is in video description.
You are my hero bruh
8:20 from that "iocn-link" i will not sleep today
If you have any queries, let me know?
How would you approach scrolling when the menu is collapsed (only icons)? I'm trying to overflow-y it and keep the hover, but im not having any success.
Thanks for spreading the knowledge
Any time!
This is pretty awesome.
Thank you Pixie
Thanks for this amazing tutorial...
Gald you like it.. Best regards!!
it's doesn't work on mobile view, you should add 'overflow-y: scroll' for scrolling sidebar and vh-100 for content wrapper
Hello , this is amazing , but i wonder if this can handle another level on submenu and how it gonna work
Hi, do you have any CSS courses you took to indicate?
Thank you very much for these
My pleasure!
Like merecido! Parabéns, muito bom!!!
This UI is amazing Sir
Thank you bro
@@CodingLabYT You're Welcome Sir
Great Job
well done sir
Very awesome project sir 😍
Thank you Jugal
God bless you
good video bro keep it up
Thanks very much.
how can i connect my navigation bar to the other links without loosing the sidebar and hover when its proceed to other page
Really amazing sir ji
Thanks a lot
Amazing! 👌
Thank you Clumes
what do you mean by music credit in description section?
please let me know.
thank you was helpful
You're always welcome
hey brother, thanks for the video, it's absolutely amazing!!
But I think there's one think u'r missing,
(condition: sidebar close) while the menu icon () was clicked to open the sidebar, the and the show up first before the sidebar fully opened.
I think there's something missing about the transition, but I don't know which one to be fixed LOL!
So yeah, I do need ur help, thank u!
It's easy, just add transition 0.5s for name and job div.. Thank you for liking my tutorial
add: overflow: hidden; (in .sidebar .profile-details {}
Great jobs bro thank
You're welcome Asmus
A quick suggestion : Hello Prem, What if you make the same tutorial using the grid system instead of display: flex? What's your thoughts on that. Isn't grid system better than the flex? :)
Thank you for your suggestion bro.. Grid is better but in the small project.. I go for flex because it is easy to understand for viewers
@@CodingLabYT Thank you bro. I'm learning both flex and grids :)
Thank You Sir♥️
Most welcome
Kamaal ki #webDesign tutorial
Glad You like it.. best regards
This is super cool, I have a wordpress website, i always use plugin in my website because I don't have experience in html, css, javascript, does anyone know how can I add this beautiful side menu to my website
Wow! Awesome work. I Created the same as per your tutorial. I notice one issue, Scrolling not working with Closed Sidebar. Kindly advice please.
We should add limited icon while sidebar closed because we have usedt Tooltip and submenu while hover to show them we can't give overflow scroll while sidebar is closed. Otherwise Tooltip and submenu hides.
WOOW AMAZING
Thank you bro
Where can I download the code for the video ..
It's excellent
Thank you for the awesome video. I am practicing creating a website with this. :). If you don't mind, may I ask a question? I tried to figure it out by myself but it didn't go well. :'-( How should I set the closed sidebar as a default when the page loaded?
Add 'Close' class in the sidebar tag first
@@CodingLabYT Thank you so much! it works now!!
Amazing Thanks for the tutorial and i am new to this learning from your tutorial. ....... 👏👏👏👏👏👏 Along with header and footer can be done an some data adding tables and all ..? will i get tutorial on this..?
I have made lots of video tutorials on footer header and other that are essential for website... You can check?
I need to know how to add multiple sub menu in this. Shall be thankful to you
I tried to modify it and add another submenu under the submenu but the problem is both submenu is opening at the same time when I clicked the first arrow, what I want to do is when I click the first arrow it only show the first sub menu then when I click the second arrow inside the submenu it will show the 2nd second submenu. Do you how to fix it?
very nice tutorial
Excuse me, I hava a question
in .html, If you type Traditional Chinese in the logo_name, there seems to be a display problem.
for example : 我是CodingLab粉絲
It really awesome, great work design, when will do the same to your code will take more time .. so can help me short out time .
Give drive or git repository .. there we can get,, thank you again for nice creativity 👍
Thanks a lot Manoj.. Source code link has been uploaded on the video description.
@@CodingLabYT thank you very much ...
good video! Thank you
You're always welcome
Ok all I figured out how to make it responsive on mobile. add the following to your header.
I love the video because it is easy to follow, but am having two challenges.
1. How can i create a second level drop down.
2. Can the dropdown work the way accordion works (if i open one dropdown the already open dropdown should close)
Glad you like it.. you need to add extra code for it
Super
Thank you Sir
You're welcome Jessa
is there any way to to show dropdown when I click on the section div "Not just the arrow button"?
很不错的设计
what if there are many menu items? Will it then create a vertical scroll because when there is a vertical scroll I guess we can't show that dropdown menu on its right side as overflow-x will be hidden? Isn't it
Menu is scrollable.
Hey thanks alot for the video, its awsome!
i have a question, how to code and see the result at the same time like you? what did u use for that?
You can use live server.
@@CodingLabYT ohh alr, thanks alot
@@CodingLabYT sorry, im a beginner but i followed with the same code with yours but my js didnt work eventho its the same, is there a solution??
Where are you located?
I am working on some project.
Soon I will need a Front End designer.
Do you work on this?
How to contact you?
Thank you
You're welcome
which IDE do you use?
hi, thank you.Hello everyone, everything good?
but, I use a side menu in html. and it has its submenus, when I click on one of the submenus, the menu collapses back to its original state - I wish it didn't collapse. Does anyone know of a nice link that talks about how to disable collapsing - make submenus visible when I click on one of them?
Thanks!
You're welcome
If you include other content for example a carousel slide will it affect the code itself?
No It will not affect.
On the minute 9:41, when you were writing the padding: 6px, 6px, 14px, 80px; to set the submenu, it didn't work for me with: .sidebar .nav-links li .sub-menu{ Nothing happened. I had to write without the "li" tag like: .sidebar .nav-links .sub-menu{ Do you know why it did not work with the "li" as in the video?
Thank you for your effort and time! :)
Your job is awesome and i've tried repeat them. But i've had some issue. When the bar is hidden, it doesn't scrolling. I mean when the screen height is smaller and you need to scroll hidden side bar it doesn't do it. I've been trying to change "overflow" and "width" but it is no use. How to fix it? Thank you. :)
We should add limited icon while sidebar is closed because we have used Tooltip or submenu while hover to show them we can't give overflow scroll while sidebar is closed. Otherwise Tooltip and submenu hides.
@@CodingLabYT That kept me on my toes :). Well, since you say so, I'll give up trying. Repeating you took me a long time, but I learned a lot. :)
Congratulations!! Thank you my brother. Can we use this project? Is it free for use??
Yes, of course
Thank's for lesson! What is a license of this code? Can i use it in my open source project?
Yeah you can..
WOW !! Great Stuff !!!
Please upload the source code ;)
Thankyou Emmanuel.. I will soon
do you have any github for that code?
Se puede hacer un menu con sub menus y estos tengan otro sub menu? osea de tres , padre, hijo y nieto por asi decirlo...
and this is well suited to mobile?
Nice... 🤩
Thank you! Cheers!
tanks !
Your are welcome
Hi bro, do you have a code for the vifeo, a link like all video? the reason is beacause i have many covers ans searching for the cover from the video takes a very long time Pls link for the code😭🙃