جدول محتوایی
آموزش ساخت منوی کشویی با جاوا اسکریپت
قبل از شروع ساخت یک منوی کشویی با جاوا اسکریپت، مهم است که بدانید لیست کشویی چیست. لیست کشویی یک منوی قابل تغییر است که به کاربر اجازه می دهد یک گزینه را از بین چندین گزینه انتخاب کند. گزینه های این لیست در کدنویسی تعریف شده اند که با یک تابع مرتبط است. وقتی روی این گزینه کلیک یا انتخاب می‌کنید، آن عملکرد فعال می‌شود و شروع به کار می‌کند.
شما اغلب در فرم های ثبت نام یک لیست کشویی برای انتخاب ایالت یا شهر از منوی کشویی مشاهده کرده اید. یک لیست کشویی به ما این امکان را می دهد که فقط یکی از موارد را انتخاب کنیم.
پیش از ادامه ی مقاله ، در صورت نیاز به خرید سرور مجازی ایران به سایت ایرانیکاسرور مراجعه کرده و از پلن های فوق العاده با قیمت های عالی دیدن کنید.
نکات مهم برای ایجاد یک لیست کشویی
- برگه <select> همراه با تب <option> برای ایجاد لیست کشویی ساده در HTML استفاده می شود. پس از آن جاوا اسکریپت به انجام عملیات به این لیست کمک می کند.
- به غیر از این، می توانید از تب نگهدارنده <div> برای ایجاد لیست کشویی استفاده کنید. موارد کشویی و پیوندهای داخل آن را اضافه کنید. در این مقاله هر روش را با یک مثال مورد بحث قرار خواهیم داد.
- می توانید از هر عنصری مانند <button>، <a> یا <p> برای باز کردن منوی کشویی استفاده کنید.
برای ایجاد یک لیست کشویی با استفاده از روش های مختلف به مثال های زیر مراجعه کنید.
لیست کشویی ساده با استفاده از تب <select>
این یک مثال ساده از ایجاد یک لیست کشویی ساده و آسان بدون استفاده از کد جاوا اسکریپت پیچیده و CSS است:
<html>
<head>
<title>dropdown menu using select tab</title>
</head>
<script>
function favTutorial() {
var mylist = document.getElementById("myList");
document.getElementById("favourite").value = mylist.options[mylist.selectedIndex].text;
}
</script>
<body>
<form>
<b> Select you favourite tutorial site using dropdown list </b>
<select id = "myList" onchange = "favTutorial()" >
<option> ---Choose tutorial--- </option>
<option> w3schools </option>
<option> Javatpoint </option>
<option> tutorialspoint </option>
<option> geeksforgeeks </option>
</select>
<p> Your selected tutorial site is:
<input type = "text" id = "favourite" size = "20" </p>
</form>
</body>
</html>
خروجی:
با اجرای کد بالا، پاسخی مشابه اسکرین شات داده شده دریافت خواهید کرد. این شامل یک منوی کشویی با لیستی از سایت های آموزشی است.
با کلیک بر روی آن، یک مورد را از لیست کشویی انتخاب کنید:
در تصویر زیر مشاهده کنید که مورد انتخاب شده در قسمت خروجی نمایش داده شده است:
یک لیست کشویی را می توان با استفاده از روش های دیگر هم ایجاد کرد. چند نمونه دیگر را در ادامه با هم بررسی میکنیم.
لیست کشویی با استفاده از دکمه و تب div
در این مثال، یک لیست کشویی با دکمه ای ایجاد می کنیم که فهرستی از آیتم ها را به عنوان منوی کشویی دارد:
<html>
<head>
<title>dropdown menu using button</title>
</head>
<style>
/* set the position of dropdown */
.dropdown {
position: relative;
display: inline-block;
}
/* set the size and position of button on web */
.button {
padding: 10px 30px;
font-size: 15px;
}
/* provide css to background of list items */
#list-items {
display: none;
position: absolute;
background-color: white;
min-width: 185px;
}
/* provide css to list items */
#list-items a {
display: block;
font-size: 18px;
background-color: #ddd;
color: black;
text-decoration: none;
padding: 10px;
}
</style>
<script>
//show and hide dropdown list item on button click
function show_hide() {
var click = document.getElementById("list-items");
if(click.style.display ==="none") {
click.style.display ="block";
} else {
click.style.display ="none";
}
}
</script>
<body>
<div class="dropdown">
<button onclick="show_hide()" class="button">Choose Language</button>
<center>
<!-- dropdown list items will show when we click the drop button -->
<div id="list-items">
<a href="#"> Hindi </a>
<a href="#"> English </a>
<a href="#"> Spanish </a>
<a href="#"> Chinese </a>
<a href="#"> Japanese </a>
</div>
</center>
</body>
</html>
خروجی
با کلیک بر روی این دکمه کشویی، لیستی از موارد را دریافت خواهید کرد که باید یک مورد را از آن لیست انتخاب کنید. اسکرین شات زیر را ببینید:
بر روی دکمه Dropdown List کلیک کنید و لیست را مخفی کنید:
منوی کشویی چندگانه
در مثال های بالا، ما یک لیست کشویی ساده ایجاد کردیم. اکنون فرمی با منوی کشویی چندگانه متشکل از لیست‌های مختلف آموزش موضوعات فنی آنلاین مانند C، C++، PHP، MySQL، و جاوا ایجاد میکنیم که در چند دسته طبقه‌بندی شده‌اند.
هنگامی که کاربر روی یک دکمه کشویی خاص کلیک می کند، لیست کشویی مربوطه برای او باز می شود:
<html>
<head>
<style>
.dropbtn {
background-color: green;
color: white;
padding: 14px;
font-size: 16px;
cursor: pointer;
}
.dropbtn:hover {
background-color: brown;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 140px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
</style>
</head>
<body>
<h2>List of tutorials using Dropdown menu</h2>
<p>Click on the button to open the tutorial dropdown menu.</p>
<div class="dropdown">
<button onclick="programmingList()" class="dropbtn">Programming</button>
<div id="myDropdown1" class="dropdown-content">
<a href="#java" onclick="java()">Java</a>
<a href="#python" onclick="python()">Python</a>
<a href="#c++" onclick="cpp()">C++</a>
<a href="#c" onclick="c()">C</a>
</div>
</div>
<div class="dropdown">
<button onclick="databaseList()" class="dropbtn">Database</button>
<div id="myDropdown2" class="dropdown-content">
<a href="#mysql" onclick="mysql()">MySQL</a>
<a href="#mdb" onclick="mDB()">MongoDB</a>
<a href="#cass" onclick="cassandra()">Cassandra</a>
</div>
</div>
<div class="dropdown">
<button onclick="WebTechList()" class="dropbtn">Web Technology</button>
<div id="myDropdown3" class="dropdown-content">
<a href="#php" onclick="php()">PHP</a>
<a href="#css" onclick="css()">CSS</a>
<a href="#js" onclick="js()">JavaScript</a>
</div>
</div>
<script>
/* methods to hide and show the dropdown content */
function programmingList() {
document.getElementById("myDropdown1").classList.toggle("show");
}
function databaseList() {
document.getElementById("myDropdown2").classList.toggle("show");
}
function WebTechList() {
document.getElementById("myDropdown3").classList.toggle("show");
}
/* methods to redirect to tutorial page that user will select from dropdown list */
function java() {
window.location.replace("https://www.javatpoint.com/java-tutorial");
}
function python() {
window.location.replace("https://www.javatpoint.com/python-tutorial");
}
function cpp() {
window.location.replace("https://www.javatpoint.com/cpp-tutorial");
}
function c() {
window.location.replace("https://www.javatpoint.com/c-programming-language-tutorial");
}
function mysql() {
window.location.replace("https://www.javatpoint.com/mysql-tutorial");
}
function mDB() {
window.location.replace("https://www.javatpoint.com/mongodb-tutorial");
}
function cassandra() {
window.location.replace("https://www.javatpoint.com/cassandra-tutorial");
}
function php() {
window.location.replace("https://www.javatpoint.com/php-tutorial");
}
function css() {
window.location.replace("https://www.javatpoint.com/css-tutorial");
}
function js() {
window.location.replace("https://www.javatpoint.com/javascript-tutorial");
}
// Close the dropdown menu if the user clicks outside of it
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');
}
}
}
}
</script>
</body>
</html>
خروجی
با اجرای کد بالا، یک فرم با سه دکمه کشویی ظاهر می شود. هر دکمه کشویی فهرستی از موارد را شامل می شود:
برای مشاهده لیست موارد، روی هر یک از دکمه های کشویی کلیک کنید:
اجازه دهید تحت آموزش پایگاه داده بر روی MongoDB کلیک کنید، آن شما را به آموزش javatpoint MongoDB ما هدایت می کند. خروجی زیر را ببینید:
توجه: اگر خارج از پنجره کشویی کلیک کنید، لیست کشویی ناپدید می شود.
و کار ما تمومه ! در این مقاله به ایجاد یا ساخت منوی کشویی با جاوا اسکریپت به سه روش مختلف پرداختیم. امیدواریم از این مقاله نهایت استفاده را ببرید. موفق باشید!
عالی