Develop a webpage for implementing Menus
3 min readJan 20, 2021
LABORATORY OBJECTIVE:
1. Create Menus in webpages.
2. Develop a JavaScript to create the given menus.
Menus
- A website menu is a series of linked items that serve in navigating between the different pages or sections of a website.
- There are several kinds of menus, depending on the website’s content and design.
- The main types of website menus are:
- Classic navigation menu: This most widespread kind of menu is placed in the website’s header, typically as a horizontal list.
- Sticky menu: Also known as a fixed or floating menu, this menu stays put as visitors scroll down the site. These are ideal for long-scrolling pages.
- Dropdown menu: A menu in which a list of additional items opens up once visitors click on — or hover over — one of the menu items. This option is suitable for websites with a lot of content.
- Sidebar menu: A list of menu items that’s located on the left or right side of a webpage.
1) Pulldown Menu
- A web site is normally a contents a collection of web pages. A site visitor navigates from one page to another.
- If a menu of these web pages is created then it becomes easy for a visitor to select appropriate web page.
- The <select> element is used to create a pulldown menu.
- The <option> tags inside the <select> element define the options in the list.
2) Context Menu
- The context menu appears on the web page when user clicks right mouse button on anywhere on the screen.
- For this we have to determine the mouse click position and set the context menu on that position.
Sample Programs
1. Develop a JavaScript program to create simple Pulldown menu
<html>
<head>
<title>Pulldown Menu Example</title>
<script>
function displayPage(ch)
{
page = ch.options[ch.selectedIndex].value
if(page != "")
{
window.location = page
}
}
</script>
</head>
<body>
<form name='form1' action="#">
Select your favourite website:
<select name="mymenu" onchange="displayPage(this)">
<option value="https://www.google.com">Google</option>
<option value="https://www.yahoo.com">Yahoo</option>
<option value="https://www.msbte.org.in">MSBTE</option>
</select>
</form>
</body>
</html>
2. Develop a JavaScript program to create Context Menu
<html>
<head>
<title>Context Menu Example</title>
<style>
.menu {
width: 150px;
border-style: solid;
border-width: 1px;
border-color: grey;
position: fixed;
display: none;
}
.menu-item {
height: 20px;
}
.menu-item:hover {
background-color: #6CB5FF;
cursor: pointer;
}
</style>
<script>
var menuDisplayed = false
var menuBox = null
window.addEventListener("contextmenu", showMenu, false)
window.addEventListener("click", hideMenu, false)
function showMenu()
{
var left = arguments[0].clientX
var top = arguments[0].clientY
menuBox = window.document.querySelector('.menu')
menuBox.style.left = left + 'px'
menuBox.style.top = top + 'px'
menuBox.style.display = 'block'
arguments[0].preventDefault()
menuDisplayed = true
}
function hideMenu()
{
if(menuDisplayed == true) {
menuBox.style.display = 'none'
}
}
</script>
</head>
<body>
</h2>Right click mouse to view Context Menu</h2>
<div class="menu">
<div class="menu-item">Google</div>
<div class="menu-item">Facebook</div>
<hr>
<div class="menu-item">MSN</div>
<div class="menu-item">Bing</div>
</div>
</body>
</html>
Thank you for your support
You can try out my apps available on Google Play Store