Develop a webpage for implementing Menus

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:
  1. Classic navigation menu: This most widespread kind of menu is placed in the website’s header, typically as a horizontal list.
  2. 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.
  3. 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.
  4. 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 a 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>