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..
@@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
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 😍👏
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.
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.
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.
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.
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?
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.
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)
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 :)
@@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 :)
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..?
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 👍
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!
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.
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
Awesome! But im having problem how to display main content of the website and have it in the middle all the time when sidebar is being opened and closed. Any tips for that? Ty
@@CodingLabYT im doing it in vue, so im having problem how should i put those components together, i want it little bit different than yours, because yours home content is not centered, if you know what i mean? Also im planning on putting different route pages and not just that home, so thats where im stuck :/
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?
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
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? :)
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.
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.
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?
@@CodingLabYT thank you so much. But even with yoour source code i have the same bug where the js does not work after my first click on the sidebar. like the js froze and i cannot close or open the sidebar anymore. do you have any tips to avoid that ? thanks again
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 TH-camrs 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:
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👏👏
Many TH-camrs sell their project's source code, but you provide us free source code of every tutorial.. Thank you so much bruh.😊
Glad to hear that
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.
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!!
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.
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!
This is some serious detailing which I couldn't have think of, thanks for this masterpiece 😍
Glad you like it!
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.
8:20 from that "iocn-link" i will not sleep today
If you have any queries, let me know?
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
Kamaal ki #webDesign tutorial
Glad You like it.. best regards
It's very...very...stunning....simply a work of art!!!
Thank you! Cheers!
Thanks for the concept
You got a sub brother. You saved my 1 hour. Thanks and I am grateful to you
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.
is what I was looking for for my very good Dashboard ❤
Glad you like it. Best regards!!
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!
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
Thank you, I learned so much html and css from your video
Glad it helped!
Excellent!! This is that I was looking for
Cheers!!
Wow! Awesome. Thank you so much
Thank you too
great work and adding value to all the people who want to increase their skills, thanks bro
I appreciate that!
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.
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
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!!
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
Thanks for spreading the knowledge
Any time!
Very awesome project sir 😍
Thank you Jugal
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?
You are doing a great job. Bro ❤❤
Thank you so much 😀
Good video! 👏🏽👏🏽👍🏽
How would you put text under the Dropdown Sidebar?
Thanks for this amazing tutorial...
Gald you like it.. Best regards!!
Really amazing sir ji
Thanks a lot
Great job!! Keep moving forward!!
Thank you cam
Try to follow ur tutorial. Need css script source to compare. tq sir
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 ...
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 {}
Thank you very much for these
My pleasure!
WOOW AMAZING
Thank you bro
This is pretty awesome.
Thank you Pixie
This UI is amazing Sir
Thank you bro
@@CodingLabYT You're Welcome Sir
Thank You Sir♥️
Most welcome
Ok all I figured out how to make it responsive on mobile. add the following to your header.
Congratulations!! Thank you my brother. Can we use this project? Is it free for use??
Yes, of course
Quality Content! Thanks a lot!
Much appreciated!
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.
well done sir
Great Job
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??
You are my hero bruh
Excelente, muchas gracias.
good video! Thank you
You're always welcome
Thank you very much friend. I wanted to add another submenu inside the submenu... I'm having trouble
WOW !! Great Stuff !!!
Please upload the source code ;)
Thankyou Emmanuel.. I will soon
很不错的设计
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
thank you was helpful
You're always welcome
Thanks very much.
If you include other content for example a carousel slide will it affect the code itself?
No It will not affect.
Great jobs bro thank
You're welcome Asmus
Amazing! 👌
Thank you Clumes
Thank you Sir
You're welcome Jessa
very nice tutorial
Awesome! But im having problem how to display main content of the website and have it in the middle all the time when sidebar is being opened and closed. Any tips for that? Ty
Add your content inside the home content div
@@CodingLabYT im doing it in vue, so im having problem how should i put those components together, i want it little bit different than yours, because yours home content is not centered, if you know what i mean? Also im planning on putting different route pages and not just that home, so thats where im stuck :/
Dm me on Instagram or Facebook
@@CodingLabYT okay, check ig
God bless you
Thanks!
You're welcome
one option, put the X when you have the asider open and MENU when closed.
const sidebar = document.querySelector('.sidebar');
const sidebarBtn = document.querySelector('.bx-x');
const sidebarBtnMenu = document.querySelector('.bx-menu');
sidebarBtn.addEventListener('click', () => {
sidebar.classList.toggle('close');
sidebarBtn.classList.toggle('close');
sidebarBtnMenu.classList.remove('close');
});
sidebarBtnMenu.addEventListener('click', () => {
sidebar.classList.remove('close');
sidebarBtn.classList.toggle('close');
sidebarBtnMenu.classList.toggle('close');
});
.home-section .home-content .bx-menu,
.home-section .home-content .bx-x{
color: #11101d;
font-size: 35px;
}
.home-section .home-content .bx-menu,
.home-section .home-content .bx-x {
margin: 0 15px;
cursor: pointer;
display: block;
}
.home-section .home-content .bx-x.close,
.home-section .home-content .bx-menu.close {
display: none;
}
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!!
Thank you and Could you do same thing with using React js ?
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.
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 :)
Nice... 🤩
Thank you! Cheers!
Sensacional❤
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.
Can you make a proper video on full working search bar? Thanks
Nice project, will think about it... best regards
🔥🔥🔥🔥🔥🔥🔥
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?
Thank's for lesson! What is a license of this code? Can i use it in my open source project?
Yeah you can..
Wow! man this awesome. U can help me pls? How do I open the site with sidebar closed?
Watch this your problem will be solved - th-cam.com/video/wEfaoAa99XY/w-d-xo.html
how to close the previously opened dropdown side menu, when I open a new dropdown side menu, it automatically closes the previously opened dropdown
Hi, do you have any CSS courses you took to indicate?
good video bro keep it up
Great video! I just can't figure out how to make the sub menu go up instead of down
which IDE do you use?
Like merecido! Parabéns, muito bom!!!
Thank you
You're welcome
I need to know how to add multiple sub menu in this. Shall be thankful to you
excellent
Many many thanks
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. :)
Which software you used for coding ?
That is Atom code editor. Now Im using Vs code
which software are you using ?!
Atom code editor
Olá
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?
is there a public repo to get the code ? would be much appreciated ! cheers mate ;)
Sour code link is in Video Description
@@CodingLabYT thank you so much. But even with yoour source code i have the same bug where the js does not work after my first click on the sidebar. like the js froze and i cannot close or open the sidebar anymore. do you have any tips to avoid that ? thanks again
Please Dm me on Instagram or Facebook I will check your errors
Hello what app are you using?
Atom code editor
Thank you so much❤️ your channel is a very big help for my studies
Super