Scribd
Upload
8 views6 pages

Exp 14

This document describes an experiment on developing web pages that implement menus. It includes code samples for: 1) A dropdown menu that allows selecting a program (e.g. Computer Engineering) and displays the selection. 2) A popup menu code that demonstrates a hoverable dropdown menu with program options like CO, IF, and EJ. 3) A chained select menu code that populates a second select menu with suboptions based on the selection in the first menu. 4) A context menu code example that triggers a custom right-click menu with copy, paste, and cut options on a div element.

Uploaded by

durgeshkhade001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views6 pages

Exp 14

This document describes an experiment on developing web pages that implement menus. It includes code samples for: 1) A dropdown menu that allows selecting a program (e.g. Computer Engineering) and displays the selection. 2) A popup menu code that demonstrates a hoverable dropdown menu with program options like CO, IF, and EJ. 3) A chained select menu code that populates a second select menu with suboptions based on the selection in the first menu. 4) A context menu code example that triggers a custom right-click menu with copy, paste, and cut options on a div element.

Uploaded by

durgeshkhade001
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Course : Client Side Scripting Course Code: 22516

Semester: V Class: CO5IA

Laboratory No: Name of Subject Teacher: Omkar


Birmole
Name of Student: Durgesh Khade Roll ID: 18203A0048

Experiment No. 14

Title of Experiment Develop a Web Page for implementing Menus

Program: Computer Engineering


Program code:
<html>
56
<body>
<p>Select Program from list:</p>
<select id="mySelect" onchange="myFunction()">
<option value="CO">Computer Engg</option>
<option value="IF">Information Technology</option>
<option value="EJ">Electronics and Tele</option>
<option value="CE">Chemical Engg</option>
</select>
<p id="demo"></p>
<script>
function myFunction()
{
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>

Popup Menu Code:


<html>
<head>
<style>
.dropbtn {
background-color: Blue;
color: white;
padding: 16px;
font-size: 16px;
border: none;
57
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: red;
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;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Programs:</button>
<div class="dropdown-content">
<a href="#">CO</a>
58
<a href="#">IF</a>
<a href="#">EJ</a>
</div>
</div>
</body>
</html>

1) Demonstrate the use of chain select menu.


<select id="firstSelect">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>

<select id="secondSelect"></select>

<script>
var secondSelectOptions = {
1: ["Suboption 1a", "Suboption 1b", "Suboption 1c"],
2: ["Suboption 2a", "Suboption 2b", "Suboption 2c"],
3: ["Suboption 3a", "Suboption 3b", "Suboption 3c"]
};

document.getElementById("firstSelect").addEventListener("change", function()
{
var selectedValue = this.value;

document.getElementById("secondSelect").innerHTML = "";

secondSelectOptions[selectedValue].forEach(function(suboption) {
var option = document.createElement("option");
option.value = suboption;
option.textContent = suboption;
document.getElementById("secondSelect").appendChild(option);
});
});
</script>

2) Demonstrate the use of context menu.


<html>
<head>
<title>Context Menu Example</title>
</head>
<body>
<div id="myDiv" contextmenu="myMenu">Right-click me!</div>

<menu id="myMenu">
<li><a href="#">Copy</a></li>
<li><a href="#">Paste</a></li>
<li><a href="#">Cut</a></li>
</menu>
</body>
</html>

You might also like