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-এর সিম্পল এবং মডুলার ফিচারগুলি এটি একটি শক্তিশালী টুল বানায় ওয়েব ডেভেলপমেন্টের জন্য।
Read more
