jQueryUI Menu উইজেটটি আপনাকে ওয়েব পেজে সহজেই ড্রপডাউন মেনু তৈরি করার সুবিধা দেয়। এটি ব্যবহারকারীদের জন্য একটি ইন্টারেক্টিভ এবং প্রতিক্রিয়াশীল মেনু প্রদান করে, যা তাদের ওয়েবসাইটে নেভিগেশন সহজ করে। এখানে আমরা আলোচনা করব কিভাবে একটি সাধারণ ড্রপডাউন মেনু তৈরি করতে হয় jQueryUI এর Menu উইজেট ব্যবহার করে।
jQueryUI Menu উইজেট ব্যবহার করার পদক্ষেপ
১. প্রাথমিক সেটআপ
প্রথমে আপনাকে jQuery এবং jQueryUI এর প্রয়োজনীয় CSS এবং JavaScript ফাইল আপনার HTML ফাইলে যুক্ত করতে হবে। নিচের কোডটি ব্যবহার করুন:
<!-- jQuery লোড -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- jQueryUI CSS লোড -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<!-- jQueryUI JavaScript লোড -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
২. HTML মেনু তৈরি করা
এখন, আপনি একটি মেনু তৈরি করবেন যা ড্রপডাউন হিসেবে কাজ করবে। নিচে একটি উদাহরণ দেওয়া হলো:
<ul id="menu">
<li><a href="#">হোম</a></li>
<li><a href="#">সেবা</a>
<ul>
<li><a href="#">ওয়েব ডিজাইন</a></li>
<li><a href="#">অ্যাপ ডেভেলপমেন্ট</a></li>
<li><a href="#">SEO সেবা</a></li>
</ul>
</li>
<li><a href="#">যোগাযোগ</a></li>
</ul>
এই কোডটি একটি সাধারণ unordered list (UL) তৈরি করে, যেখানে প্রধান মেনুর আইটেমগুলো রয়েছে এবং একটি ড্রপডাউন সাবমেনু তৈরি করা হয়েছে।
৩. jQueryUI Menu উইজেট সক্রিয় করা
এখন, আপনি jQuery ব্যবহার করে মেনুতে ড্রপডাউন কার্যকারিতা যোগ করবেন। নিচে এর জন্য প্রয়োজনীয় কোডটি দেওয়া হলো:
$(document).ready(function(){
$("#menu").menu();
});
এই কোডটি #menu আইডি সহ mএনুকে jQueryUI Menu উইজেট ব্যবহার করে ড্রপডাউন মেনু হিসেবে সক্রিয় করবে।
৪. CSS কাস্টমাইজেশন
আপনি যদি মেনুর স্টাইল পরিবর্তন করতে চান, তবে CSS ব্যবহার করে আপনি মেনুর ডিজাইন কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ:
#menu {
list-style: none;
margin: 0;
padding: 0;
}
#menu li {
display: inline-block;
position: relative;
}
#menu li a {
display: block;
padding: 10px 20px;
text-decoration: none;
}
#menu li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
background-color: #f9f9f9;
min-width: 150px;
}
#menu li:hover > ul {
display: block;
}
#menu li ul li {
display: block;
}
এই CSS কোডটি মেনুর দেখানোর ধরন এবং অবস্থান নিয়ন্ত্রণ করবে, যেমন সাবমেনু গুলো শুধু তখনই প্রদর্শিত হবে যখন মাউস হোভার হবে।
৫. কাস্টমাইজড ড্রপডাউন মেনু
আপনি মেনুর আচরণ পরিবর্তন করতে পারেন যেমন:
- মেনুতে ক্লিক করলে ড্রপডাউন খুলবে,
- মেনুর ট্রানজিশন অ্যানিমেশন যোগ করা,
- সাবমেনুর অবস্থান পরিবর্তন করা, ইত্যাদি।
$(document).ready(function(){
$("#menu").menu({
items: "> :not(.ui-widget-header)" // আইটেম নির্বাচন করতে ফিল্টার
});
});
উপসংহার
jQueryUI Menu উইজেট ব্যবহার করে খুব সহজে ড্রপডাউন মেনু তৈরি করা যায়। আপনি HTML, CSS এবং jQuery ব্যবহার করে এটি কাস্টমাইজ করে আপনার ওয়েবসাইটে ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব মেনু তৈরি করতে পারেন। jQueryUI Menu উইজেটটি ড্রপডাউন মেনু, সাবমেনু এবং অন্যান্য মেনু উপাদানগুলোর জন্য কার্যকরী এবং সাশ্রয়ী একটি সমাধান।
Read more
