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