Create your own web menu (1)

I always wanted to add some new and popular elements to my website, such as adding a web menu (just like the style used on Microsoft's website, refer to www.microsoft.com) to provide the navigation function for the customer's browsing, and also looks professional. I think this is nothing more than some client Code , Client function implementation, of course, the preferred JavaScript. Although I have done my own website before, I am not very familiar with JavaScript, so I want to find some code on the website for implementation. After several searches, I found some Asp.net controls. Next I Can See That JavaScript files have been processed using obfuscators, but I cannot see why. Let's look at Microsoft's webpage source code. It just links to the background JS file and cannot see the content of the JS file. At last, I decided to do it myself.

To implement the functions of the client, it seems that the Javascript language cannot be used. I spent three days searching for some JavaScript Information on the Internet and reading the Javascript bible. I have a vague outline of what I want to do. Let's first look at the functions to be implemented:

• When you move the mouse over a menu item, you must highlight the menu item.
• When you move the cursor over a menu item with a sub-menu, the sub-menu should be displayed.
• The menu content should be configurable and saved in XML.
• When you move the mouse over a sub-menu, the parent menu item of the Sub-menu should be identified.
• When a user clicks a menu item, the corresponding page should be located in response to the user's behavior.

Let's take a look at what HTML elements are used to represent menus, and use Div, span, table, or ur? Because I am a menu in the vertical layout, I don't need to use span, because span is a menu without line breaks-span can be used as a menu in the horizontal layout :). It is too inflexible to use tables, and some elements of tables must be managed. If you use ur, it is very simple and convenient to use a sub-menu, but it is not suitable for the menu of the tape menu.

To display the Web menu, style sheets are inevitable. Now let's take a look at the core style table elements that need to be used:

• First, determine the position and size of the menu, whether it is static, relative or absolute. Absolute is useless, unless your website does not all use the absolute method, which may be better. Relative calculates the offset based on the parent element, and the final choice is to use the default static, this method is also applicable.
• The sub-menu is displayed and hidden. Use visibility or display. Although visibility hides the sub-menu, it still occupies space on the webpage, but display does not. It should be truly hidden, so display is used.

It is critical to display sub-menus. DHTML provides a lot of the most table attributes, which makes people dizzy. However, in the end, we still use offsetparent's offset family coordinates to determine the specific position of the sub-menu, in this case, we need to write a recursive function to obtain the specific coordinates. We can see various coordinates of web elements:

The offsetleft attribute of the parent element of the current element can be calculated recursively to calculate the left coordinate of the current element:

Function getascendinglefts (ELEM)
{
If (ELEM = NULL)
Return 0;
Else
{
If (ELEM. style. Position = 'absolute '| ELEM. style. Position = 'relative') return 0;
Return ELEM. offsetleft + getascendinglefts (ELEM. offsetparent );
}
}

Similarly, you can write the top coordinate calculation function:

Function getascendingtops (ELEM)
{
If (ELEM = NULL)
Return 0;
Else
{
If (ELEM. style. Position = 'absolute '| ELEM. style. Position = 'relative') return 0;
Return ELEM. offsettop + getascendingtops (ELEM. offsetparent );
}
}