Scribd
Upload
3 views

Menu Code

Important code of menus in css chapter 6

Uploaded by

rautv3550
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Menu Code

Important code of menus in css chapter 6

Uploaded by

rautv3550
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

<!-- (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>

You might also like