WELLCOME BACK
H
ello guys. How are you all? I hope you are all well. I came again with a post. Let’s go..
তো এই পোস্টে নিয়ে এসেছি একটি Responsive Sidebar যা শুধু HTML & CSS দিয়ে বানানো। আপনার ওয়েবসাইট এর জন্য এর এই Sidebar একদম ঠিক হবে কেনো না এতে অনেক সুন্দর ডিজাইন রয়েছে য়া ডেমো দেখলেই বুঝবেন তো চলুন শুরু করা যাক।
index.html
Sidebar Menu HTML and CSS
[email protected],100..700,0..1,-50..200" />
style.css
/* Importing Google font - Poppins */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { min-height: 100vh; background: #F0F4FF; } .sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 85px; display: flex; overflow-x: hidden; flex-direction: column; background: #161a2d; padding: 25px 20px; transition: all 0.4s ease; } .sidebar:hover { width: 260px; } .sidebar .sidebar-header { display: flex; align-items: center; } .sidebar .sidebar-header img { width: 42px; border-radius: 50%; } .sidebar .sidebar-header h2 { color: #fff; font-size: 1.25rem; font-weight: 600; white-space: nowrap; margin-left: 23px; } .sidebar-links h4 { color: #fff; font-weight: 500; white-space: nowrap; margin: 10px 0; position: relative; } .sidebar-links h4 span { opacity: 0; } .sidebar:hover .sidebar-links h4 span { opacity: 1; } .sidebar-links .menu-separator { position: absolute; left: 0; top: 50%; width: 100%; height: 1px; transform: scaleX(1); transform: translateY(-50%); background: #4f52ba; transform-origin: right; transition-delay: 0.2s; } .sidebar:hover .sidebar-links .menu-separator { transition-delay: 0s; transform: scaleX(0); } .sidebar-links { list-style: none; margin-top: 20px; height: 80%; overflow-y: auto; scrollbar-width: none; } .sidebar-links::-webkit-scrollbar { display: none; } .sidebar-links li a { display: flex; align-items: center; gap: 0 20px; color: #fff; font-weight: 500; white-space: nowrap; padding: 15px 10px; text-decoration: none; transition: 0.2s ease; } .sidebar-links li a:hover { color: #161a2d; background: #fff; border-radius: 4px; } .user-account { margin-top: auto; padding: 12px 10px; margin-left: -10px; } .user-profile { display: flex; align-items: center; color: #161a2d; } .user-profile img { width: 42px; border-radius: 50%; border: 2px solid #fff; } .user-profile h3 { font-size: 1rem; font-weight: 600; } .user-profile span { font-size: 0.775rem; font-weight: 600; } .user-detail { margin-left: 23px; white-space: nowrap; } .sidebar:hover .user-account { background: #fff; border-radius: 4px; }
আমি সব সময় কোডিং বিষয়ক পোস্ট করি তাই কোডিং নিয়ে কোনো কিছু লাগলে কমেন্ট এ বলবেন।
THE END
S
o friends, that’s it for today. See you in another post. If you like the post then like and comment. Stay tuned to Trickbd.com for any updates.
