Scribd
Upload
4 views

Menu Code

Important code of menus in css chapter 6

Uploaded by

rautv3550
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
4 views

Menu Code

Important code of menus in css chapter 6

Uploaded by

rautv3550
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/ 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