Pure.CSS ব্যবহার করে Responsive Navbar এবং Menu Items এর কাস্টমাইজেশন করা খুবই সহজ। Pure.CSS একটি লাইটওয়েট, মোডুলার CSS ফ্রেমওয়ার্ক যা দ্রুত ওয়েব ডেভেলপমেন্টে সহায়তা করে, বিশেষ করে ওয়েবসাইটের Navigation Bar এবং Menu তৈরি করতে। এখানে Responsive Navbar তৈরি করার পদ্ধতি এবং Menu Items এর কাস্টমাইজেশন নিয়ে বিস্তারিত আলোচনা করা হলো।
1. Responsive Navbar with Pure.CSS
Responsive navbar তৈরি করা হয় যাতে এটি মোবাইল ডিভাইসে হ্যামবার্গার মেনু হিসেবে কাজ করে এবং ডেস্কটপ স্ক্রীনে সাধারণভাবে দেখায়। আমরা Pure.CSS এর Flexbox ব্যবহার করে এটি তৈরি করতে পারি, যাতে একটি সিম্পল এবং রেসপনসিভ নেভিগেশন বার পাওয়া যায়।
Responsive Navbar 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">
<title>Responsive Navbar with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Navbar Styles */
.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;
cursor: pointer;
font-size: 24px;
color: white;
}
/* For Mobile Devices */
@media screen and (max-width: 600px) {
.navbar a {
display: none;
width: 100%;
text-align: center;
padding: 10px 0;
}
.navbar .menu-icon {
display: block;
}
.navbar.responsive a {
display: block;
}
}
</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>
ব্যাখ্যা:
- Flexbox Layout:
display: flex;এবংjustify-content: space-between;ব্যবহার করে নেভিগেশন বারটি তৈরি করা হয়েছে, যা আইটেমগুলিকে সঠিকভাবে সজ্জিত রাখবে। - Hamburger Menu: মোবাইল স্ক্রীনে একটি
☰আইকন (Hamburger Menu) দেখানো হচ্ছে, যা ব্যবহারকারী ক্লিক করলে মেনু আইটেমগুলি দেখাবে। - Media Query:
@media screen and (max-width: 600px)দ্বারা মোবাইল স্ক্রীনে নেভিগেশন বারটি একটি একক কলামে সজ্জিত করা হয়। - Responsive Class: JavaScript এর মাধ্যমে
toggleMenu()ফাংশন ব্যবহার করে মেনু আইটেমগুলি টগল করা হয়। যখন ক্লিক করা হয়, তখন মেনু আইটেমগুলো দৃশ্যমান হয়ে যাবে।
2. Customization of Menu Items
Menu Items কাস্টমাইজ করার জন্য, আপনি CSS দিয়ে বিভিন্ন স্টাইলিং ব্যবহার করতে পারেন। এখানে, আমরা hover effects, active states, text formatting, এবং spacing কাস্টমাইজ করব।
Customized Menu Items Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customized Menu Items with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Navbar Styles */
.navbar {
background-color: #333;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Styling Menu Links */
.navbar a {
color: white;
text-decoration: none;
padding: 14px 20px;
text-transform: uppercase;
font-weight: bold;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
}
/* Hover Effect */
.navbar a:hover {
background-color: #4CAF50;
color: white;
}
/* Active Link */
.navbar a.active {
background-color: #45a049;
color: white;
}
/* For Mobile Devices */
.navbar .menu-icon {
display: none;
cursor: pointer;
font-size: 24px;
color: white;
}
/* For Smaller Screens */
@media screen and (max-width: 600px) {
.navbar a {
display: none;
width: 100%;
text-align: center;
padding: 10px 0;
}
.navbar .menu-icon {
display: block;
}
.navbar.responsive a {
display: block;
}
}
</style>
</head>
<body>
<div class="navbar" id="navbar">
<a href="#" class="active">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>
ব্যাখ্যা:
- Text Customization:
text-transform: uppercase;এবংfont-weight: bold;ব্যবহার করে মেনু আইটেমগুলির টেক্সট ফরম্যাট করা হয়েছে, যাতে এটি আরও স্পষ্ট এবং অ্যাট্রাকটিভ হয়। - Hover Effect:
:hoverপসুডো ক্লাস ব্যবহার করে মেনু লিঙ্কের উপর মাউস হোভার করলে ব্যাকগ্রাউন্ড কালার এবং টেক্সট কালার পরিবর্তিত হবে। - Active Link Styling:
activeক্লাস ব্যবহার করে বর্তমান পেজের মেনু আইটেমটিকে আলাদা করে দেখানো হয়েছে। - Responsive Design: Hamburger Menu তৈরি করা হয়েছে মোবাইল স্ক্রীনে, এবং মেনু আইটেমগুলি মোবাইল স্ক্রীনে সোজা লাইনে সজ্জিত হবে।
3. Further Customizations for Menu and Navbar
Menu এবং Navbar কাস্টমাইজ করার জন্য অনেক সুবিধা প্রদান করে, যেমন:
- Dropdown Menus: আপনি নেভিগেশন বারের মধ্যে ড্রপডাউন মেনু তৈরি করতে পারেন।
- Icons in Menu Items: আইকন যুক্ত করতে পারেন মেনু আইটেমগুলির পাশে, যেমন FontAwesome বা Material Icons।
- Fixed Navbar: নেভিগেশন বারটিকে স্ক্রোল করার সময় উপরে ফিক্সড রাখা যায়।
Example of a Fixed Navbar with Icons:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Navbar with Icons</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
/* Fixed Navbar */
.navbar {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
padding: 10px;
z-index: 1000;
}
.navbar a {
color: white;
text-decoration: none;
padding: 14px 20px;
display: inline-block;
transition: background-color 0.3s;
}
.navbar a:hover {
background-color: #4CAF50;
}
/* Icons */
.navbar i {
margin-right: 8px; /* Spacing between icon and text */
}
/* Body content */
body {
margin-top: 60px; /* To ensure content doesn't hide behind fixed navbar */
}
</style>
</head>
<body>
<div class="navbar">
<a href="#"><i class="fas fa-home"></i> Home</a>
<a href="#"><i class="fas fa-info-circle"></i> About</a>
<a href="#"><i class="fas fa-cogs"></i> Services</a>
<a href="#"><i class="fas fa-envelope"></i> Contact</a>
</div>
<div class="content">
<h1>Welcome to the Page</h1>
<p>This is a fixed navigation bar with icons.</p>
</div>
</body>
</html>
ব্যাখ্যা:
- Fixed Navbar:
position: fixed;এবংtop: 0;ব্যবহার করে নেভিগেশন বারটিকে স্ক্রোলের পরেও স্ক্রীনের উপরে ফিক্সড রাখা হয়েছে। - FontAwesome Icons: FontAwesome আইকন ব্যবহার করা হয়েছে মেনু আইটেমগুলির পাশে, যাতে আরও ইন্টারেক্টিভ এবং গ্রাফিক্যাল লুক পাওয়া যায়।
Pure.CSS এর সাহায্যে আপনি একটি Responsive Navbar এবং Menu Items তৈরি করতে পারেন এবং সেগুলিকে কাস্টমাইজ করতে পারেন সহজেই। Flexbox এবং Media Queries ব্যবহার করে আপনি মোবাইল এবং ডেস্কটপ উভয় স্ক্রীনে সুন্দরভাবে কাজ করা নেভিগেশন বার তৈরি করতে পারবেন। আপনি মেনু আইটেমগুলির উপর Hover Effects, Active States, Icons, এবং Fixed Navigation যোগ করতে পারেন আপনার ওয়েবসাইটের ইন্টারফেস আরও আকর্ষণীয় এবং ইউজার-ফ্রেন্ডলি করার জন্য।
Content added By
Read more
