<!-- (a) Write a JavaScript that demonstrates use of floating menu alongwith respective HTML script.
-->
<!-- floating menu -->
<!-- <!DOCTYPE html>
<html>
<head>
<title>Floating Menu Example</title>
<script>
// No specific JavaScript needed for a basic floating menu
</script>
</head>
<body>
<div>
<h3>Menu</h3>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</div>
<div id="section1" style="margin-top: 100px;">Content for Section 1</div>
<div id="section2" style="margin-top: 500px;">Content for Section 2</div>
<div id="section3" style="margin-top: 500px;">Content for Section 3</div>
</body>
</html>
-->
<!-- Chain menu -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chain Select Menu Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
select {
padding: 10px;
font-size: 16px;
margin-top: 10px;
</style>
</head>
<body>
<h2>Select Your State and District</h2>
<label for="stateSelect">Select State:</label>
<select id="stateSelect" onchange="updateDistricts()">
<option value="">--Select a state--</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Gujarat">Gujarat</option>
<option value="Karnataka">Karnataka</option>
</select>
<label for="districtSelect">Select District:</label>
<select id="districtSelect">
<option value="">--Select a district--</option>
</select>
<script>
// Object to hold states and their corresponding districts
const stateDistricts = {
Maharashtra: ["Mumbai", "Pune", "Nagpur", "Nashik"],
Gujarat: ["Ahmedabad", "Surat", "Vadodara", "Rajkot"],
Karnataka: ["Bengaluru", "Mysuru", "Mangaluru", "Hubli"]
};
// Function to update districts based on selected state
function updateDistricts() {
const stateSelect = document.getElementById("stateSelect");
const districtSelect = document.getElementById("districtSelect");
const selectedState = stateSelect.value;
// Clear previous districts
districtSelect.innerHTML = '<option value="">--Select a district--</option>';
// Check if a valid state is selected
if (selectedState) {
const districts = stateDistricts[selectedState];
// Populate district dropdown with corresponding districts
districts.forEach(function(district) {
const option = document.createElement("option");
option.value = district;
option.textContent = district;
districtSelect.appendChild(option);
});
</script>
</body>
</html> -->
<!-- Tab menu -->
<!-- <!DOCTYPE html>
<html>
<head>
<title>Simple Tab Menu</title>
<script>
// Function to show the content of the clicked tab and hide others
function openTab(tabName) {
var tabcontents = document.getElementsByClassName("tabcontent");
for (var i = 0; i < tabcontents.length; i++) {
tabcontents[i].style.display = "none"; // Hide all content
document.getElementById(tabName).style.display = "block"; // Show clicked tab's content
</script>
</head>
<body>
<h2>Simple Tab Menu Example</h2>
<button onclick="openTab('Tab1')">Tab 1</button>
<button onclick="openTab('Tab2')">Tab 2</button>
<button onclick="openTab('Tab3')">Tab 3</button>
<br><br>
<div id="Tab1" class="tabcontent">
<h3>Tab 1 Content</h3>
<p>This is the content of Tab 1.</p>
</div>
<div id="Tab2" class="tabcontent" style="display:none">
<h3>Tab 2 Content</h3>
<p>This is the content of Tab 2.</p>
</div>
<div id="Tab3" class="tabcontent" style="display:none">
<h3>Tab 3 Content</h3>
<p>This is the content of Tab 3.</p>
</div>
<script>
// Show Tab 1 by default
document.getElementById("Tab1").style.display = "block";
</script>
</body>
</html>
-->
<!-- popup menu -->
<!DOCTYPE html><!--
<html>
<head>
<style>
/* Menu is hidden by default */
.popup-menu {
display: none;
position: absolute;
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 10px;
</style>
<script>
// Function to show the pop-up menu
function showMenu(event) {
event.preventDefault(); // Stop the default action (right-click menu)
var menu = document.getElementById("menu");
menu.style.display = "block";
menu.style.left = event.pageX + "px";
menu.style.top = event.pageY + "px";
}
// Function to hide the pop-up menu
function hideMenu() {
document.getElementById("menu").style.display = "none";
// Hide the menu when clicking anywhere else
document.onclick = hideMenu;
</script>
</head>
<body oncontextmenu="showMenu(event)">
<h2>Right-click anywhere on this page to see the pop-up menu.</h2>
<div id="menu" class="popup-menu">
<p>Option 1</p>
<p>Option 2</p>
<p>Option 3</p>
</div>
</body>
</html>
-->
<!-- sliding menu -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sliding Menu Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
/* Style for the sliding menu */
.menu {
height: 100%; /* Full height */
width: 250px; /* Width of the menu */
position: fixed; /* Fixed position */
left: -250px; /* Hide off the screen */
top: 0;
background-color: #333; /* Dark background */
transition: 0.3s; /* Smooth sliding effect */
padding-top: 60px; /* Space at the top */
/* Links in the menu */
.menu a {
padding: 10px 15px; /* Space around links */
text-decoration: none; /* No underline */
font-size: 20px; /* Font size */
color: white; /* White text */
display: block; /* Block display for links */
transition: 0.3s; /* Smooth hover effect */
}
/* Change background color when hovering over links */
.menu a:hover {
background-color: #575757; /* Darker background on hover */
/* Style for the hamburger button */
.hamburger {
font-size: 30px; /* Bigger text */
cursor: pointer; /* Pointer on hover */
padding: 15px; /* Space around the button */
background-color: #333; /* Dark background */
color: white; /* White text */
border: none; /* No border */
/* Show the menu when it is active */
.menu.active {
left: 0; /* Move the menu into view */
</style>
</head>
<body>
<button class="hamburger" onclick="toggleMenu()">☰</button>
<div class="menu" id="menu">
<a href="http://www.msbte.org.in">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
<script>
// Function to open and close the menu
function toggleMenu() {
var menu = document.getElementById("menu");
menu.classList.toggle("active"); // Show or hide the menu
</script>
</body>
</html>
-->
Highlighted menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highlighted Menu</title>
<style>
/* Basic styling for the menu */
ul {
list-style-type: none;
padding: 0;
li {
padding: 10px;
background-color: #f0f0f0;
margin-bottom: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
/* Highlighted style on hover */
li:hover {
background-color: #3498db;
color: white;
</style>
</head>
<body>
<h2>Menu</h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</body>
</html>
Context menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Context Menu</title>
<style>
/* Basic styling for the custom context menu */
#contextMenu {
display: none;
position: absolute;
background-color: #ffffff;
border: 1px solid #ccc;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
#contextMenu ul {
list-style-type: none;
margin: 0;
padding: 0;
#contextMenu ul li {
padding: 10px;
cursor: pointer;
background-color: #fff;
#contextMenu ul li:hover {
background-color: #3498db;
color: white;
}
</style>
</head>
<body>
<h2>Right-click anywhere on this page to see the custom context menu</h2>
<!-- Custom context menu -->
<div id="contextMenu">
<ul>
<li onclick="alert('Option 1 clicked')">Option 1</li>
<li onclick="alert('Option 2 clicked')">Option 2</li>
<li onclick="alert('Option 3 clicked')">Option 3</li>
</ul>
</div>
<script>
// Get reference to the context menu
const contextMenu = document.getElementById("contextMenu");
// Function to show the custom context menu
document.addEventListener("contextmenu", function(event) {
event.preventDefault(); // Prevent default right-click menu
contextMenu.style.display = "block";
contextMenu.style.left = event.pageX + "px";
contextMenu.style.top = event.pageY + "px";
});
// Function to hide the context menu when clicking elsewhere
document.addEventListener("click", function() {
contextMenu.style.display = "none";
});
</script>
</body>
</html>
Scrollable menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrollable Menu</title>
<style>
/* Basic styling for the menu */
ul {
list-style-type: none;
padding: 0;
margin: 0;
width: 200px;
border: 1px solid #ccc;
/* Menu container */
.menu {
max-height: 150px; /* Limit the height */
overflow-y: auto; /* Enable vertical scrolling */
border: 1px solid #ccc;
}
/* Styling for individual menu items */
li {
padding: 10px;
background-color: #f0f0f0;
margin-bottom: 2px;
cursor: pointer;
transition: background-color 0.3s ease;
/* Highlight menu item on hover */
li:hover {
background-color: #3498db;
color: white;
</style>
</head>
<body>
<h2>Scrollable Menu Example</h2>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>Blog</li>
<li>Portfolio</li>
<li>Testimonials</li>
<li>Careers</li>
<li>Support</li>
<li>Terms of Service</li>
</ul>
</div>
</body>
</html>
SIDE bar menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sidebar Menu</title>
<style>
/* Style for the body and content */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
.content {
margin-left: 250px; /* Shift the content to make space for the sidebar */
padding: 20px;
transition: margin-left 0.3s; /* Smooth transition when showing/hiding the sidebar */
/* Sidebar container */
.sidebar {
height: 100%; /* Full height */
width: 250px; /* Sidebar width */
position: fixed; /* Make it stick to the left side */
top: 0;
left: 0;
background-color: #333;
overflow-x: hidden; /* Disable horizontal scrolling */
padding-top: 20px;
transition: width 0.3s; /* Smooth transition when expanding/collapsing */
/* Sidebar links */
.sidebar a {
padding: 15px 20px;
text-decoration: none;
font-size: 18px;
color: white;
display: block;
transition: background-color 0.3s;
/* Highlight the links on hover */
.sidebar a:hover {
background-color: #575757;
/* Toggle button for the sidebar */
.toggle-btn {
position: absolute;
top: 20px;
left: 260px;
font-size: 20px;
cursor: pointer;
color: #333;
background-color: #ddd;
padding: 10px;
border-radius: 5px;
transition: left 0.3s;
/* Adjust styles when sidebar is collapsed */
.collapsed {
width: 0;
.collapsed + .content {
margin-left: 0;
.collapsed + .content + .toggle-btn {
left: 10px;
</style>
</head>
<body>
<!-- Sidebar menu -->
<div class="sidebar" id="sidebar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
<a href="#">Blog</a>
</div>
<!-- Page content -->
<div class="content">
<h2>Sidebar Menu Example</h2>
<p>This is a simple example of a sidebar menu.</p>
<p>Click the toggle button to open or close the sidebar.</p>
</div>
<!-- Toggle button -->
<div class="toggle-btn" id="toggleBtn">☰</div>
<script>
// JavaScript to toggle the sidebar
const sidebar = document.getElementById('sidebar');
const toggleBtn = document.getElementById('toggleBtn');
toggleBtn.addEventListener('click', function () {
sidebar.classList.toggle('collapsed');
});
</script>
</body>
</html>
