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। যা আপনি আপনার ওয়েবসাইট/অ্যাপ এ ব্যবহার করতে পারেন।
বর্তমান প্রতিটি ওয়েবসাইট এ Sidebar থাকে। যার কারনে ওয়েবসাইট এর ডিজাইন সুন্দর হয়।
যারা Beginner আছে তাদের জন্য এটি অনেক সাহায্য করবে তো চলুন শুরু করা যাক।
Demo
CODE
সব কোড একসাথে দিলে আপনার অসুবিধা হবে আর কেনো সেটা আপনি নিসচয় বুঝবেন। তবে লিংক দিচ্ছি চাইলে সব কোড একসাথে কপি করতে পারেন। Link:
Folder list
Sidebar
index.html
css
style.css
js
script.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidebar Menu </title>
<link rel="stylesheet" href="style.css">
<!-- Linking Google fonts for icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0">
</head>
<body>
<aside class="sidebar">
<!-- Sidebar header -->
<header class="sidebar-header">
<a href="#" class="header-logo">
<img src="logo.png" alt="CodingNepal">
</a>
<button class="toggler sidebar-toggler">
<span class="material-symbols-rounded">chevron_left</span>
</button>
<button class="toggler menu-toggler">
<span class="material-symbols-rounded">menu</span>
</button>
</header>
<nav class="sidebar-nav">
<!-- Primary top nav -->
<ul class="nav-list primary-nav">
<li class="nav-item">
<a href="#" class="nav-link">
<span class="nav-icon material-symbols-rounded">dashboard</span>
<span class="nav-label">Dashboard</span>
</a>
<span class="nav-tooltip">Dashboard</span>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="nav-icon material-symbols-rounded">calendar_today</span>
<span class="nav-label">Calendar</span>
</a>
<span class="nav-tooltip">Calendar</span>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="nav-icon material-symbols-rounded">notifications</span>
<span class="nav-label">Notifications</span>
</a>
<span class="nav-tooltip">Notifications</span>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="nav-icon material-symbols-rounded">group</span>
<span class="nav-label">Team</span>
</a>
<span class="nav-tooltip">Team</span>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="nav-icon material-symbols-rounded">insert_chart</span>
<span class="nav-label">Analytics</span>
</a>
<span class="nav-tooltip">Analytics</span>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="nav-icon material-symbols-rounded">star</span>
<span class="nav-label">Bookmarks</span>
</a>
<span class="nav-tooltip">Bookmarks</span>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="nav-icon material-symbols-rounded">settings</span>
<span class="nav-label">Settings</span>
</a>
<span class="nav-tooltip">Settings</span>
</li>
</ul>
<!-- Secondary bottom nav -->
<ul class="nav-list secondary-nav">
<li class="nav-item">
<a href="#" class="nav-link">
<span class="nav-icon material-symbols-rounded">account_circle</span>
<span class="nav-label">Profile</span>
</a>
<span class="nav-tooltip">Profile</span>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="nav-icon material-symbols-rounded">logout</span>
<span class="nav-label">Logout</span>
</a>
<span class="nav-tooltip">Logout</span>
</li>
</ul>
</nav>
</aside>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
style.css
/* Importing Google Fonts - 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: linear-gradient(#F1FAFF, #CBE4FF);
}
.sidebar {
position: fixed;
width: 270px;
margin: 16px;
border-radius: 16px;
background: #151A2D;
height: calc(100vh - 32px);
transition: all 0.4s ease;
}
.sidebar.collapsed {
width: 85px;
}
.sidebar .sidebar-header {
display: flex;
position: relative;
padding: 25px 20px;
align-items: center;
justify-content: space-between;
}
.sidebar-header .header-logo img {
width: 46px;
height: 46px;
display: block;
object-fit: contain;
border-radius: 50%;
}
.sidebar-header .toggler {
height: 35px;
width: 35px;
color: #151A2D;
border: none;
cursor: pointer;
display: flex;
background: #fff;
align-items: center;
justify-content: center;
border-radius: 8px;
transition: 0.4s ease;
}
.sidebar-header .sidebar-toggler {
position: absolute;
right: 20px;
}
.sidebar-header .menu-toggler {
display: none;
}
.sidebar.collapsed .sidebar-header .toggler {
transform: translate(-4px, 65px);
}
.sidebar-header .toggler:hover {
background: #dde4fb;
}
.sidebar-header .toggler span {
font-size: 1.75rem;
transition: 0.4s ease;
}
.sidebar.collapsed .sidebar-header .toggler span {
transform: rotate(180deg);
}
.sidebar-nav .nav-list {
list-style: none;
display: flex;
gap: 4px;
padding: 0 15px;
flex-direction: column;
transform: translateY(15px);
transition: 0.4s ease;
}
.sidebar.collapsed .sidebar-nav .primary-nav {
transform: translateY(65px);
}
.sidebar-nav .nav-link {
color: #fff;
display: flex;
gap: 12px;
white-space: nowrap;
border-radius: 8px;
padding: 12px 15px;
align-items: center;
text-decoration: none;
transition: 0.4s ease;
}
.sidebar.collapsed .sidebar-nav .nav-link {
border-radius: 12px;
}
.sidebar .sidebar-nav .nav-link .nav-label {
transition: opacity 0.3s ease;
}
.sidebar.collapsed .sidebar-nav .nav-link .nav-label {
opacity: 0;
pointer-events: none;
}
.sidebar-nav .nav-link:hover {
color: #151A2D;
background: #fff;
}
.sidebar-nav .nav-item {
position: relative;
}
.sidebar-nav .nav-tooltip {
position: absolute;
top: -10px;
opacity: 0;
color: #151A2D;
display: none;
pointer-events: none;
padding: 6px 12px;
border-radius: 8px;
white-space: nowrap;
background: #fff;
left: calc(100% + 25px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
transition: 0s;
}
.sidebar.collapsed .sidebar-nav .nav-tooltip {
display: block;
}
.sidebar-nav .nav-item:hover .nav-tooltip {
opacity: 1;
pointer-events: auto;
transform: translateY(50%);
transition: all 0.4s ease;
}
.sidebar-nav .secondary-nav {
position: absolute;
bottom: 30px;
width: 100%;
}
/* Responsive media query code for small screens */
@media (max-width: 1024px) {
.sidebar {
height: 56px;
margin: 13px;
overflow-y: hidden;
scrollbar-width: none;
width: calc(100% - 26px);
max-height: calc(100vh - 26px);
}
.sidebar.menu-active {
overflow-y: auto;
}
.sidebar .sidebar-header {
position: sticky;
top: 0;
z-index: 20;
border-radius: 16px;
background: #151A2D;
padding: 8px 10px;
}
.sidebar-header .header-logo img {
width: 40px;
height: 40px;
}
.sidebar-header .sidebar-toggler,
.sidebar-nav .nav-item:hover .nav-tooltip {
display: none;
}
.sidebar-header .menu-toggler {
display: flex;
height: 30px;
width: 30px;
}
.sidebar-header .menu-toggler span {
font-size: 1.3rem;
}
.sidebar .sidebar-nav .nav-list {
padding: 0 10px;
}
.sidebar-nav .nav-link {
gap: 10px;
padding: 10px;
font-size: 0.94rem;
}
.sidebar-nav .nav-link .nav-icon {
font-size: 1.37rem;
}
.sidebar-nav .secondary-nav {
position: relative;
bottom: 0;
margin: 40px 0 30px;
}
}
script.js
const sidebar = document.querySelector(".sidebar");
const sidebarToggler = document.querySelector(".sidebar-toggler");
const menuToggler = document.querySelector(".menu-toggler");
// Ensure these heights match the CSS sidebar height values
let collapsedSidebarHeight = "56px"; // Height in mobile view (collapsed)
let fullSidebarHeight = "calc(100vh - 32px)"; // Height in larger screen
// Toggle sidebar's collapsed state
sidebarToggler.addEventListener("click", () => {
sidebar.classList.toggle("collapsed");
});
// Update sidebar height and menu toggle text
const toggleMenu = (isMenuActive) => {
sidebar.style.height = isMenuActive ? `${sidebar.scrollHeight}px` : collapsedSidebarHeight;
menuToggler.querySelector("span").innerText = isMenuActive ? "close" : "menu";
}
// Toggle menu-active class and adjust height
menuToggler.addEventListener("click", () => {
toggleMenu(sidebar.classList.toggle("menu-active"));
});
// (Optional code): Adjust sidebar height on window resize
window.addEventListener("resize", () => {
if (window.innerWidth >= 1024) {
sidebar.style.height = fullSidebarHeight;
} else {
sidebar.classList.remove("collapsed");
sidebar.style.height = "auto";
toggleMenu(sidebar.classList.contains("menu-active"));
}
});
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.
The post কিভাবে Html, Css & Javascript দিয়ে Sidebar Menu তৈরি করবেন? appeared first on Trickbd.com.
from Trickbd.com https://ift.tt/WwfY4AC
via IFTTT
No comments:
Post a Comment