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-এর গ্রিড সিস্টেম এবং স্টাইলিং ক্লাসগুলো ব্যবহার করে, আপনি দ্রুত এবং সহজে সুন্দর ডিজাইন তৈরি করতে পারবেন।
Content added By
Read more
