Responsive Glass Sidebar using CSS & JavaScript
HTML-код
- Опубликовано: 13 июн 2024
- Hello everyone 😊 I'm here again with another CSS tutorial, this time, mixed with JavaScript. If you're looking for a complete Glass Sidebar design using CSS & JS, this video's made for you. I've also considered Responsive Design rules in this project and you will definitely find it useful 😉
📂 Assets
Icons: boxicons.com/
Font: fonts.google.com/
Background Image: tinyurl.com/5ecc56at
🔗 Source code
github.com/hosseinnabi-ir/Res...
🔔 Subscribe Now!
/ @codewithhossein
⏱ Timestamps
00:00 Glass Sidebar Preview
00:58 Sidebar Logo Elements
01:13 General Styles
01:51 Sidebar Glass Effect
02:55 Sidebar Logo Styles
04:26 Adding Nav Title & Items
05:37 Nav Title & Items Styles
08:25 Adding More Nav Items
09:37 Sidebar Line Styles
09:57 Sidebar Closed Mode
10:27 Adding Toggle Icon
10:47 Toggle Icon Styles
10:58 Sidebar Opened Mode
15:00 Enabling Toggling using JS
16:58 Sidebar Items Click Effect
18:11 Thanks For Watching :)
🎵 Music
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Ikson - Anywhere [Official]
Music provided by Ikson®
Listen: • #66 Anywhere (Official)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: BEAUZ & JVNA - Crazy [NCS Release]
Music provided by NoCopyrightSounds.
Watch: • BEAUZ & JVNA - Crazy |...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Jordan Schor & Harley Bird - Home
Music provided by NoCopyrightSounds.
Watch: • Jordan Schor & Harley ...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Song: Levianth & Axol - Remember (feat. The Tech Thieves)
Music provided by NoCopyrightSounds
Free Download/Stream: ncs.io/remember
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Lost Sky - Where We Started (feat. Jex)
Music provided by NoCopyrightSounds.
Watch: • Lost Sky - Where We St...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Thanks for watching, I appreciate it 🙏
Made with 💗 by Hossein
Absolutely love these tutorials! Thank you for being willing to share your code.
Glad you enjoyed man 😎🔥
The design is really cool and modern. Good job man.
It's very kind of you buddy 😍❤
You are really cool bro! You always reply to people's comments, and simultaneously make awesome projects!! Keep it up!
Thanks, so are you 😊 If people appreciate me for my work or even criticize it to watch better content next time, anyways, it means a lot to me and gonna appreciate them back ❤
Was able to get all issues fixed! thank you for the amazing tutorial. Currently messing with it a little to customize it a little more!
Glad you enjoyed the tutorial, it's my pleasure 😊❤
While you're making it customized, you can add glass border to sidebar items on hover, I actually forgot that 😅
@@CodeWithHossein ooo ill have to look into that!
Great job! Congrats!
Thank you so much 😀
I've been following you since you had 10k subscribers, I don't know why you're getting so few views. you deserve a lot bro😁🔥
Thank you so much brother, It's a pleasure having you in my channel ❤
you win my subscription bro it literally cleared my all doubts !
It's a pleasure to have you by my side 😊❤
I haven't been active on YT for a while, and that's why I'm answering too late.
I would sincerely apologize 🙏
Wow , that's awesome 🥰
Love from Italy 💚🤍❤
Thank you dear Enzo,
Love to Italy 😊❤
It's a great tutorial.
Thank you very much for that
Glad you enjoyed it, my pleasure 😊❤
Oh ! Bro truly loved it ...
Glad you liked it man, wait for more 😉🔥
Your videos gives the real satisfaction
Keep Growing
Love from Nepal❤️
Glad you think so, however I'm not satisfied yet 😅
Love Nepal & its nature 💚
That looks so sick dude
YESSS 🔥 Thank you ❤
😳Wow! What a desing
Glad you liked it, code along with the video and enjoy developing professional designs 😎🤞
This video is great bro
It's very kind of you, glad you enjoyed 😊🌹
Wow omg nice video, very wll my dear friend 🥰♥️
Amazing 🔥🔥
Very kind of you 😊❤
super nice !!!
Thank you so much 😊❤
Wow so beatifull
Thank you so much 😊❤
It turned out magnificent! Congratulations. However, I would change one thing in future versions, when you resize the photo it does not gradually increase smoothly, it practically jumps from the previous size to the new size, stuttering. I wish you the best of luck with your channel!
Thank YOU for pointing out this important tip 😊❤
@@CodeWithHossein excellent observation, thanks for mentioning. What solution do you think could be applied?
You are the best💪
Very kind of you, thanks a million 😊❤
wow 😮
Grafana 9 uses the same concept. Nice video!
Thanks for sharing your idea 😅❤
Op or what 🔥🔥👍
😎🔥
♥️ SUPER BRO
Glad you enjoyed it 😍❤
🔥 😍
Thanks a lot 😉
Nice bro
Thanks a lot 😊🔥
خیلی نابی بود ممنون
🙏❤
HI! Im from Argentina and i watch your videos 3 months ago, you so cool!!
I have a great question for you hahah, what is the name of this VS Code theme???
Im waiting for you answer!!! Thanks you very much
This is a fantastic tutorial. And it is important that developers know how to do this. But in the real world it is all about productivity. There are code generators that do exactly this allowing the developer to focus on something more important. I use code generators not because I don't know how to code it, but to deliver a product to the customer much faster. Now don't get this twisted. I like this tutorial but will never use it as I can complete an entire project using the same time if not less.
Lol real world dunno what world you live in but its not based in reality
@@jamesoneill1945 All I am saying is that the customer does not care if you coded the sidebar yourself or not. They do care about how quickly you can deliver the project. And that is a real-world fact.
@@PHPRunnerTipsAndTricks And when it breaks for the client on a routine update because you didn’t do it properly, your client will either have to reach back out to you or, most likely, decide not to work with you anymore.
@@johnsnow2809Correct. Can it not break if you designed it yourself? Of course, it can. In that case the client will have to phone you too and potentially not go back to you. What are you talking about?
@@johnsnow2809 i think the point he is making is that you should know how to do it, use a generator to put it in quick and then briefly go over it to make sure everything is right. saving you some time. not just paste the code in and hit export
hello Hussein, I TRIED BUT THE ICONS ARE NOT SHOWING ON THE PREVIEW, i can only see them on the console. Is that OK?
wow
Thanks a million 😊❤
I have added box shadow property to navbar but other contain overlap with it. How can I make navbar sticky?
I have also tried z index property but it's not working
In this case, z-index does not work without position: absolute;
Add either position of absolute or fixed (If you want it to be sticky) and you may need left: 0; as well 🤔
its not working for me it is giving me an error in script.js file [Uncaught TypeError: Cannot read properties of null (reading 'addEventListener']
Thanks a lot! pure sexy CSS
Glad you liked it, my pleasure 😊🔥
What are some of the Extensions you are using sir?
@@CodeWithHossein Thanks a lot.
@CodeWithHossein Can I please share this tutorial with my subscribers? It is such a good example of how to do this and I believe that most of them can learn a lot from you. Please?
You can send its link to your audience, so they can learn from me 😊❤
Was coding along, but mine doesn't hide the navbar doesn't animate on hover as yours
@@CodeWithHossein Some social media links?
Thank You Brothers For Your Amazing Videos which give us helps. May Allah Bless You ❤❤❤❤❤❤❤❤
Glad you enjoyed buddy 😊🔥
Seria da hora uma narração no fundo explicando as propriedades
Aí o vídeo teria 40min+
I'll be grateful if you could ask in English 🙏
@@CodeWithHossein He said: "A narration in the background explaining the properties" according to Google Translate.
and the content is part of the menu?
No 😅 Just some animated texts added while editing...
i am looking for inspirations for portoflio and this is my sidedbar
Of course it is 😉 You can comment your portfolio website link down here when it's done!
Bro please tell me how to add this into blogger template
My code is almost ready to use in your project, but if you see there's some issues like not being fixed or something well you can add:
position: fixed;
left: 0; // If necessary (To fix the sidebar on the left side of the screen)
z-index: 1; // If necessary (To place the sidebar over everything else)
Then it's also important to note that, you have customize it for your own website, add or delete some sidebar items!
Finally try to write some scripts to handle clicks, like when the user taps on Account your content on the right side moves into Account part. I think I'd handled clicks, you just need to write the rest for scrolling the page by clicking on items...
Feel free to ask if you've got any other question 😊❤
I just recently made something pretty nice using album cover art is there a way for me to send it to you
Yup! You can send the image in LinkedIn, link in bio 😁
@@CodeWithHossein thers no link fam
hi, nice tutorial but I would still need the ability to scroll because I have extended my bar a little bit
Hmm it's okay, sometimes we get inspirations from others but the final project becomes even better than the original one 😊
I did everything and it worked but the js (navItems(active) isn’t working 🥺
Same thing here
That part was a little complicated, check it out again and lemme know when you've fixed it 😁
@@CodeWithHossein ok sir🙌🤲
@@CodeWithHossein can u please recommend a crushed js tutorial for beginners to me?
@@CodeWithHossein with that one I don’t understand 💔🥺
Do you have responsive HTML CSS and JS only
Responsive what ? 🤔
@@CodeWithHossein tutorial simple responsive just use java script and CSSA
so, how to fill the content?
You just need to put your content on the right side of the website, and handle clicks so when the users click on an item in your sidebar, it scrolls down/up onto that part of your website 😉
good luck
Thank you 😊❤
Where are ur from?
Iran ❤🤍💚
How about just CSS?
bro,... just small changes... logo size change to percentual with max-width, then you dont need to change sizes in two classes... and second thing... inner loop instead of querySelector of only nav-item.active to remove class active is overhauling loop to check X items in loop for nothing...
Hmmm thanks for mentioning these tips 🙏
Do you know any platform to learn languages?
The best resource is always the official docs of that language you're considering, BUT not every beginner can do it at start point.
If you have a limited knowledge about the language, then I personally recommend taking action with crash courses on YT. You can find a full course? That's insane 👌
May I ask what language you wanna learn?!
@@CodeWithHossein not only one language.
I want to learn java and c+ before heading to study the course
@@jkljn79po Alright, I would suggest you to start with Java and its beginner course in Mosh channel. Shall I find it for you?!
@@CodeWithHossein yes thank for the time
@@jkljn79po My pleasure🌻Here you go...
ruclips.net/video/eIrMbAQSU34/видео.html
How to /*--??
Are you from iran?
Yup ❤🤍💚
@@CodeWithHossein بیا بگلم عشقم
@@CodeWithHossein چطوری داش خوبی؟
فرانت اند هات گاده عالی مینوازی
@@CodeWithHossein با چه اپی ادیت میزنی ویدیوهاتو کیفیت بالایی دارن.
Are you?
Remember me?
@@theviralguy2022 Yes I do 😊
@@CodeWithHossein guess my real name plz!
You're beautiful
People using firefox are crying :D
p.s. backdoor-filter: blur still doesn't work by default
يا زلمة هات شرح بالعربي بربك
People usually suppose that I'm an Arab based on my name, BUT sorry to say that I'm not...
I understand a little bit, like بربک means for god's sake, right? 😂
So I can't speak, maybe just share some tutorials in English!
کیف حالک بالمناسبته؟ 😊
@@CodeWithHossein Lol Thank You Your Videos Is Very Cool Thanks
Lost me at * {}
Keep up the good work tho'
Thank you, I will 🔥
I don't when exactly I'm gonna publish my full course, But I think about it everyday 😉
❤
Thanks for your support 😉
How to use the GitHub? I created an account on that, it's been the 3rd year, and i don't even understand and know how to use it...!
May I ask what is your purpose of having the account?! 🤔
@@CodeWithHossein I was about to create a responsive website and its Android app for our business purposes, but I can't understand anything about the GitHub platform... any helps?