Sliding menu is a commonly used menu format, which is widely used in List of level 2 categories. It features a small amount of code and concise data description.
In this example, a wireless table is used for class writing.
This code can spread freely.
--->
<Style>
Table {font-size = 9pt}
Td {height = 20px}
</Style>
<Body>
<Span id = "menus"> </span>
<Span id = "view"> </span>
</Body>
<Script for = pad event = onclick>
// Click response for a large Node
For (var I = 1; I <this. parentElement. rows. length; I + = 2)
This. parentElement. rows [I]. style. display = "none ";
This. parentElement. rows [this. rowIndex + 1]. style. display = 'block ';
View. innerHTML = this. v1 + ":" + this. v2; // You can construct the corresponding action based on the large and small classes.
</Script>
<Script for = bar event = onclick>
// Small node click response
View. innerHTML = this. v1 + ":" + this. v2; // You can construct the corresponding action based on the large and small classes.
</Script>
<Script>
/**
* Generate the html code string of the menu
* The entry parameter is the default class number opened in the menu.
*/
Function menu (n ){
This. ar = new Array (
/**
* Parameter Array
* Column 1: Category
* Column 2: Small Class
* Column 3: Title
*/
New Array (1, 0, "Category 1 "),
New Array (, "Class 1 "),
New Array (1, 2, "Class 2 "),
New Array (2, 0, "Class 2 "),
New Array (2, 1, "Class 1 "),
New Array (2, 2, "Class 2 "),
New Array (2, 3, "Small Class 3 "),
New Array (3,0, "Category 3 "),
New Array (3, 1, "Class 1 "),
New Array (3, 2, "Class 2 "),
New Array (, "Category 4 "),
New Array (, "Class 1 "),
New Array (, "Class 2 "),
New Array (, "Class 3 ")
);
This. Length = 120;
This. bgcolor = "# f0f0f0 ";
This. bordercolorlight = "# c0c0c0 ";
This. bordercolordark = "# FFFFFF ";
This. tr_bgcolor = "# d0d0d0 ";
Var s = "<table border = 1 align = center width =" + this. width + "bgcolor =" + this. bgcolor + "bordercolorlight =" + this. bordercolorlight + "bordercolordark =" + this. bordercolordark + "CELLPADDING = 0 CELLSPACING = 0>"
For (var I = 0; I <this. ar. length; I ++) {// construct the html structure of the menu, where the large and small class numbers are used as custom parameters for event response.
If (this. ar [I] [1] = 0 ){
If (I> 0)
S + = "</table> </td> </tr> ";
Var vk = this. ar [I] [0] = n? "Block": "none ";
S + = "<tr id = 'pad 'bgcolor =" + this. tr_bgcolor + "v1 =" + this. ar [I] [0] + "v2 =" + this. ar [I] [1] + "> <td align = center>" + this. ar [I] [2] + "</td> </tr> <tr style = 'display: "+ vk +" '> <td> <table width = 100%> ";
} Else
S + = "<tr> <td id = 'bar' v1 =" + this. ar [I] [0] + "v2 =" + this. ar [I] [1] + ">" + this. ar [I] [2] + "</td> </tr> ";
}
S + = "</table> </td> </tr> </table> ";
Return s;
}
/*** Create menu ***/
Menus. innerHTML = menu (4 );
</Script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
