Pure.CSS দিয়ে আপনি খুব সহজেই Sticky Menu এবং Sidebar Navigation তৈরি করতে পারেন। এখানে একটি উদাহরণ দেওয়া হলো যাতে আপনি বুঝতে পারবেন কিভাবে Sticky Menu এবং Sidebar Navigation তৈরি করা যায়।
১. Sticky Menu with Pure.CSS
Sticky Menu এমন একটি মেনু যা স্ক্রল করার পরও পেজের উপর স্থির থাকে। Pure.CSS এর সাহায্যে খুব সহজে এই ধরনের মেনু তৈরি করা সম্ভব।
উদাহরণ: Sticky Menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Sticky Menu with Pure.CSS</title>
<style>
/* Sticky menu styles */
.sticky-menu {
position: -webkit-sticky; /* For Safari */
position: sticky;
top: 0;
background-color: #333;
padding: 10px;
z-index: 1000;
}
.sticky-menu a {
color: white;
text-decoration: none;
padding: 10px 20px;
display: inline-block;
margin-right: 10px;
transition: background-color 0.3s;
}
.sticky-menu a:hover {
background-color: #555;
}
</style>
</head>
<body>
<div class="sticky-menu pure-menu pure-menu-horizontal">
<a href="#" class="pure-menu-item">Home</a>
<a href="#" class="pure-menu-item">About</a>
<a href="#" class="pure-menu-item">Services</a>
<a href="#" class="pure-menu-item">Contact</a>
</div>
<div style="height: 1500px;"> <!-- Long content to enable scrolling -->
<p>Scroll down to see the sticky menu in action.</p>
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- position: sticky: এই CSS প্রপার্টি মেনুকে স্ক্রল করার সময় পৃষ্ঠার উপরে আটকিয়ে রাখে।
- top: 0: এটি নিশ্চিত করে যে মেনুটি পৃষ্ঠার শীর্ষে থাকবে।
- z-index: 1000: এটি মেনুটিকে অন্যান্য উপাদানগুলির উপরে রাখে যাতে মেনুটি সবসময় দৃশ্যমান থাকে।
- pure-menu-horizontal: Pure.CSS ক্লাস যা মেনু আইটেমগুলোকে অনুভূমিকভাবে সাজায়।
২. Sidebar Navigation with Pure.CSS
Sidebar Navigation এমন একটি নেভিগেশন প্যানেল যা সাধারণত পেজের বাম বা ডান পাশে স্থাপন করা হয় এবং ব্যবহারকারী যখন স্ক্রল করে তখন এটি ভিউতে থাকে।
উদাহরণ: Sidebar Navigation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Sidebar Navigation with Pure.CSS</title>
<style>
/* Sidebar Styles */
.sidebar {
height: 100%;
width: 250px;
position: fixed;
top: 0;
left: 0;
background-color: #333;
padding-top: 20px;
}
.sidebar a {
color: white;
text-decoration: none;
display: block;
padding: 10px 15px;
transition: background-color 0.3s;
}
.sidebar a:hover {
background-color: #555;
}
/* Content Style */
.content {
margin-left: 260px; /* To make room for the sidebar */
padding: 20px;
}
</style>
</head>
<body>
<div class="sidebar">
<a href="#" class="pure-menu-item">Home</a>
<a href="#" class="pure-menu-item">About</a>
<a href="#" class="pure-menu-item">Services</a>
<a href="#" class="pure-menu-item">Contact</a>
</div>
<div class="content">
<h1>Sidebar Navigation Example</h1>
<p>This is an example of a sidebar navigation layout with Pure.CSS.</p>
<p>Scroll down to see more content.</p>
<div style="height: 1500px;"></div> <!-- Long content to enable scrolling -->
</div>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- position: fixed: এই CSS প্রপার্টি সাইডবারকে পৃষ্ঠার বাম দিকে স্থির রাখে, যাতে স্ক্রল করলে সাইডবারটি নড়েচড়ে না যায়।
- height: 100%: এটি সাইডবারকে পুরো পৃষ্ঠার উচ্চতার সমান করে দেয়।
- margin-left: 260px: কন্টেন্টের ডিভে সাইডবারের জন্য যথাযথ জায়গা তৈরি করতে ব্যবহৃত হয়েছে।
- sidebar a: সাইডবারের জন্য একটি ক্লাস যা ইন্টারেক্টিভ লিঙ্ক তৈরি করে।
Pure.CSS দিয়ে আপনি খুব সহজে একটি Sticky Menu এবং Sidebar Navigation তৈরি করতে পারেন। Sticky Menu পেজ স্ক্রল করার পরও উপরে থেকে লেগে থাকে, যা ব্যবহারকারীর জন্য আরও সহজ নেভিগেশন নিশ্চিত করে। Sidebar Navigation সাধারণত বড় ওয়েবসাইট বা অ্যাপ্লিকেশনে ব্যবহৃত হয়, যাতে ব্যবহারকারী সহজেই পেজের বিভিন্ন অংশে যেতে পারে। Pure.CSS এর সরল ও মডুলার স্টাইলিং ব্যবহারে এই ধরনের নেভিগেশন সহজেই তৈরি করা সম্ভব।
Read more
