Menus 111

6.
4 Menus
The menu elements represents a group of commands that a user

can perform or activate. Menu may contain multiple choices to
select user can choose one or more at a time depending on type
of menu.
6.4.1 Creating Pull Down Menu
A website is a collection of multiple webpages. So, there

should be a proper navigation to visit these pages. The menu
is used to navigate through the website. Menu contains the
various items which perform related operations such as
opening a new webpage, displaying other related information,
etc. There are various types of menus are available, such as
pulldown menu, floating menu, chain select menu, tab menu,
sliding menu, pop up menu, scrollable menu, etc. The
pulldown menu can be created by using <select> tag of
HTML. The <option> tag is used to define the options of the
pulldown menu. The <option> tag written inside <select> tag.
Example:-
<head>
<title>Pull Down Menu</title>
<script>
function GetSelectedItem()
{
var ele=document.getElementById("select");
var str=ele.options[ele.selectedIndex].value;
alert("The Selected value is:" +str);
}
</script>
<body>
<select id="select">
<option value="c">C</option>
<option value="c++">C++</option>
<option value="java">JAVA</option>
<option value="javascript">JAVASCRIPT</option>
</select>
<input type="button" onclick="GetSelectedItem()" value="Get Selected

Item">
</body>
</html>
Output:-
6.4.2 Dynamically changing the menu

The item of the menu can be changed dynamically depending on
any action taken place. There is two pulldown menu. One
contains the class name and other contains the subject. So, on
the selection of first menu the other menu item is changed
dynamically.
Example:-
<html>
<head>
<title>Dynamically changing the menu</title>
<script>
sy_subjects=new Array("OOP","CGR","DBMS","DSU","DTE");
ty_subjects=new Array("AJP","CSS","STE","EST","OSY");
function myfunction()
{
var select=document.getElementById("student");
var s=select.options.length;
for(i=s;i>=0;i--)
{
select.options.remove(i);
}
var x=document.getElementById("myselect").value;
if(x=="syco")
{
for(i=0;i<sy_subjects.length;i++)
{
opt=document.createElement("option");
opt.value=sy_subjects[i];
opt.textContent=sy_subjects[i];
select.appendChild(opt);
}
}
else if(x=="tyco")
{
for(i=0;i<ty_subjects.length;i++)
{
opt.value=ty_subjects[i];
opt.textContent=ty_subjects[i];
}
}
else if(x=="class")
{
opt.value="class";
opt.textContent="Subjects";
}
}
</script>
</head>
<body>
<select id="myselect" onchange="myfunction(this)">
<option value="class">Class</option>
<option value="syco">SYCO</option>
<option value="tyco">TYCO</option>
</select>
<select id="student" name="student">
<option value="0">Subjects</option>
</select>
</body>
</html>
Output:-
6.4.3 Validating Menu Selection
While filling information, user can forget to select an option in
menu. In such case, the incomplete information should not be
send to the server. To make fields compulsory to fill, we use
filed validation. We can validate menu selection by using
JavaScript. JavaScript is used for Client Side Validations. We
can check whether the input is correct or not. If input is
Incorrect then the error message can be generated and displayed
to the screen. By using JavaScript, the user gets prompt to fill
the proper information.
Example:-
<html>
<head>
<title>Validating Menu Selection</title>
<script>
{
var select=document.getElementById("myselect");
var x=document.getElementById("myselect").value;
if(x =="Select Subjects")
{
alert("Plese Select subjects.");
}
else
{
document.getElementById("demo").innerHTML="You slected:"+x;
}
}
</script>
</head>
<body>
<select id="myselect">
<option value="Select Subjects">Select Subject</option>
<option value="oop">OOP</option>
<option value="Cgr">CGR</option>
<option value="dbms">DBMS</option>
<option value="dsu">DSU</option>
<option value="dte">DTE</option>
</select>
<br>
<input type="button" value="Submit" onclick="myfunction()">
<br>
<p id="demo"></p>
</body>
</html>
Output:-
6.4.4 Floating Menu
When user scrolls the webpage, sometimes we need a menu to
stick to the screen for particular operation. The menu which is
fixed while scrolling the webpage is known as floating menu. A
floating menu can be created by setting the style position of that
menu fixed. Following example shows the floating menu on
webpage.
Example:-
<html>
<head>
<title>Floating Menu</title>
<script>
{
var select = document.getElementById("mySelect");
var x = document.getElementById("mySelect").value;
if(x == "Select Subject")
{
alert("Please select subject.");
}
else
{
document.getElementById("demo").innerHTML = "You selected:" + x;
}
}
</script>
</head>
<body>
<br> <br> <br>
<p>Floating menu. Scroll Down.</p>
<select id="mySelect" style="position:fixed">
<option value="Select Subject">Select Subject</option>
<option value="oop">OOP</option>
<option value="cgr">CG</option>
<option value="dbms">DBMS</option>
<option value="dsu">DSU</option>
<option value="dte">DTE</option>
</select>
<br><br>
<input type="button" value="Submit" onclick="myfunction()">
<br>
<p id="demo"></p>
<br> <br> <br> <br> <br> <br> <br> <br>
</body>
</html>
Output:-
6.4.5 Chain Select Menu
Chain select menu is a type of dynamic menu in which there
are more than one select menu present. The option select from
first menu decides the options of second menu and option
selected from second menu decides the option of the third
menu. For ex. There are three select menu are available first
for district second for tehsil of selected district and third for
village of selected tehsil. First we need to select district from
first select menu, then on the basic of selected district in first
menu the options of second menu decided i.e. tehsil of
selected district will be set as options to second menu. Then
we need to select the tehsil from second menu. Then the
villages of selected tehsil will be set to the third menu as
options. Then we can select the village.
6.4.6 Tab Menu

Tab menu contain the one of more tab-head like a button.
Each tab contains separate content to display. If we click on a
tab-head then the content related to that tab will be displayed.
If we want more than one page like content which will replace
the previous content on tab head click then the tab menu is the
best option.
6.4.7 Popup Menu
Popup menu is nothing but an hoverable dropdown menu. The
drop down menu display the sub menu on mouse over is
known as popup menu. It contains the submenu which will
display or popup below the menu in the form of list.
6.4.8 Sliding Menu

The sliding menu is not present on screen. We need to click
on button or some menu icon to display the menu. If we click
on menu icon then the menu will slide in the screen to display
on screen. Following example will illustrate the working
sliding menu.
6.4.9 Highlighted Menu
The highlighted menu can be created by mouse over effect.
As user moves the mouse to any menu item, the menu will be
highlighted by using special effects such as background color
change or making the font style as bold, etc. The highlighted
menu is used to make a confirmation that the user is going to
choose a proper menu item.
6.4.10 Folding Menu
A menu which contain sub menu and the sub menu contain
the sub menu then the hierarchy like tree of menu created.
The menu can be fold by hiding the sub menus and unfold by
displaying the submenu of a menu is known foldable tree
menu.
6.4.11 Context Menu

On a webpage if we click a right button of mouse then the
context menu will be displayed. The will be displayed on
right click of mouse and the position of menu is depend on the
location where the mouse is clicked.
6.4.12 Scrollable Menu
The menu in which items can be scrolled to display limited
item on screen is called as scrollable menu. If there are many
menu need to be displayed on screen, but all menus are not fit
on the screen then we can use the scrollable menu.
6.4.13 Side Bar Menu

in side bar menu, the sub menu of a menu item will be
displayed on right side of the menu. When we click on the
menu item, the sub menu item of that menu will be displayed
on right side of the menu.

Menus 111

Uploaded by

Copyright:

Available Formats

Menus 111

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Menus 111

Uploaded by

Copyright:

Available Formats

6.

The menu elements represents a group of commands that a user

6.4.1 Creating Pull Down Menu

A website is a collection of multiple webpages. So, there

<input type="button" onclick="GetSelectedItem()" value="Get Selected

6.4.2 Dynamically changing the menu

6.4.6 Tab Menu

6.4.8 Sliding Menu

6.4.11 Context Menu

6.4.13 Side Bar Menu

You might also like