Scribd
Upload
11 views15 pages

Chapter 6.4

Uploaded by

op gamer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views15 pages

Chapter 6.4

Uploaded by

op gamer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Chapter 6.

4 Menu

Developers use menus on a web page to collect information from visitors by prompting visitors to choose
items from a list of options. Their selection is then sent along with other information on the form to the
server for further processing.

Creating a Pull-Down Menu


A pull-down menu is used to make it easy for visitors to navigate a complex web site.The menu can reflect a
common theme among web pages, and each menu option can have a web page/function associated with it.
You can use JavaScript to load the selected page when any option from menu is selected by the visitor.
1. Create a menu with <select> tag and add options to it using <option> tag.
2. Specify url of web page to be opened when an option is selected by visitor, in value property of <option> tag.
<select name="MenuChoice" onchange="DisplayPage(this)">
<option>Products</option>
<option value="page2.html">Computers</option>
<option value="page3.html">Monitors</option>
</select>
3. Call function using onchange event in <select> tag.
<select name="MenuChoice" onchange="DisplayPage(this)">
This pointer is passed as parameter that represents menu control(selected option).
4. Define function body inside <script> tag.
<script type="text/javascript">
function DisplayPage(Choice)
{
Page = Choice.options[Choice.selectedIndex].value;
if (Page != "")
{
window.location = Page;
}}
</script>
Location property stores address of web page to be opened once an option is selected from menu.

Program:
<html>
<head>
<title>Pull Down Menu</title>
<script type="text/javascript">
function DisplayPage(Choice)
{
Page = Choice.options[Choice.selectedIndex].value;
if (Page != "")
{
window.location = Page;
}}
</script>
</head>
<body onload="document.Form1.MenuChoice.selectedIndex=0">
<form action="" name="Form1" >
<select name="MenuChoice" onchange="DisplayPage(this)">
<option>Products</option>
<option value="page2.html">Computers</option>
<option value="page3.html">Monitors</option>
</select>
<h1> Hello, Welcome to products</h1>
</form>
</body>
</html>

Output:

Pull down menu

Dynamically changing a menu:


A pull-down menu can be a context-sensitive menu that is, the set of options dynamically change based on
choices the visitor makes on the page. In this way, one menu can be used to display different sets of options,
reducing the need to show too many menus on a web page.

In the example below: two menus are used. One is having options as fifth sem and sixth sem. Other menu is
initially empty. When web page is loaded in the browser, visitor selects semester from first menu and as per
the selected semester ,options are added in second menu which is called as dynamically changing

Program:
<html>
<head>
<title>Dynamically Changing Menu Options</title>
<script type="text/javascript">
fifthsem = new Array('CSS','AJP','OSY'); // Array elements for subject menu if sem fifth is selected
sixthsem = new Array('PHP','MAD', 'ETI'); // Array elements for subject menu if sem sixth is selected

function Getsubjects(Semester)
{
for(i=document.Form1.subjects.options.length-1;i>0; i--)
{
document.Form1.subjects.options.remove(i) //Clear existing options from subjects
}
semvalue = Semester.options[Semester.selectedIndex].value; // finding selected semester from sem menu
if (semvalue != "")
{
if (semvalue == '1')
{
for (i=1; i<=fifthsem.length;i++)
{
document.Form1.subjects.options[i] =new Option(fifthsem[i-1]); // loading options from array into subjects
menu for fifth sem
}
}
if (semvalue == '2')
{
for (i=1; i<=sixthsem.length;i++)
{
document.Form1.subjects.options[i] =new Option(sixthsem[i-1]); // loading options from array into
subjects menu for sixth sem
}
}
}
}
</script>
</head>
<body onload="document.Form1.Semester.selectedIndex=0">
<form name="Form1">

<select name="Semester" onchange="Getsubjects(this)"> // First menu as semester


<option value="0">Semester</option>
<option value="1">Fifth</option>
<option value="2">Sixth</option>
</select>

<select name="subjects"> // Second menu as subjects


<option value="0">Subjects</option>
</select>
<br>
<p>
<input type="submit" value="Submit" />
<input type="reset" />
</p>
</form>
</body>
</html>

Output:

Above output screen shows semester menu options as fifth and sixth.
Above output screen shows subjects menu without any options.

Above output screen shows selected option from semester menu as fifth and subjects of fifth semester in
subjects menu.

Above output screen shows selected option from semester menu as Sixth and subjects of sixth semester in
subjects menu.

Validating Menu selection:


A common problem when using a menu to collect information from a visitor is that the visitor doesn't select
an item from the menu before submitting the form. This can cause an error if the item is required for
processing the form. This problem can be solved by using a JavaScript to determine whether the required
menu option is selected after the visitor clicks the Submit button and before the form is submitted to the
server.
For validation, check for selectedIndex property of menu. If value of selectedIndex property is empty then
visitor has submitted the form without selecting option from menu.

In the program below, the ValidateForm() function is defined in the <head> tag. The ValidateForm() is
passed reference to the form, which is assigned to the ValForm variable. The first step within the function is
to assign the index of the selected option to the Vote variable. The Vote variable is then used to determine
whether the value of the selected option is an empty string, which is the value of the first item in the select
menu. If so, then consider that the visitor has not selected an option from the menu and an alert dialog box
reminds the visitor to select an option. The function then returns a false, which tells the browser not to
submit the form. However, if the value of the option isn't an empty string,then function returns a true value.
The browser then submits the form.

Program:
<html>
<head>
<title>Dynamically Changing Menu Options</title>
<script type="text/javascript">
function ValidateForm(ValForm)
{
Vote = ValForm.Candidate.selectedIndex
if (ValForm.Candidate.options[Vote].value == "")
{
alert('Please select an option.')
return false
}
alert('Thank you for selecting option')
return true
}
</script>
</head>
<body>
<form onsubmit="return ValidateForm(this)" action="page1.html" name="Form1">
<select name="Candidate">
<option value="">Products</option>
<option value="0">Computers</option>
<option value="1">Monitors</option>
<option value="2">Keyboard</option>
<option value="3">Mouse</option>
</select>
<br>
<p>
<input type="submit" value="Submit" />
<input type="reset" />
</p>
</form>
</body>
</html>

Output:

In the above output screen, visitor has not selected any option from products menu so an alert message is
displayed stating that ‘ please select an option’.

In the above output screen, visitor has selected an option as computer from products menu so an alert
message is displayed stating that ‘ Thank you for selecting option’.
Types of menu:
Floating Menu :
Roy Whittle developed a boxed menu that looks as though it floats within the web page, because it always
appears in relatively the same position as the visitor scrolls up or down the page. Whittle positioned the
demo boxed menu along the lower-left section of the web page, but you can easily reposition the menu to
any location by changing a few settings within the DHTML code.
You'll find the code at www.dynamicdrive.com/dynamicindex1/staticmenu.htm.

<html>
<head>
<script type="text/javascript">
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute;
z-index:1000">')
</script
<layer id="divStayTopLeft">
<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="1" width="130" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" bgcolor="#FFFFCC">
<p align="center"><b><font size="4">Menu</font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF">
<p align="left"> <a href="http://www.dynamicdrive.com">Dynamic
Drive</a><br>
<a href="http://www.dynamicdrive.com/new.htm">What's
New</a><br>
<a href="http://www.dynamicdrive.com/hot.htm">What's
Hot</a><br>
<a href="http://www.dynamicdrive.com/faqs.htm">FAQs</a><br>
<a href="http://www.dynamicdrive.com/morezone/">More
Zone</a></td>
</tr>
</table>
<!--END OF EDIT-->
</layer>
<script type="text/javascript">
//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"
if (!document.layers)
document.write('</div>')
function JSFX_FloatTopDiv()
{
var startX = 3,
startY = 150;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var
el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id
];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop +
document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop
+ document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
</head>
<body>
<h1>Hello</h1>
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
<h1>Hello</h1><h1>Hello</h1><h1>Hello</h1><h1>Hello</h1>
<h1>Hello</h1><h1>Hello</h1>
</body>
</html>

Chain select menu:


Xin Yang developed a chain of pull-down menus in which the option selected from the first pull-down menu
determines the options that are available in the second pull-down menu. Likewise, the second pull-down
menu selection determines options that are shown in the third pull-down menu. You can easily add to the
chain by replicating Yang's code to increase the number of pull-down menus.
You'll find the code located at www.dynamicdrive.com/dynamicindex1/chainedmenu/index.htm.
It is same as dynamic menu.
These pull-down menus are chained together, causing menu options to change dynamically while the web
page is displayed.

Tab Menu:
Tab menu display a one- or two-word description of the menu option within a tab.A more complete
description is displayed below the tab bar as the visitor moves the mouse cursor over the tab.
You'll find it easy to change both the brief and complete descriptions of these menu items by changing
settings in the DHTML code. You’ll also be able to position the tab menu anywhere on your web page.
You'll find the code located at www.dynamicdrive.com/dynamicindex1/ddtabmenu2.htm.

Code:
<html>
<head>
<style type="text/css">

.halfmoon{
margin-bottom: 4px;
}

.halfmoon ul{
padding: 3px 9px 2px 5px;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
border-bottom: 1px solid #929492;
}

.halfmoon li{
display: inline;
margin: 0;
}

.halfmoon li a{
text-decoration: none;
padding: 3px 9px 2px 5px;
margin: 0;
margin-right: 0; /*distance between each tab*/
border-left: 1px solid #DDD;
color: black;
font: bold 14px Verdana;
background: #ECEEEC url(tabright.gif) top right no-repeat;
}

.halfmoon li a:visited{
color: black;
}

.halfmoon li a:hover, .halfmoon li a.current{


background-color: #CDDADA;
color: navy;
}

#tabcontentcontainer{
width:95%; /*width of 2nd level content*/
height:1.5em; /*height of 2nd level content. Set to largest's content height to avoid jittering.*/
}

.tabcontent{
display:none;
}

</style>

<script type="text/javascript">

/***********************************************
* DD Tab Menu II script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Set tab to intially be selected when page loads:


//[which tab (1=first tab), ID of tab content to display (or "" if no corresponding tab content)]:
var initialtab=[1, "sc1"]

//Turn menu into single level image tabs (completely hides 2nd level)?
var turntosingle=0 //0 for no (default), 1 for yes

//Disable hyperlinks in 1st level tab images?


var disabletablinks=0 //0 for no (default), 1 for yes

////////Stop editting////////////////

var previoustab=""

if (turntosingle==1)
document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')

function expandcontent(cid, aobject){


if (disabletablinks==1)
aobject.onclick=new Function("return false")
if (document.getElementById && turntosingle==0){
highlighttab(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
if (cid!=""){
document.getElementById(cid).style.display="block"
previoustab=cid
}
}
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collectddimagetabs()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
}

function collectddimagetabs(){
var tabobj=document.getElementById("ddimagetabs")
tabobjlinks=tabobj.getElementsByTagName("A")
}
function do_onload(){
collectddimagetabs()
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

</script>
</head>
<div id="ddimagetabs" class="halfmoon">
<ul>
<li><a href="http://www.dynamicdrive.com" onMouseover="expandcontent('sc1', this)">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" onMouseover="expandcontent('sc2', this)">DHTML</a></li>
<li class="selected"><a href="http://www.dynamicdrive.com/style/" onMouseover="expandcontent('sc3', this)">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</span></a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
</ul>
</div>

<DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent">


Return to the <a href="http://www.dynamicdrive.com">frontpage</a> of Dynamic Drive.
</div>

<div id="sc2" class="tabcontent">


See the new scripts recently added to Dynamic Drive. <a href="http://www.dynamicdrive.com/new.htm">Click here</a>.
</div>

<div id="sc3" class="tabcontent">


Original, practical <a href="http://www.dynamicdrive.com/style/">CSS codes and examples</a> such as CSS menus for your
site.
</div>

</DIV>
</html>

Popup Menu :
A popup menu displays several top-level menu items. A popup menu appears as the visitor moves the mouse
cursor over a top-level menu item. The popup menu contains lower-level menu items that are associated
with the top-level menu item. You can increase or decrease number as well as the number of lower-level
menu items by changing settings in the DHTML code.
You'll find the code at www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm.
Highlighted Menu :
Add life to a menu by using a highlighted menu, which causes two kinds of highlights to appear around an
item on the menu. When the visitor moves the cursor over a menu item, the browser displays a box around
the item with a shadow at the bottom of the box . If the visitor selects the item, the highlight shadow
appears at the top of the box rather than at the bottom of the box. The highlighted menu is ideal to use to
identify a menu option before the visitor actually makes a selection.
You'll find the code at www.dynamicdrive.com/dynamicindex1/highlightmenu2.htm.

<html>
<head>
<style>
.menulines{
border:2.5px solid #F0F0F0;
}

.menulines a{
text-decoration:none;
color:black;
}
</style>

<script language="JavaScript1.2">

//3-state Highlight menu effect script: By Dynamicdrive.com


//For full source, Terms of service, and 100s DTHML scripts
//Visit http://www.dynamicdrive.com

function over_effect(e,state){
if (document.all)
source4=event.srcElement
else if (document.getElementById)
source4=e.target
if (source4.className=="menulines")
source4.style.borderStyle=state
else{
while(source4.tagName!="TABLE"){
source4=document.getElementById? source4.parentNode : source4.parentElement
if (source4.className=="menulines")
source4.style.borderStyle=state
}
}
}

</script>
</head>
<body>
<table border="0" width="200" cellspacing="0" cellpadding="0" onMouseover="over_effect(event,'outset')"
onMouseout="over_effect(event,'solid')" onMousedown="over_effect(event,'inset')" onMouseup="over_effect(event,'outset')"
style="background-color:#F0F0F0">
<tr><td width="100%" bgcolor="#E6E6E6"><font face="Arial" size="3"><b>Main Menu</b></font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://wsabstract.com">Website


Abstraction</a></font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://freewarejava.com">Freewarejava.com


</a> </font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://freewarejava.com/cgi-bin/Ultimate.cgi">


Webmaster Help Forum </a> </font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://www.slashdot.com">


SlashDot</a></font></td></tr>

<tr><td width="100%" class="menulines"><font face="Arial" size="2"><a href="http://www.msnbc.com">MSNBC.com</a>


</font></td></tr>

</table>
</body>
</html>

Folding Tree Menu


The folding tree menu should look familiar, because it is a classic menu used in desktop applications to help
you navigate file folders. The tree consists of one or more closed folders, each of which appears alongside
the folder's name. You can include as many folders as your web site requires. The tree expands when the
visitor clicks a closed folder, showing one or more menu options that are associated with the folder. You can
link each of these options to another web page or to a bookmark within the web page that contains the tree
menu. The tree collapses when the visitor clicks an open folder.
You'll find the code at www.dynamicdrive.com/dynamicindex1/navigate1.htm.

Context Menu:
The context menu pops up on the web page when the visitor clicks the right mouse button. The location of
the context menu on the screen is determined by the position of the mouse cursor. The mouse cursor sets the
position of the up per-left corner of the context menu. Each menu item is automatically highlighted as the
visitor scrolls through the menu by moving the mouse cursor. The visitor clicks the name of the item to
select that menu option. The context menu is hidden from the screen by clicking the mouse cursor away
from the menu.
You'll find the code at www.dynamicdrive.com/dynamicindex1/contextmenu.htm.
Scrollable Menu :
The scrollable menu displays a limited number of menu item across the web page. Although only a few
items are shown, you can use as many menu items as your application needs. Two arrowheads appear at
both ends of the visible list of menu items. Visitors can simply move the mouse cursor over one of the
arrowheads and the browser automatically scrolls the menu in the direction of the arrowhead.The visitor can
then click the appropriate menu item once it scrolls into view.
You'll find the code at www.dynamicdrive.com/dynamicindex1/scrollerlink.htm.

<html>
<head>
<script type="text/javascript">
var goleftimage='pointer2.gif'
var gorightimage='pointer.gif'
//configure menu width (in px):
var menuwidth=300
//configure menu height (in px):
var menuheight=25
//Specify scroll buttons directions ("normal" or "reverse"):
var scrolldir="normal"
//configure scroll speed (1-10), where larger is faster
var scrollspeed=6
//specify menu content
var menucontents='<nobr><a href="http://www.dynamicdrive.com">Dynamic Drive</a> | <a
href="http://www.javascriptkit.com">JavaScript Kit</a> | <a
href="http://www.codingforums.com">CodingForums.com</a> | <a
href="http://www.builder.com">Builder.com</a> | <a
href="http://freewarejava.com">Freewarejava.com</a></nobr>'
////NO NEED TO EDIT BELOW THIS LINE////////////
var iedom=document.all||document.getElementById
var leftdircode='onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"'
var rightdircode='onMouseover="moveright()" onMouseout="clearTimeout(righttime)"'
if (scrolldir=="reverse"){
var tempswap=leftdircode
leftdircode=rightdircode
rightdircode=tempswap
}
if (iedom)
document.write('<span id="temp"
style="visibility:hidden;position:absolute;top:-100;left:-5000">'+menucontents+'</span>')
var actualwidth=''
var cross_scroll, ns_scroll
var loadedyes=0
function fillup(){
if (iedom){
cross_scroll=document.getElementById? document.getElementById("test2") : document.all.test2
cross_scroll.innerHTML=menucontents
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2
ns_scroll.document.write(menucontents)
ns_scroll.document.close()
actualwidth=ns_scroll.document.width
}
loadedyes=1
}
window.onload=fillup

function moveleft(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px"
}
else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))
ns_scroll.left-=scrollspeed
}
lefttime=setTimeout("moveleft()",50)
}

function moveright(){
if (loadedyes){
if (iedom&&parseInt(cross_scroll.style.left)<0)
cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px"
else if (document.layers&&ns_scroll.left<0)
ns_scroll.left+=scrollspeed
}
righttime=setTimeout("moveright()",50)
}
if (iedom||document.layers){
with (document){
write('<table border="0" cellspacing="0" cellpadding="2">')
write('<td valign="middle"><a href="#" '+leftdircode+'><img src="'+goleftimage+'"border=0></a> </td>')
write('<td width="'+menuwidth+'px" valign="top">')
if (iedom){
write('<div style="position:relative;width:'+menuwidth+'px;height:'+menuheight+'px;overflow:hidden;">')
write('<div id="test2" style="position:absolute;left:0;top:0">')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+menuwidth+' height='+menuheight+' name="ns_scrollmenu">')
write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')
}
write('</td>')
write('<td valign="middle"> <a href="#" '+rightdircode+'>')
write('<img src="'+gorightimage+'"border=0></a>')
write('</td></table>')
}
}

</script>
</head>
</html>

Side Bar Menu :


Ger Versluis developed a very useful menu called the side bar menu. As the name implies, the side bar menu
displays a menu on the side of the web page. Options on this menu can be linked to other web pages or to
other menu options. For example, the News item on the menu links to another menu that shows two options:
General and Technology. Each of these links to yet another menu that contains items linking the visitor to
corresponding web pages. Visitors can link to other menus by moving the mouse cursor over a menu item.
The menu that is associated with that item pops onto the screen. Moving the cursor away from the menu
item closes the popup menu, and the side bar menu remains on the screen.
You'll find the code at www.dynamicdrive.com/dynamicindex1/hvmenu/index.htm

You might also like