কিভাবে তৈরি করা: ক্লিক করা যাওয়া ড্রপডাউন মেনু
কিভাবে CSS এবং JavaScript দিয়ে ক্লিক করা যাওয়া ড্রপডাউন মেনু তৈরি করতে শিখুন。
ড্রপডাউন মেনু
ড্রপডাউন মেনু একটি সুবিধাজনক মেনু, যা ব্যবহারকারীকে প্রদত্ত তালিকা থেকে একটি মান নির্বাচন করতে অনুমতি দেয়:
ক্লিক করা যাওয়া ড্রপডাউন মেনু তৈরি করুন
ব্যবহারকারী বান্টন বাটন ক্লিক করলে দেখা যাওয়া একটি ড্রপডাউন মেনু তৈরি করুন。
প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন:
<div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <a href="#">লিঙ্ক 1</a> <a href="#">লিঙ্ক 2</a> <a href="#">লিঙ্ক 3</a> </div> </div>
উদাহরণ ব্যাখ্যা:
ড্রপডাউন মেনু খুলতে কোনও এলিমেন্ট ব্যবহার করা যেতে পারে, যেমন <button>、<a> বা <p> এলিমেন্ট。
ড্রপডাউন মেনু তৈরি করতে কনটেনার এলিমেন্ট (যেমন <div>) ব্যবহার করুন এবং তার মধ্যে ড্রপডাউন মেনুর লিঙ্ক যোগ করুন。
বাটন এবং <div> এলিমেন্টকে <div> এর ভেতরে রাখুন, যাতে ড্রপডাউন মেনুকে CSS-র সঠিকভাবে অবস্থান দেওয়া যায়。
দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করুন:
/* ড্রপডাউন বাটন */ .dropbtn { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* মাউস হট এবং ফোকাস হলে ড্রপডাউন বাটন */ .dropbtn:hover, .dropbtn:focus { background-color: #2980B9; } /* কনটেনার <div> - ড্রপডাউন মেনুর কনটেন্ট অবস্থান নির্ধারণ করার জন্য */ .dropdown { position: relative; display: inline-block; } /* ড্রপডাউন মেনুর কনটেন্ট (ডিফল্টে লুকিয়ে থাকা) */ .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* ড্রপডাউন মেনুর ভিতরের লিঙ্ক */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* মাউস হট হলে ড্রপডাউন মেনুর লিঙ্কের রঙ পরিবর্তন করা হয় */ .dropdown-content a:hover {background-color: #ddd;} /* ড্রপডাউন মেনু দেখান (ব্যবহারকারী ড্রপডাউন বটন ক্লিক করলে, JS দ্বারা এই ট্যাগটি .dropdown-content কনটেনারে যোগ করা হয়) */ .show {display:block;}
উদাহরণ ব্যাখ্যা:
আমরা ড্রপডাউন বটনের ব্যাকগ্রাউন্ড কালার, প্রতিবেশ স্পেস, হভার ইফেক্ট ইত্যাদির শৈলী নির্ধারণ করেছি。
.dropdown
ক্লাস ব্যবহার করে position:relative
যখন আমরা ড্রপডাউন মেনুর বিষয়বস্তুকে ড্রপডাউন বটনের নিচে রাখতে চাই (যুক্ত করে) position:absolute
), এটা প্রয়োজনীয়।
.dropdown-content
ক্লাস একটি প্রকৃত ড্রপডাউন মেনু ধারণ করে।এটি ডিফল্টভাবে লুকিয়ে থাকে এবং মাউস অবস্থান করলে দেখা দেয় (দৃশ্যমান)।অতিরিক্ত তথ্য: ন্যান্সওয়াইডথ হিসাবে 160px সর্বনিম্ন পড়াশোনা করা হয়।তাই আপনি এই মানটি পরিবর্তন করতে পারেন।টিপ: আপনি যদি চান ড্রপডাউন মেনুর বিষয়বস্তুর প্রস্থ ড্রপডাউন বটনের সমান হওয়া, তবে প্রস্থ 100% হিসাবে সেট করতে পারেন (এবং ছোট স্ক্রিনের জন্য) overflow:auto
স্ক্রোল করতে সক্ষম করতে
আমরা কোনও সীমানা ব্যবহার করছি না, এবং box-shadow
এটিকে 'কার্ড' হিসাবে দেখাতে করতে, আমরা এটা ব্যবহার করি।আমরা এছাড়াও z-index
ড্রপডাউন মেনুকে অন্য উপাদানের আগে রাখুন
তৃতীয় পদক্ষেপ - জেইএস (JavaScript) যোগ করুন
/* ব্যবহারকারী বটন ক্লিক করলে, ড্রপডাউন মেনুর হিড এবং শোও অবস্থা ট্যাগ চেঞ্জ করুন */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // যদি ব্যবহারকারী ড্রপডাউন মেনুর বাইরের জায়গায় ক্লিক করেন, তবে ড্রপডাউন মেনু বন্ধ করুন window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } }
ডানদিকের সামান্য ড্রপডাউন মেনু
নেভিগেশন বারের ড্রপডাউন মেনু
সার্চ (সিলেকশন) ড্রপডাউন মেনু
相关页面
教程:如何可悬停的下拉菜单