Foundation ফ্রেমওয়ার্কের মাধ্যমে মেনু তৈরি করা খুবই সহজ এবং এটি মোবাইল-ফার্স্ট ডিজাইন সমর্থন করে। মেনুতে আইকন যুক্ত করা এবং সেগুলোর স্টাইলিং করার জন্য Foundation-এর মধ্যে থাকা CSS ক্লাস এবং JavaScript প্লাগইন ব্যবহার করা যায়। Foundation মূলত Font Awesome বা অন্যান্য আইকন লাইব্রেরি ব্যবহার করে মেনুতে আইকন যুক্ত করতে সহায়তা করে।
১. মেনু তৈরি করা: বেসিক উদাহরণ
প্রথমে, Foundation ব্যবহার করে একটি বেসিক হেডার মেনু তৈরি করি।
<nav class="top-bar" data-topbar>
<ul class="menu">
<li><a href="#">হোম</a></li>
<li><a href="#">সেবা</a></li>
<li><a href="#">আমাদের সম্পর্কে</a></li>
<li><a href="#">যোগাযোগ</a></li>
</ul>
</nav>
এটি একটি সাদামাটা মেনু, যেখানে শুধু সাধারণ লিঙ্ক রয়েছে। এখন এখানে আইকন এবং স্টাইল যোগ করার পদ্ধতি দেখব।
২. আইকন যুক্ত করা: Font Awesome ব্যবহার
Font Awesome হল একটি জনপ্রিয় আইকন লাইব্রেরি, যা সহজেই ওয়েবসাইটে আইকন যোগ করতে সহায়তা করে। Font Awesome ব্যবহার করতে:
১.1. Font Awesome লিঙ্ক যোগ করা:
Font Awesome লাইব্রেরি ওয়েবসাইটে যোগ করতে নিচের কোডটি <head> ট্যাগের মধ্যে যুক্ত করুন:
<!-- Font Awesome CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
১.2. মেনুতে আইকন যোগ করা:
এখন মেনুর লিঙ্কগুলোর সাথে Font Awesome আইকন যুক্ত করা যাবে। উদাহরণস্বরূপ:
<nav class="top-bar" data-topbar>
<ul class="menu">
<li><a href="#"><i class="fas fa-home"></i> হোম</a></li>
<li><a href="#"><i class="fas fa-cogs"></i> সেবা</a></li>
<li><a href="#"><i class="fas fa-info-circle"></i> আমাদের সম্পর্কে</a></li>
<li><a href="#"><i class="fas fa-envelope"></i> যোগাযোগ</a></li>
</ul>
</nav>
এখানে:
<i class="fas fa-home"></i>: Font Awesome আইকন লোড করে, যা প্রতিটি মেনু আইটেমের পাশে একটি আইকন প্রদর্শন করবে।fas: Font Awesome এর "solid" স্টাইলের আইকন।fa-home,fa-cogs,fa-info-circle,fa-envelope: প্রতিটি মেনু আইটেমের জন্য নির্দিষ্ট আইকন।
৩. স্টাইলিং এবং ইন্টারঅ্যাকটিভ মেনু
Foundation-এর সাথে একটি রেসপনসিভ এবং ইন্টারঅ্যাকটিভ মেনু তৈরি করার জন্য JavaScript ব্যবহার করা হয়। এটি একটি ধীরে ধীরে স্লাইডিং মেনু তৈরি করতে সাহায্য করে।
৩.1. মেনুতে স্টাইল যোগ করা
Foundation-এ মেনু স্টাইলিং করার জন্য CSS ব্যবহার করা হয়। উদাহরণস্বরূপ, মেনুর লিঙ্ক এবং আইকনের মাঝে আরও স্পেস বা মার্জিন যুক্ত করা:
nav.top-bar .menu li a {
padding-left: 10px; /* আইকন এবং টেক্সটের মাঝে স্পেস */
font-size: 16px;
}
nav.top-bar .menu i {
margin-right: 8px; /* আইকন এবং টেক্সটের মধ্যে দূরত্ব */
font-size: 20px;
}
৩.2. রেসপনসিভ মেনু তৈরি করা (Mobile View)
Foundation মেনু স্বয়ংক্রিয়ভাবে মোবাইল ভিউতে Hamburger Menu আকারে পরিবর্তিত হয়। আপনি Foundation এর data-topbar অ্যাট্রিবিউট ব্যবহার করে এটি সক্রিয় করতে পারেন:
<nav class="top-bar" data-topbar>
<ul class="menu">
<li><a href="#"><i class="fas fa-home"></i> হোম</a></li>
<li><a href="#"><i class="fas fa-cogs"></i> সেবা</a></li>
<li><a href="#"><i class="fas fa-info-circle"></i> আমাদের সম্পর্কে</a></li>
<li><a href="#"><i class="fas fa-envelope"></i> যোগাযোগ</a></li>
</ul>
</nav>
এই কোডের মাধ্যমে মোবাইল ডিভাইসে একটি হাম্বারগার মেনু প্রদর্শিত হবে, যা ক্লিক করলে মেনু আইটেমগুলো দেখা যাবে।
৪. Foundation মেনুতে বিভিন্ন আইকন এবং স্টাইল
মেনুর আইকন এবং স্টাইল কাস্টমাইজ করতে আরও কিছু বৈশিষ্ট্য যুক্ত করা যায়:
৪.1. হোভার স্টাইলিং
nav.top-bar .menu li a:hover {
color: #0078d4; /* হোভার করার পর আইটেমের রঙ পরিবর্তন */
}
৪.2. এনিমেশন যোগ করা
nav.top-bar .menu li a {
transition: color 0.3s ease-in-out; /* মেনু লিঙ্কের ওপর হোভার করলে অ্যানিমেশন হবে */
}
Foundation ফ্রেমওয়ার্কে মেনুতে আইকন এবং স্টাইল যোগ করা খুবই সহজ। Font Awesome ব্যবহার করে মেনুতে আইকন যোগ করা যায়, এবং CSS এবং JavaScript ব্যবহার করে মেনুর স্টাইল এবং ইন্টারঅ্যাকটিভ ফিচার বাড়ানো যায়। এই পদ্ধতি অনুসরণ করে আপনি দ্রুত একটি রেসপনসিভ এবং সুশৃঙ্খল মেনু তৈরি করতে পারবেন, যা বিভিন্ন ডিভাইসে সুন্দরভাবে কাজ করবে।
Read more
