Pure.CSS দিয়ে Menu এবং Navigation Bar তৈরি করা অত্যন্ত সহজ, কারণ এটি একটি লাইটওয়েট এবং মোডুলার CSS ফ্রেমওয়ার্ক যা দ্রুত ওয়েব ডেভেলপমেন্টে সহায়তা করে। Pure.CSS এর মধ্যে কিছু প্রিসেট ক্লাস রয়েছে, যা ব্যবহার করে আপনি সিম্পল এবং রেসপনসিভ Menu এবং Navigation Bar তৈরি করতে পারেন।
এখানে Pure.CSS ব্যবহার করে Menu এবং Navigation Bar তৈরি করার জন্য একটি উদাহরণ দেওয়া হলো।
1. Simple Navigation Bar with Pure.CSS
এই উদাহরণে, একটি সিম্পল হরিজেন্টাল নেভিগেশন বার তৈরি করা হয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Custom Styles for Navigation Bar */
.navbar {
background-color: #4CAF50;
padding: 10px;
}
.navbar a {
color: white;
text-decoration: none;
padding: 14px 20px;
display: inline-block;
transition: background-color 0.3s;
}
.navbar a:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</body>
</html>
ব্যাখ্যা:
.navbar: এটি নেভিগেশন বারের কন্টেইনার, যেখানে ব্যাকগ্রাউন্ড কালার এবং প্যাডিং দেওয়া হয়েছে।.navbar a: প্রতিটি নেভিগেশন লিঙ্কে সাদা টেক্সট এবং কিছু প্যাডিং প্রদান করা হয়েছে।text-decoration: none;ব্যবহার করে লিঙ্কের আন্ডারলাইন সরানো হয়েছে।- হোভার ইফেক্ট:
:hoverপসুডো ক্লাস ব্যবহার করে লিঙ্কের ব্যাকগ্রাউন্ড কালার পরিবর্তন করা হয়েছে।
এটি একটি সাধারণ হরিজেন্টাল নেভিগেশন বার যা মোবাইল এবং ডেস্কটপে কাজ করবে।
2. Vertical Navigation Bar with Pure.CSS
এখানে একটি ভের্টিকাল (লম্বা) নেভিগেশন বার তৈরি করা হয়েছে, যেখানে লিঙ্কগুলি স্যাডেলাইনে সাজানো থাকবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Navigation Bar with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Custom Styles for Vertical Navigation Bar */
.vertical-navbar {
background-color: #4CAF50;
width: 200px;
padding: 10px;
}
.vertical-navbar a {
color: white;
text-decoration: none;
display: block;
padding: 14px;
margin-bottom: 10px;
transition: background-color 0.3s;
}
.vertical-navbar a:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="vertical-navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</body>
</html>
ব্যাখ্যা:
.vertical-navbar: এটি একটি সাইড নেভিগেশন বার, যার জন্য ব্যাকগ্রাউন্ড কালার এবং প্রস্থ সেট করা হয়েছে। এটি একটি নির্দিষ্ট প্রস্থে থাকতে পারে (২০০px) এবং সবার জন্য দৃশ্যমান হবে।.vertical-navbar a: এখানে প্রতিটি লিঙ্ককে ব্লক ডিসপ্লে দিয়ে স্যাডেলাইনে সাজানো হয়েছে।margin-bottom: 10pxদ্বারা আইটেমগুলোর মধ্যে কিছু দূরত্ব দেওয়া হয়েছে।- হোভার ইফেক্ট: একইভাবে,
:hoverপসুডো ক্লাস ব্যবহার করে লিঙ্কের ব্যাকগ্রাউন্ড কালার পরিবর্তন করা হয়েছে।
3. Responsive Navigation Bar with Pure.CSS (Mobile-Friendly)
এটি একটি রেসপনসিভ নেভিগেশন বার, যেখানে ছোট স্ক্রীনে (যেমন মোবাইল) একটি Hamburger Menu দেখা যাবে। Pure.CSS এর গ্রিড সিস্টেম ব্যবহার করে এটি তৈরি করা যাবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Bar with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Custom Styles for Responsive Navigation Bar */
.navbar {
background-color: #4CAF50;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar a {
color: white;
text-decoration: none;
padding: 14px 20px;
transition: background-color 0.3s;
}
.navbar a:hover {
background-color: #45a049;
}
/* Hamburger Menu */
.navbar .menu-icon {
display: none;
}
/* For Mobile Devices */
@media screen and (max-width: 600px) {
.navbar a {
display: none;
}
.navbar .menu-icon {
display: block;
cursor: pointer;
font-size: 24px;
color: white;
}
.navbar.responsive a {
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="navbar" id="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
<span class="menu-icon" onclick="toggleMenu()">☰</span>
</div>
<script>
function toggleMenu() {
var navbar = document.getElementById("navbar");
navbar.classList.toggle("responsive");
}
</script>
</body>
</html>
ব্যাখ্যা:
.navbar: নেভিগেশন বার তৈরি করা হয়েছে, যেখানে ডিফল্টভাবে সমস্ত লিঙ্কগুলি ডেক্সটপে প্রদর্শিত হয়।- Hamburger Menu: মোবাইল স্ক্রীনে,
☰চিহ্ন (Hamburger Icon) দেখানো হয়, যা ব্যবহারকারী ক্লিক করলে মেনুর লিঙ্কগুলি প্রদর্শিত হবে।display: noneব্যবহার করে মোবাইল স্ক্রীনে শুধুমাত্র Hamburger Menu দেখা যায়। - Responsive Design:
@media screen and (max-width: 600px)মিডিয়া কুয়েরি ব্যবহার করে মোবাইল স্ক্রীনে রেসপনসিভ নেভিগেশন তৈরি করা হয়েছে। এটি ছোট স্ক্রীনে নেভিগেশন লিঙ্কগুলি ব্লক আকারে প্রদর্শন করে।
Pure.CSS দিয়ে Menu এবং Navigation Bar তৈরি করা সহজ এবং দ্রুত। Pure.CSS এর গ্রিড সিস্টেম এবং হালকা ফিচারস আপনাকে একটি responsive, minimalistic, এবং functional নেভিগেশন বার তৈরি করতে সাহায্য করে। আপনি চাইলে এই কাস্টমাইজড বাটন স্টাইলিং, হোভার ইফেক্ট, এবং হ্যামবার্গার মেনু সুবিধা যুক্ত করে আপনার ওয়েবসাইটের ইউজার ইন্টারফেস আরও ইন্টারেক্টিভ এবং ইউজার ফ্রেন্ডলি করতে পারেন।
Pure.CSS দিয়ে একটি Simple Menu তৈরি করা অত্যন্ত সহজ এবং সুন্দর হয়। Pure.CSS একটি হালকা, দ্রুত এবং মডুলার CSS ফ্রেমওয়ার্ক, যা ওয়েব ডিজাইন ও ডেভেলপমেন্টে কার্যকরী স্টাইলিং প্রদান করে। আপনি চাইলে খুব সহজেই একটি সিম্পল নেভিগেশন মেনু তৈরি করতে পারেন যা দ্রুত লোড হয় এবং সুন্দর দেখতে।
এখানে একটি Simple Menu তৈরি করার উদাহরণ দেওয়া হলো, যেখানে Pure.CSS এর প্রি-বিল্ট ক্লাস ব্যবহার করা হয়েছে।
Simple Menu Example with Pure.CSS
<!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>Simple Menu with Pure.CSS</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
.menu {
background-color: #333;
padding: 10px;
border-radius: 5px;
}
.menu a {
color: white;
text-decoration: none;
padding: 10px 20px;
display: inline-block;
border-radius: 5px;
margin-right: 10px;
transition: background-color 0.3s;
}
.menu a:hover {
background-color: #555;
}
</style>
</head>
<body>
<div class="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>
</body>
</html>
উদাহরণ বিশ্লেষণ:
- pure-menu: Pure.CSS এর একটি ক্লাস যা মেনু তৈরি করতে ব্যবহৃত হয়। এটি একটি সাধারণ এবং প্রাথমিক স্টাইলিং প্রদান করে।
- pure-menu-horizontal: এই ক্লাসটি মেনুটিকে অনুভূমিকভাবে সাজাতে ব্যবহৃত হয়, অর্থাৎ মেনু আইটেমগুলি এক সারিতে থাকবে।
- pure-menu-item: এটি প্রতিটি মেনু আইটেমের জন্য ব্যবহৃত ক্লাস, যা একটি নির্দিষ্ট স্টাইল প্রদান করে।
কাস্টম স্টাইলিং:
- .menu: আমরা মেনুর জন্য একটি ব্যাকগ্রাউন্ড কালার এবং কিছু প্যাডিং দিয়েছি, এবং মেনুর কোণগুলোও রাউন্ড করেছি।
- .menu a: মেনু আইটেমগুলির জন্য প্রাথমিক স্টাইল, যেমন টেক্সট কালার, প্যাডিং, মার্জিন, এবং হোভার স্টাইল (যখন মাউস আইটেমের উপর থাকবে তখন ব্যাকগ্রাউন্ড কালার পরিবর্তন হবে)।
এই কোডের মাধ্যমে আপনি Pure.CSS ব্যবহার করে একটি সিম্পল, হালকা এবং সুন্দর নেভিগেশন মেনু তৈরি করতে পারেন। এটি সহজ, দ্রুত লোড হয় এবং মডুলার ফ্রেমওয়ার্কের মাধ্যমে ওয়েব পেজের ডিজাইনকে সহজেই সুশৃঙ্খল করে তোলে।
Pure.CSS ফ্রেমওয়ার্ক ব্যবহার করে Horizontal এবং Vertical Menu তৈরি করা খুবই সহজ এবং দ্রুত। Pure.CSS-এ প্রি-ডিফাইনড স্টাইল রয়েছে যা আপনাকে নেভিগেশন মেনু তৈরি করতে সহায়তা করে। নিচে Horizontal এবং Vertical Menu তৈরি করার উদাহরণ এবং তাদের স্টাইলিং কিভাবে করা যায়, তা বিস্তারিতভাবে আলোচনা করা হয়েছে।
1. Horizontal Menu তৈরি করা
Horizontal menu সাধারণত টপ ন্যাভিগেশন বার হিসেবে ব্যবহৃত হয়, যেখানে মেনু আইটেমগুলো এক লাইনে সাজানো থাকে।
উদাহরণ:
<link rel="stylesheet" href="https://purecss.io/build/pure-min.css">
<ul class="pure-menu pure-menu-horizontal">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Services</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
</ul>
ব্যাখ্যা:
pure-menu: এটি একটি বেস ক্লাস যা মেনু উপাদানগুলিকে স্টাইল করে।pure-menu-horizontal: এই ক্লাসটি মেনুকে horizontal (অনুভূমিক) আকারে সাজাতে সাহায্য করে।pure-menu-item: প্রতিটি মেনু আইটেমের জন্য একটি ক্লাস।pure-menu-link: মেনুর লিংকগুলির জন্য ক্লাস যা তাদের স্টাইল করবে।
এখানে, pure-menu-horizontal ক্লাস দিয়ে আপনি মেনুটিকে অনুভূমিকভাবে সাজাতে পারবেন। মেনু আইটেমগুলো <li> এলিমেন্টের মধ্যে রাখা হয়েছে এবং প্রতিটি লিংকটি <a> ট্যাগ ব্যবহার করে তৈরি করা হয়েছে।
কাস্টমাইজেশন:
আপনি মেনু আইটেমের আকার, ফন্ট সাইজ, হোভার ইফেক্ট ইত্যাদি কাস্টমাইজ করতে পারেন।
<style>
.pure-menu-item a {
font-size: 16px;
padding: 10px 20px;
}
.pure-menu-item a:hover {
background-color: #0066cc;
color: white;
}
</style>
2. Vertical Menu তৈরি করা
Vertical menu সাধারণত সাইড ন্যাভিগেশন বা সাইডবারে ব্যবহৃত হয়, যেখানে মেনু আইটেমগুলো উপরে থেকে নীচে সোজা সাজানো থাকে।
উদাহরণ:
<link rel="stylesheet" href="https://purecss.io/build/pure-min.css">
<ul class="pure-menu pure-menu vertical">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Services</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
</ul>
ব্যাখ্যা:
pure-menu: এটি মেনু উপাদানগুলিকে স্টাইল করার জন্য বেস ক্লাস।pure-menu-vertical: এই ক্লাসটি মেনুকে vertical (খাড়ানো) আকারে সাজাতে সাহায্য করে।pure-menu-item: প্রতিটি মেনু আইটেমের জন্য ক্লাস।pure-menu-link: মেনুর লিংকগুলির জন্য ক্লাস।
এখানে, pure-menu-vertical ক্লাস ব্যবহার করে মেনু আইটেমগুলোকে খাড়ানো (vertical) অবস্থানে সাজানো হয়েছে।
কাস্টমাইজেশন:
আপনি মেনুর প্যাডিং, ব্যাকগ্রাউন্ড, এবং হোভার ইফেক্ট কাস্টমাইজ করতে পারেন।
<style>
.pure-menu-item a {
font-size: 16px;
padding: 10px 20px;
}
.pure-menu-item a:hover {
background-color: #0066cc;
color: white;
}
.pure-menu {
width: 200px;
}
</style>
এখানে, pure-menu ক্লাসের জন্য সাইড মেনুর প্রস্থ কাস্টমাইজ করা হয়েছে, এবং pure-menu-item a:hover ক্লাস ব্যবহার করে হোভার ইফেক্ট যোগ করা হয়েছে।
3. Responsive Horizontal Menu (রেসপন্সিভ হরিজেন্টাল মেনু)
যখন আপনার ওয়েবসাইটটি মোবাইল ডিভাইসে দেখা হয়, তখন horizontal menu কে vertical menu তে রূপান্তরিত করার জন্য CSS মিডিয়া কোয়েরি ব্যবহার করতে পারেন।
উদাহরণ:
<link rel="stylesheet" href="https://purecss.io/build/pure-min.css">
<ul class="pure-menu pure-menu-horizontal">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Services</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
</ul>
<style>
@media (max-width: 600px) {
.pure-menu-horizontal {
display: block;
}
.pure-menu-item {
display: block;
}
}
</style>
এখানে, মিডিয়া কোয়েরি ব্যবহার করে pure-menu-horizontal কে রেসপন্সিভ বানানো হয়েছে। যখন স্ক্রীনের প্রস্থ 600px বা তার কম হবে, তখন মেনুটি খাড়ানো (vertical) হয়ে যাবে।
Pure.CSS দিয়ে horizontal এবং vertical menu তৈরি করা খুবই সহজ এবং কার্যকরী। এর প্রি-ডিফাইনড ক্লাসগুলি আপনাকে দ্রুত সুন্দর এবং রেসপন্সিভ মেনু তৈরি করতে সহায়তা করে। আপনি বিভিন্ন মেনু এলিমেন্টে কাস্টম স্টাইল যোগ করতে পারেন, যেমন প্যাডিং, ফন্ট সাইজ, হোভার ইফেক্ট ইত্যাদি। Pure.CSS-এর সিম্পল এবং মডুলার ফিচারগুলি এটি একটি শক্তিশালী টুল বানায় ওয়েব ডেভেলপমেন্টের জন্য।
Pure.CSS একটি লাইটওয়েট এবং মডুলার CSS ফ্রেমওয়ার্ক যা ওয়েব অ্যাপ্লিকেশন এবং ওয়েবসাইটের জন্য সহজ এবং রেসপন্সিভ ন্যাভবার এবং ড্রপডাউন মেনু তৈরি করতে সাহায্য করে। Pure.CSS-এর গ্রিড সিস্টেম এবং অন্যান্য প্রি-ডিফাইনড ক্লাস ব্যবহার করে আপনি দ্রুত রেসপন্সিভ ন্যাভবার এবং ড্রপডাউন মেনু তৈরি করতে পারেন।
Responsive Navbar in Pure.CSS
Responsive Navbar একটি গুরুত্বপূর্ণ উপাদান যেটি ওয়েবসাইট বা অ্যাপ্লিকেশনে নেভিগেশনের জন্য ব্যবহৃত হয় এবং এটি বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে কাজ করে। Pure.CSS এর সাহায্যে আপনি সহজেই একটি রেসপন্সিভ ন্যাভবার তৈরি করতে পারেন।
1. Basic Responsive Navbar in Pure.CSS
Pure.CSS-এর সাহায্যে রেসপন্সিভ ন্যাভবার তৈরি করার জন্য, আমরা সাধারণত pure-menu এবং pure-menu-horizontal ক্লাস ব্যবহার করি। এই ক্লাসগুলি নেভিগেশন মেনু এবং লিস্ট আইটেমের জন্য ডিফল্ট স্টাইল প্রদান করে।
উদাহরণ: Basic Responsive Navbar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navbar with Pure.CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Custom styles to handle the toggle button for small screens */
@media (max-width: 600px) {
.pure-menu-list {
display: none;
}
.pure-menu-open {
display: block;
}
}
</style>
</head>
<body>
<nav class="pure-menu pure-menu-horizontal">
<a href="#" class="pure-menu-heading pure-menu-link">Logo</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Services</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
</ul>
<!-- Hamburger button for small screens -->
<a href="javascript:void(0);" class="pure-menu-open pure-menu-link" onclick="toggleMenu()">☰</a>
</nav>
<script>
function toggleMenu() {
const menu = document.querySelector('.pure-menu-list');
menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
}
</script>
</body>
</html>
ব্যাখ্যা:
pure-menu: এটি একটি সাধারণ ক্লাস যা ন্যাভবারের জন্য প্রাথমিক স্টাইল দেয়।pure-menu-horizontal: এই ক্লাসটি মেনুকে অনুভূমিকভাবে সাজায়।pure-menu-item: এই ক্লাসটি মেনু আইটেমের জন্য ব্যবহৃত হয়।pure-menu-link: এটি মেনু আইটেমের লিংকের জন্য ব্যবহৃত হয়।pure-menu-open: ছোট স্ক্রীন আকারের জন্য একটি হ্যামবার্গার মেনু বাটন তৈরি করা হয়েছে।toggleMenu(): একটি জাভাস্ক্রিপ্ট ফাংশন যা হ্যামবার্গার মেনুতে ক্লিক করলে ন্যাভবারের তালিকাকে দেখাতে বা লুকাতে সাহায্য করে।
Dropdown Menu in Pure.CSS
Dropdown Menu হল একটি জনপ্রিয় ইউআই উপাদান যা ব্যবহারকারীদের বিভিন্ন অপশন নির্বাচন করতে সাহায্য করে। Pure.CSS-এ ড্রপডাউন মেনু তৈরি করা সহজ এবং এটি একাধিক রেসপন্সিভ ফিচার এবং ক্লাসের মাধ্যমে কাস্টমাইজ করা যেতে পারে।
2. Basic Dropdown Menu in Pure.CSS
Pure.CSS-এ ড্রপডাউন মেনু তৈরি করার জন্য আমরা pure-menu-allow-hover এবং pure-menu-has-children ক্লাস ব্যবহার করি, যা ড্রপডাউন অপশনগুলোকে সঠিকভাবে তৈরি করতে সাহায্য করে।
উদাহরণ: Basic Dropdown Menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Menu with Pure.CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.pure-menu-dropdown {
position: relative;
}
.pure-menu-dropdown > .pure-menu-children {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 160px;
}
.pure-menu-allow-hover:hover > .pure-menu-children {
display: block;
}
</style>
</head>
<body>
<nav class="pure-menu pure-menu-horizontal">
<a href="#" class="pure-menu-heading pure-menu-link">Logo</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item pure-menu-dropdown pure-menu-allow-hover">
<a href="#" class="pure-menu-link">Services</a>
<ul class="pure-menu-children">
<li><a href="#" class="pure-menu-link">Web Design</a></li>
<li><a href="#" class="pure-menu-link">Web Development</a></li>
<li><a href="#" class="pure-menu-link">SEO Services</a></li>
</ul>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
</ul>
</nav>
</body>
</html>
ব্যাখ্যা:
pure-menu-dropdown: এই ক্লাসটি ড্রপডাউন মেনুর জন্য ব্যবহার করা হয়।pure-menu-children: এটি ড্রপডাউন মেনুর সাব-আইটেমগুলির জন্য ব্যবহৃত হয়।pure-menu-allow-hover: এই ক্লাসটি হোভার ইফেক্ট তৈরি করে, যার মাধ্যমে ব্যবহারকারী যখন মাউস দিয়ে ড্রপডাউন মেনুতে হোভার করবেন, তখন সাব মেনু দেখাবে।display: noneএবংdisplay: block: ড্রপডাউন মেনু হোভার করার মাধ্যমে দেখানো হবে।
3. Responsive Dropdown Menu
Pure.CSS-এ আপনি ড্রপডাউন মেনুর স্টাইল কাস্টমাইজ করতে পারবেন যাতে এটি ছোট স্ক্রীনে (মোবাইল বা ট্যাবলেট) আরও ব্যবহারযোগ্য হয়। ছোট স্ক্রীনে একটি হ্যামবার্গার মেনু তৈরি করা যেতে পারে, যা ড্রপডাউন মেনু হিসেবে কাজ করবে।
উদাহরণ: Responsive Dropdown Menu with Hamburger
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Dropdown Menu with Pure.CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Hide dropdown menu by default for small screens */
.pure-menu-list {
display: none;
}
/* Show the menu when hamburger button is clicked */
.pure-menu-open {
display: block;
}
@media (max-width: 600px) {
.pure-menu-list {
display: block;
}
}
</style>
</head>
<body>
<nav class="pure-menu pure-menu-horizontal">
<a href="#" class="pure-menu-heading pure-menu-link">Logo</a>
<!-- Menu List -->
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item pure-menu-dropdown pure-menu-allow-hover">
<a href="#" class="pure-menu-link">Services</a>
<ul class="pure-menu-children">
<li><a href="#" class="pure-menu-link">Web Design</a></li>
<li><a href="#" class="pure-menu-link">Web Development</a></li>
<li><a href="#" class="pure-menu-link">SEO Services</a></li>
</ul>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
</ul>
<!-- Hamburger Menu for small screens -->
<a href="javascript:void(0);" class="pure-menu-open pure-menu-link" onclick="toggleMenu()">☰</a>
</nav>
<script>
function toggleMenu() {
const menu = document.querySelector('.pure-menu-list');
menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
}
</script>
</body>
</html>
ব্যাখ্যা:
- Hamburger Icon: ছোট স্ক্রীন আকারে ☰ বাটন (হ্যামবার্গার আইকন) দিয়ে মেনু চালু বা বন্ধ করা যাবে।
- CSS Media Queries: ছোট স্ক্রীনে, ন্যাভবারের মেনু আইটেমগুলি হ্যামবার্গার আইকনে রূপান্তরিত হবে।
- toggleMenu(): একটি জাভাস্ক্রিপ্ট ফাংশন যা হ্যামবার্গার মেনুতে ক্লিক করলে মেনুর প্রদর্শন পরিবর্তন করে।
Pure.CSS-এর সাহায্যে আপনি সহজেই একটি responsive navbar এবং dropdown menu তৈরি করতে পারেন। Pure-menu, pure-menu-horizontal এবং pure-menu-dropdown ক্লাস ব্যবহার করে, আপনি ন্যাভবার এবং ড্রপডাউন মেনুকে কাস্টমাইজ করতে পারেন এবং এগুলিকে রেসপন্সিভ করে তুলতে পারেন। ছোট স্ক্রীনের জন্য হ্যামবার্গার মেনু যুক্ত করা যায় যা ব্যবহারকারীদের জন্য আরও সুবিধাজনক। Pure.CSS-এর গ্রিড সিস্টেম এবং ইউআই উপাদানগুলির সাহায্যে আপনি দ্রুত এবং সহজেই এমন ফিচারগুলি তৈরি করতে পারবেন।
Pure.CSS-এ Menu Items এর জন্য Custom Styling তৈরি করা একটি সহজ এবং কার্যকর পদ্ধতি। Pure.CSS ফ্রেমওয়ার্ক ইতিমধ্যেই কিছু ডিফল্ট স্টাইলিং সরবরাহ করে, তবে আপনি চাইলে নিজস্ব ডিজাইন প্রয়োগ করে কাস্টম স্টাইলিং করতে পারেন। এতে ফর্ম্যাটিং, হোভার ইফেক্টস, বর্ডার, প্যাডিং এবং আরও অনেক কিছু কাস্টমাইজ করা যেতে পারে।
এই টিউটোরিয়ালে, আমরা দেখবো কিভাবে Pure.CSS ব্যবহার করে Menu Items এর জন্য কাস্টম স্টাইলিং তৈরি করা যায়, যেমন hover effects, active states, custom fonts, এবং আরও কিছু স্টাইলিং।
1. Basic Menu with Custom Styling
প্রথমে, আমরা একটি সাধারণ navbar বা menu items তৈরি করবো, যেখানে কিছু কাস্টম স্টাইলিং অ্যাপ্লাই করা হবে।
উদাহরণ: Basic Menu Items with Custom Styling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Custom Menu Styling</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Custom styling for the navigation menu */
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #4CAF50;
color: white;
}
/* Responsive navbar for small screens */
@media screen and (max-width: 600px) {
.navbar a {
float: none;
width: 100%;
text-align: left;
padding: 10px 20px;
}
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home" class="active">Home</a>
<a href="#services">Services</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</body>
</html>
ব্যাখ্যা:
- Navbar Styling:
.navbarক্লাসটি ব্যাকগ্রাউন্ড কালার, ওপেন লাইন এবং হোভার ইফেক্ট দেয়। - Menu Item Styling:
.navbar aক্লাসের মাধ্যমে মেনু আইটেমগুলো সেন্টার করা, প্যাডিং যোগ করা, টেক্সট ডেকোরেশন সরানো এবং কালার নির্ধারণ করা হয়েছে। - Hover Effect:
.navbar a:hoverব্যবহার করে হোভার হলে ব্যাকগ্রাউন্ড কালার পরিবর্তন করা হয়েছে। - Active State:
.navbar a.activeএর মাধ্যমে একটি নির্দিষ্ট মেনু আইটেম সক্রিয় থাকলে তার ব্যাকগ্রাউন্ড কালার পরিবর্তন করা হয়েছে। - Responsive: Media query ব্যবহার করে স্ক্রীন সাইজ 600px এর কম হলে, মেনু আইটেমগুলো পুরো প্রস্থে দেখানো হবে এবং সোজা হয়ে যাবে।
2. Dropdown Menu with Custom Styling
একটি Dropdown Menu তৈরি করতে, আমরা একটি কাস্টম স্টাইলিং ব্যবহার করবো যেখানে ব্যবহারকারী মাউস হোভার করলে ড্রপডাউন মেনু প্রদর্শিত হবে।
উদাহরণ: Custom Dropdown Menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Dropdown Menu</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Basic styling for the menu */
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
background-color: #333;
color: white;
padding: 14px 20px;
font-size: 17px;
border: none;
cursor: pointer;
}
.dropdown:hover .dropbtn {
background-color: #ddd;
color: black;
}
/* Dropdown content */
.dropdown-content {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Responsive dropdown for small screens */
@media screen and (max-width: 600px) {
.navbar a, .dropdown {
float: none;
width: 100%;
text-align: left;
padding: 10px 20px;
}
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home" class="active">Home</a>
<a href="#services">Services</a>
<div class="dropdown">
<button class="dropbtn">More
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</body>
</html>
ব্যাখ্যা:
- Dropdown Menu:
.dropdownএবং.dropdown-contentক্লাস ব্যবহার করে একটি ড্রপডাউন মেনু তৈরি করা হয়েছে। ড্রপডাউন শুধুমাত্র hover করলে প্রদর্শিত হয়, এবং.dropdown:hover .dropdown-contentব্যবহার করে হোভার অবস্থায় ড্রপডাউন কন্টেন্ট শো করা হয়। - Dropdown Button: .dropbtn ক্লাস দিয়ে ড্রপডাউন বাটন স্টাইল করা হয়েছে, যেখানে হোভার করলে তার ব্যাকগ্রাউন্ড পরিবর্তিত হবে।
- Responsive Design: Media query ব্যবহার করে ছোট স্ক্রীনে ড্রপডাউন বাটন এবং মেনু আইটেমগুলো ভরপুর প্রস্থে দেখানো হয়েছে।
3. Custom Menu Items Styling with Icon
এখন, আমরা মেনু আইটেমগুলিতে আইকন যোগ করব, যা Pure.CSS এর সাহায্যে কাস্টমাইজ করা হবে।
উদাহরণ: Menu Items with Custom Icons
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Items with Icons</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Basic navbar styling */
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a i {
margin-right: 8px;
}
/* Add icons to menu items */
.home-icon {
content: url('https://via.placeholder.com/20');
}
.services-icon {
content: url('https://via.placeholder.com/20');
}
.contact-icon {
content: url('https://via.placeholder.com/20');
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home"><i class="home-icon"></i>Home</a>
<a href="#services"><i class="services-icon"></i>Services</a>
<a href="#about">About</a>
<a href="#contact"><i class="contact-icon"></i>Contact</a>
</div>
</body>
</html>
ব্যাখ্যা:
- Icons in Menu Items: এখানে আইকন যুক্ত করার জন্য
<i>ট্যাগ ব্যবহার করা হয়েছে এবংcontentপ্রপার্টি ব্যবহার করে আইকনের URL ইনপুট করা হয়েছে। - Hover Effect:
navbar a:hoverক্লাসের মাধ্যমে মেনু আইটেম হোভার হলে তার ব্যাকগ্রাউন্ড এবং টেক্সট কালার পরিবর্তন করা হয়েছে।
Pure.CSS ব্যবহার করে আপনি সহজেই Responsive Navbar এবং Dropdown Menu তৈরি করতে পারেন, এবং Menu Items এর জন্য কাস্টম স্টাইলিং যোগ করতে পারেন। আপনি কাস্টম hover effects, active states, icons, এবং responsive adjustments ব্যবহার করে আপনার মেনু বা নেভিগেশন বারকে আরো আকর্ষণীয় ও কার্যকরী করতে পারেন। Pure.CSS-এর গ্রিড সিস্টেম এবং স্টাইলিং ক্লাসগুলো ব্যবহার করে, আপনি দ্রুত এবং সহজে সুন্দর ডিজাইন তৈরি করতে পারবেন।
Read more
