Приглашаем посетить
Грибоедов (griboedov.lit-info.ru)

6.5 Generating menus with mouse over

Table of Contents

Previous Next

6.5 Generating menus with mouse over

As the final section in this chapter we will show you how to use the mouse techniques that you have learned to build a menu system in window style. For simplicity, we will restrict ourselves to building a menu with just one header item. It should not be too difficult to extend this idea to more complex applications.

6.5.1 Pull-down menu (window style) using XHTML

One popular menu system used in windows is called the "Pull Down Menu." This is usually a series of menu items (or headers) on top of the application. When your mouse runs over one of the menu headers, a pull-down menu section is displayed to show more options. Since pull-down menus are essential in window programming, there are a variety of tools to help developers to build menus for their windows. In this section, only XHTML and some script functions are used to accomplish this task.

The idea and process of generating pull-down menus with XHTML is not difficult. It is a two-process application. First, you need to create the menu headers. Each header is usually a text message with CSS position, size, color, and background. The second process is to create the pull-down window of the menu. This is usually a series of text messages with similar CSS settings to the header. The pull-down action of the menu is just another simple mouse-over application. You can use the CSS visibility to do the trick. When the mouse runs over the header, you turn off the visibility of the header and turn on the visibility of the pull-down section. When the mouse moves out of the pull-down section, you reset the original visibilities. The completed listing of the XHTML code is given below:



Example: ex06-19.htm - Pull-Down Menu

 1: <?xml version="1.0" encoding="iso-8859-1"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3:     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head> <title> Pull-Down Menu - ex06-19.htm </title>
 6: <style>
 7:  .MenuStyle
 8:  {
 9:   border: groove 4px;padding:3;font-family:arial;text-align:left;
10:   font-size:14pt;width:120px;height:30px;background-color:#c0c0c0;
11:   position:absolute;top:25px;left:20px
12:  }
13: </style>
14:
15: <script>
16:   function showMenu()
17:   {
18:    document.getElementById("myMenu02").style.visibility="visible";
19:    document.getElementById("myMenu02").style.height="210px";
20:    document.getElementById("myMenu").style.visibility="hidden";
21:   }
22:
23:   function hideMenu()
24:   {
25:    document.getElementById("myMenu02").style.visibility="hidden";
26:    document.getElementById("myMenu").style.visibility="visible";
27:   }
28: </script>
29: </head>
30: <body>
31: <br /><br />
32:   <span id="myMenu02" class="MenuStyle" style="visibility:hidden"
33:     onmouseover="showMenu()" onmouseout="hideMenu()">
34:    <span align="center">&nbsp;Edit</span><br /><hr />
35:    <span onmouseover='this.style.color="red"'
36:     onmouseout='this.style.color="black"'>&nbsp;Cut</span><br />
37:    <span onmouseover='this.style.color="red"'
38:     onmouseout='this.style.color="black"'>&nbsp;Copy</span><br />
39:    <span onmouseover='this.style.color="red"'
40:     onmouseout='this.style.color="black"'>&nbsp;Paste</span><br />
41:    <span onmouseover='this.style.color="red"'
42:     onmouseout='this.style.color="black"'>&nbsp;Spelling
43:     &gt;&gt;</span><br /><br /><hr>
44:    <span onmouseover='this.style.color="red"'
45:     onmouseout='this.style.color="black"'>&nbsp;Select All</span><br />
46:   </span>
47:
48:  <span id="myMenu" class="MenuStyle" style="visibility:visible"
49:  onmouseover="showMenu()" onmouseout="hideMenu()">&nbsp;Edit</span><br />
50:
51: </body>
52: </html>

The menu header is defined in lines 4849 with CSS style MenuStyle and id="myMenu". This header contains just one-word, "Edit." When the mouse runs over this header, the script function showMenu() is called and replaces the header with its pull-down section. The pull-down section is defined in lines 3246 containing the itemized menu choices: "Edit," "Cut," "Copy," "Paste," "Spelling," "hr" (i.e., a horizontal line), and "Select All." We use a nested <span> here to form a section. The master <span> is defined in line 32 with id="myMenu02". The CSS visibility of this id is used to control the existence of this pull-down section. When the mouse moves inside any pull-down section items, the color of the text will also change to red.

This page uses two script functions showMenu() and hideMenu() to perform the task. Function showMenu() (see lines 1621) is to display the pull-down section of the menu. This is just a change of the CSS visibility of the object. Since the pull-down section is longer than the menu header, you may also need to increase the height of myMenu02 to 210 pixels to cover all items. Alternatively, you can set up another independent CSS style with a new height to accommodate the items. The function hideMenu() is used to restore the original CSS visibility to show the menu header.

Some screen shots of the page are shown in Figs 6.30 and 6.31.

Figure 6.30. ex06-19.htm

graphics/06fig30.gif


Figure 6.31. Mouse over menu

graphics/06fig31.gif


6.5.2 Generating sub-menus

The same technique can be used to generate sub-menus of a menu system. For example, you can generate a sub-menu for the "Spelling" section in the previous example by adding another section. You may want to see a pop-up sub-menu appear when the mouse runs over the "Spelling" choice. This is just like adding another nested <span> with a new id="myMenu03" and style. As a simple demonstration, we include the "Dictionary," "Oxford Learner," "Advanced Learner," "Oxford Popular," "Popular Thesaurus," "hr," and "Customize" as our sub-menu items. To complete the task, we also need to add two more script functions to control the CSS visibilities. One is called showSub() and the other is hideSub(). When the mouse runs over the sub-menu, the script functions showMenu() and showSub() are called simultaneously to display both menus at the same time. This action can be implemented by the following code fragment:



64 <span id="myMenu03" class="SubMenuStyle" style="visibility:hidden"
65 onmouseover="showMenu();showSub()" onmouseout="hideMenu();hideSub()">

With a basic understanding of mouse-over techniques and CSS style, the complete code listing (ex06-20.htm) for our sub-menu program should be self-explanatory:



Example: ex06-20.htm - Generating Sub-Menu

 1: <?xml version="1.0" encoding="iso-8859-1"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3:     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head>
 6:   <title> Generating Sub-Menu - ex06-20.htm </title>
 7: <style>
 8:  .MenuStyle
 9:  {
10:   border: groove 4px;padding:3;font-family:arial;text-align:left;
11:   font-size:14pt;width:120px;height:30px;background-color:#C0C0C0;
12:   position:absolute;top:25px;left:20px
13:  }
14:
15:  .SubMenuStyle
16:  {
17:   border: groove 4px;padding:3;font-family:arial;text-align:left;
18:   font-size:14pt;width:190px;height:210px;background-color:#C0C0C0;
19:   position:absolute;top:135px;left:123px
20:  }
21: </style>
22:
23: <script>
24:   function showMenu()
25:   {
26:    document.getElementById("myMenu02").style.visibility="visible";
27:    document.getElementById("myMenu02").style.height="210px";
28:    document.getElementById("myMenu").style.visibility="hidden";
29:   }
30:   function hideMenu()
31:   {
32:    document.getElementById("myMenu02").style.visibility="hidden";
33:    document.getElementById("myMenu").style.visibility="visible";
34:   }
35:
36:   function showSub()
37:   {
38:    document.getElementById("myMenu03").style.visibility="visible";
39:   }
40:
41:   function hideSub()
42:   {
43:    document.getElementById("myMenu03").style.visibility="hidden";
44:   }
45:
46: </script>
47: </head>
48:
49: <body>
50: <br /><br />
51:  <span id="myMenu02" class="MenuStyle" style="visibility:hidden"
52:   onmouseover="showMenu()" onmouseout="hideMenu()">
53:    <span align="center">&nbsp;Edit</span><br /><hr>
54:    <span onmouseover='this.style.color="red"'
55:      onmouseout='this.style.color="black"'>&nbsp;Cut</span><br />
56:    <span onmouseover='this.style.color="red"'
57:      onmouseout='this.style.color="black"'>&nbsp;Copy</span><br />
58:    <span onmouseover='this.style.color="red"'
59:     onmouseout='this.style.color="black"'>&nbsp;Paste</span><br />
60:    <span onmouseover='this.style.color="red";showSub()'
61:     onmouseout='this.style.color="black";hideSub()'>
62:     &nbsp;Spelling &gt;&gt;</span><br /><br /><hr>
63:    <span onmouseover='this.style.color="red"'
64:     onmouseout='this.style.color="black"'>&nbsp;Select All</span><br />
65:  </span>
66:
67:
68:  <span id="myMenu03" class="SubMenuStyle" style="visibility:hidden"
69:   onmouseover="showMenu();showSub()" onmouseout="hideMenu();hideSub()">
70:  <span align="center">&nbsp;Dictionary</span><br /><hr>
71:  <span onmouseover='this.style.color="red"'
72:   onmouseout='this.style.color="black"'>&nbsp;Oxford Pocket</span><br />
73:  <span onmouseover='this.style.color="red"'
74:   onmouseout='this.style.color="black"'>&nbsp;Advanced Learner</span><br />
75:  <span onmouseover='this.style.color="red"'
76:   onmouseout='this.style.color="black"'>&nbsp;Oxford Popular</span><br />
77:  <span onmouseover='this.style.color="red"'
78:   onmouseout='this.style.color="black"'>&nbsp;
79:   Popular Thesaurus</span><br /><br /><hr>
80:  <span onmouseover='this.style.color="red"'
81:   onmouseout='this.style.color="black"'>&nbsp;Customize</span><br />
82:  </span>
83:
84:  <span id="myMenu" class="MenuStyle" style="visibility:visible"
85:   onmouseover="showMenu()" onmouseout="hideMenu()">&nbsp;Edit</span><br />
86:
87: </body>
88: </html>

The screen shots of the sub-menu are shown in Figs 6.32 and 6.33.

Figure 6.32. Sub-menu

graphics/06fig32.gif


Figure 6.33. ex06-20.htm

graphics/06fig33.jpg


In addition to the horizontal menu bar, this sub-menu technique can also be used to develop a full vertical menu bar as used in a number of professional Web sites.

    Table of Contents

    Previous Next