Pure.CSS দিয়ে Custom Menu এবং Navbar তৈরি করা খুবই সহজ এবং এর জন্য আপনি কিছু নির্দিষ্ট ক্লাস ব্যবহার করে সুন্দর এবং রেসপন্সিভ মেনু তৈরি করতে পারেন। Pure.CSS আপনাকে মেনু এবং নেভিগেশন বার (Navbar) তৈরি করতে সহজ টেমপ্লেট প্রদান করে, যা বিভিন্ন স্ক্রীন সাইজ অনুযায়ী রেসপন্সিভ হবে।
এখানে আমরা Pure.CSS ব্যবহার করে Custom Menu এবং Navbar তৈরি করার কিছু উদাহরণ দেখব।
1. Basic Custom Navbar in Pure.CSS
Pure.CSS এর মাধ্যমে একটি সিম্পল এবং বেসিক Navbar তৈরি করা সম্ভব। এখানে আমরা একটি Horizontal Navbar তৈরি করবো।
Basic Navbar Example:
<!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="path/to/pure-min.css">
<title>Basic Navbar</title>
<style>
.navbar {
background-color: #4CAF50;
padding: 10px 20px;
}
.navbar a {
color: white;
padding: 10px 15px;
text-decoration: none;
display: inline-block;
}
.navbar a:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#services">Services</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</body>
</html>
ব্যাখ্যা:
.navbar: এটি আমাদের ন্যাভিগেশন বার, যেখানেbackground-color,paddingএবং অন্যান্য স্টাইল ব্যবহার করা হয়েছে।a: লিঙ্কগুলির জন্য স্টাইল, যেখানেpaddingএবংcolorদেওয়া হয়েছে।a:hover: মাউস হোভার করার সময় লিঙ্কের ব্যাকগ্রাউন্ড পরিবর্তিত হবে।
এইভাবে একটি সিম্পল এবং কাস্টম horizontal navbar তৈরি করা হয়েছে।
2. Custom Dropdown Menu in Navbar
একটি Dropdown Menu তৈরি করতে, Pure.CSS এর মাধ্যমে আপনি খুব সহজে ড্রপডাউন মেনু তৈরি করতে পারেন। এখানে, আমরা একটি ড্রপডাউন মেনু যোগ করবো যা শুধুমাত্র হোভার করলে উন্মুক্ত হবে।
Dropdown Menu Example:
<!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="path/to/pure-min.css">
<title>Navbar with Dropdown</title>
<style>
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
background-color: #333;
color: white;
padding: 14px 20px;
font-size: 16px;
border: none;
cursor: pointer;
}
.navbar a, .dropdown:hover .dropbtn {
background-color: #ddd;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#services">Services</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<!-- Dropdown Menu -->
<div class="dropdown">
<button class="dropbtn">More</button>
<div class="dropdown-content">
<a href="#news">News</a>
<a href="#events">Events</a>
<a href="#updates">Updates</a>
</div>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
.navbar: ন্যাভিগেশন বারটি ডিফাইন করা হয়েছে।.dropdown: ড্রপডাউন মেনু একটিdivহিসেবে তৈরি করা হয়েছে।.dropdown-content: এই অংশে ড্রপডাউন মেনুর লিঙ্কগুলি থাকে, যা সাধারণত প্রদর্শিত হয় না।:hover: ড্রপডাউন মেনুর উপর মাউস হোভার করলেdropdown-contentপ্রদর্শিত হয়।
এই কোডে একটি সিম্পল dropdown menu তৈরি করা হয়েছে যা হোভার করলে মেনু আইটেমগুলি প্রদর্শিত হয়।
3. Responsive Navbar with Pure.CSS
Responsive Navbar তৈরি করা খুবই গুরুত্বপূর্ণ, বিশেষ করে মোবাইল ডিভাইসের জন্য। Pure.CSS এর মাধ্যমে রেসপন্সিভ নেভিগেশন বার তৈরি করার জন্য, আপনি মিডিয়া কোয়ারি ব্যবহার করতে পারেন যাতে ছোট স্ক্রীনে নেভিগেশন বারটি সহজে ব্যবহৃত হয় এবং কল্যাপসেবল হয়।
Responsive Navbar Example:
<!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="path/to/pure-min.css">
<title>Responsive Navbar</title>
<style>
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
}
@media screen and (max-width: 600px) {
.navbar a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#services">Services</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</body>
</html>
ব্যাখ্যা:
@media screen and (max-width: 600px): স্ক্রীনের সাইজ যদি 600px এর নিচে হয়, তাহলে নেভিগেশন বারটি একক কলামে পরিবর্তিত হবে এবং প্রতিটি আইটেম নিচে চলে যাবে।- Responsive behavior: ছোট স্ক্রীনে আইটেমগুলো ভরাট হয়ে যাবে এবং বড় স্ক্রীনে এক সারিতে থাকবে।
4. Customizing the Navbar
Pure.CSS এর মাধ্যমে আপনি সহজে Navbar কাস্টমাইজ করতে পারেন। আপনি background color, font style, hover effects এবং আরও অনেক কিছু কাস্টমাইজ করতে পারেন।
Customized Navbar Example:
<!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="path/to/pure-min.css">
<style>
.navbar {
background-color: #1E90FF;
padding: 10px 20px;
}
.navbar a {
color: white;
text-align: center;
padding: 10px 20px;
text-decoration: none;
font-size: 16px;
}
.navbar a:hover {
background-color: #4682B4;
color: yellow;
}
</style>
<title>Customized Navbar</title>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#services">Services</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</body>
</html>
ব্যাখ্যা:
background-color: নেভিগেশন বারটির ব্যাকগ্রাউন্ড কালার কাস্টমাইজ করা হয়েছে।hover: হোভার ইফেক্টে বাটনের ব্যাকগ্রাউন্ড পরিবর্তিত হয় এবং টেক্সট কালার সাদা থেকে হলুদ হয়ে যায়।
Pure.CSS দিয়ে Custom Menus এবং Navbars তৈরি করা খুবই সহজ এবং কার্যকরী। আপনি সিম্পল এবং কাস্টম স্টাইলের নেভিগেশন বার তৈরি করতে পারেন, যা রেসপন্সিভ এবং মোবাইল ফ্রেন্ডলি হবে।
Read more
