Mega Menu একটি বৃহৎ এবং বিস্তারিত ড্রপডাউন মেনু, যা একাধিক সেকশন এবং সাব-সেকশন প্রদর্শন করতে ব্যবহৃত হয়। সাধারণত ওয়েবসাইটের হেডারে প্রধান বিভাগগুলির জন্য একটি মেগা মেনু তৈরি করা হয়, যা ব্যবহারকারীদের জন্য সহজে নেভিগেশন করতে সাহায্য করে। Foundation ফ্রেমওয়ার্কে মেগা মেনু তৈরি করা খুবই সহজ, কারণ এটি অনেক প্রস্তুত-পরিচিত CSS ক্লাস এবং JavaScript প্লাগইন প্রদান করে, যা মেনু ডিজাইন করতে সহায়তা করে।
এখানে Foundation এর মাধ্যমে একটি মেগা মেনু তৈরি করার প্রক্রিয়া বিস্তারিতভাবে ব্যাখ্যা করা হলো।
Foundation Mega Menu তৈরি করার ধাপ
১. Basic Structure Setup
প্রথমেই একটি সাধারণ মেনু লেআউট তৈরি করুন। আপনি <ul> এবং <li> ট্যাগ ব্যবহার করে প্রধান মেনু এবং সাব-মেনু তৈরি করতে পারেন।
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">My Website</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="has-dropdown not-click">
<a href="#">Main Menu Item</a>
<ul class="dropdown">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
<li><a href="#">Another Item</a></li>
</ul>
</section>
</nav>
২. Mega Menu Structure (with Nested Dropdown)
মেগা মেনুর জন্য একটি বড় ড্রপডাউন মেনু তৈরি করতে, নিচের কোডের মতো একটি nested dropdown ব্যবহার করুন।
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">My Website</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="has-dropdown mega-dropdown">
<a href="#">Main Menu</a>
<ul class="dropdown mega-menu">
<li class="large-4 columns">
<h5>Section 1</h5>
<ul class="no-bullet">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
<li class="large-4 columns">
<h5>Section 2</h5>
<ul class="no-bullet">
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
</ul>
</li>
<li class="large-4 columns">
<h5>Section 3</h5>
<ul class="no-bullet">
<li><a href="#">Submenu 7</a></li>
<li><a href="#">Submenu 8</a></li>
<li><a href="#">Submenu 9</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Another Item</a></li>
</ul>
</section>
</nav>
এখানে:
mega-dropdown: মেগা মেনুর জন্য একটি কাস্টম ক্লাস ব্যবহার করা হয়েছে, যা CSS দিয়ে কাস্টমাইজ করা হবে।large-4 columns: Foundation-এর গ্রিড সিস্টেম ব্যবহার করে মেগা মেনুর প্রতিটি সেকশনকে ৪টি কলামে ভাগ করা হয়েছে, যার ফলে প্রতিটি সেকশন সমান আকারে প্রদর্শিত হবে।
৩. CSS Customization for Mega Menu
মেগা মেনুর ডিজাইন কাস্টমাইজ করতে কিছু CSS প্রয়োগ করা হয়, যেমন মেনুর আকার, ব্যাকগ্রাউন্ড রঙ এবং হোভার ইফেক্ট।
.mega-menu {
display: flex;
justify-content: space-between;
background-color: #f7f7f7;
padding: 20px;
}
.mega-menu > li {
padding: 0;
}
.mega-menu h5 {
font-size: 1.2em;
color: #333;
}
.mega-menu a {
text-decoration: none;
color: #333;
padding: 5px 0;
display: block;
}
.mega-menu a:hover {
background-color: #e5e5e5;
}
এখানে:
display: flex;: Flexbox ব্যবহার করে মেগা মেনু সেকশনগুলিকে সমানভাবে প্রসারিত করা হয়েছে।background-color: মেনুর ব্যাকগ্রাউন্ড রঙ নির্ধারণ করা হয়েছে।a:hover: হোভার ইফেক্ট যোগ করা হয়েছে, যাতে ইউজার মেনুর আইটেমগুলোর উপর হোভার করলে তাদের রঙ পরিবর্তিত হয়।
৪. Foundation JavaScript for Dropdown
Foundation এ ড্রপডাউন মেনুর জন্য JavaScript সাপোর্ট ব্যবহার করা হয়। সাধারণত topbar বা dropdown ক্লাসগুলির জন্য JavaScript ব্যবহৃত হয়। Foundation JavaScript ফাইলকে যুক্ত করে, ড্রপডাউন মেনু স্বয়ংক্রিয়ভাবে কার্যকর হবে।
Foundation JavaScript ইন্টিগ্রেট করার জন্য আপনার HTML ফাইলে নিচের স্ক্রিপ্টটি যুক্ত করুন:
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
এটি Foundation এর JavaScript প্লাগইন চালু করবে, যা ড্রপডাউন এবং অন্যান্য উপাদানকে সক্রিয় করবে।
Foundation ফ্রেমওয়ার্কে Mega Menu তৈরি করা একটি সহজ প্রক্রিয়া, যা CSS গ্রিড এবং JavaScript প্লাগইন ব্যবহার করে সমন্বিতভাবে কাজ করে। Foundation এর গ্রিড সিস্টেম এবং dropdown ফিচারের মাধ্যমে আপনি একটি দৃষ্টিনন্দন এবং রেসপনসিভ মেগা মেনু তৈরি করতে পারবেন, যা ব্যবহারকারীদের জন্য নেভিগেশনকে আরও সহজ এবং ইন্টারঅ্যাকটিভ করে তোলে। Foundation এর সাথে আপনি মেনুর আকার, রঙ, ফন্ট এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করে আপনার ওয়েবসাইটের ডিজাইন উন্নত করতে পারেন।
Read more
