The menu continues on the article
We have identified the function of the tree menu, the structure of the database, and some letters to be used.
Number. Now you can start the design of the program. Because the tree menu is to implement the dynamic expansion subtree on the Web page
, so you need to use DHTML. Let's analyze how to implement this dynamic effect on the client.
One, the implementation of dynamic menu client
Here, we first regardless of ASP's program, only to analyze how to implement the exhibition in the client's web page
The dynamic effect of the open menu. First, to expand a submenu, you can put the menu on a layer or a
Table, use the Dsiplay attribute in the CSS style to control it. If you set the Display property to None,
The menu is hidden, which, conversely, is displayed if set to a value, such as block. With this approach,
You can use the JS script to control.
1, the actual hidden menu.
Now we're going to do a menu like this and we're not writing a script yet, just to show
Effect. Since it is to see the effect, first show a only one item of the two-layer menu bar, in order to distinguish between different levels of
menu, we put the handle menu in a table, and then put this table in the table on the previous level menu is a
Cell. The code is as follows:
Tree Menu 1, filename: tree1.htm
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta name= "generator" content= "EditPlus" >
<meta name= "Author" content= "" >
<meta name= "Keywords" content= "" >
<meta name= "Description" content= "" >
</HEAD>
<BODY>
<title> Tree Menu 1</title>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<style type= "Text/css" >
<!--
TD {FONT-SIZE:12PX; font-family: "Song Body"}
a:active {font-size:12px; Text-decoration:none background-color: #0099FF; font-family: "XXFarEastFont-Arial"}
a:link {font-size:12px; Text-decoration:none font-family: "XXFarEastFont-Arial"}
a:hover {font-size:12px; Text-decoration:none background-color: #0099FF; font-family: "XXFarEastFont-Arial"}
a:visited {font-size:12px; Text-decoration:none}
Table {font-size:12px; font-family: "XXFarEastFont-Arial"}
. cur {Cursor:hand}
. tt {border-color: #FFFFFF #000000 #000000 #FFFFFF;
Border-style:solid; border-top-width:1px; border-right-width:1px;
border-bottom-width:1px; BORDER-LEFT-WIDTH:1PX}
. s12 {font-family: "XXFarEastFont-Arial"; font-size:12px}
. txtbox {font-family: "XXFarEastFont-Arial"; font-size:12px; border:1px solid; height:18px;
Border-color: #000000 #FFFFFF #FFFFFF #000000}
-->
</style>
<body>
<table width= ' 100% ' border=0 cellspacing=0 cellpadding=0>
<tr height= ' width= ' 100% ' >
<TD height= ' >
<a href= '/photo/index.asp ' target= ' main ' > My Computer </a>
</td>
</tr>
<tr>
<TD height= ' 0 ' >
<table id= ' AA ' style= ' display=none ' width= ' 100% ' border= ' 0 ' cellspacing= ' 0 ' cellpadding= ' 0 ' >
<tr height= ' >
<TD width= ' height= ' >
</td>
<TD height= ' >
<a href= ' MGW ' target= ' main ' > Nagoya </a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</BODY>
</HTML>
In order to highlight the effect, we added a CSS inside to control the display effect of different objects. Of course, the above links are arbitrarily specified.
Showing the above file, we can see that the "Nagoya" submenu is hidden. Now put the above file in the
<table id= ' AA ' style= ' display=none ' width= ' 100% ' border= ' 0 ' cellspacing= ' 0 ' cellpadding= ' 0 ' >
To
<table id= ' AA ' style= ' display=block ' width= ' 100% ' border= ' 0 ' cellspacing= ' 0 ' cellpadding= ' 0 ' >
Again, the next Level menu is displayed.
2, with the script to control the display of the menu.
Just now we have to manually modify the submenu display properties to implement the submenu. Now we're going to add the script in
Row control. Just change the display properties of the submenu in the script. The script is as follows:
<script language= "JavaScript" >
function Showhide (subid)
{
if (subid.style.display== ' none ')
{
subid.style.display= ' block ';
}
Else
{
Subid.style.display= ' None ';
}
}
</script>
We then add an action to the parent menu:
In
Plus the following:
onclick= "Showhide (aa)"
Now show this page again, and then click on "My Computer" before the picture, you can see the submenu display and hidden effect.
3. Complete Script Control
Above we have implemented the submenu display and hide, but above is only two menu items, the actual situation to
More complex than the above. Let's analyze a typical scenario: each menu (except the root menu) has three items:
1 Connected tree diagram: May be "+" or "-" or several other lines. If it is "+" or "-", you need to add a link to it.
Click to expand the next Level menu. The root menu does not have this entry.
2) Icon: The root menu is a computer design, the other menu is the folder pattern. Also add a link to expand the next Level menu.
3 Text: Menu display text, click and point to a new link.
For each level of the menu, we are numbered in a certain way so that it can be generated in an ASP program: L represents a row, and R is a column. For a
menu, the first item (connection diagram) is labeled First, the second item (icon) is the second, and its submenu is in the table, labeled
Three. The schematic diagram is as follows
----------------------
| L1R1 | L1R2 | Text |
----------------------
| | --L2R2------|
| | | |
| |
