The button menu can be seen on many websites, such as Microsoft's SQL Server website. When you move the mouse over the menu button, it will float and press the mouse button to sag down. The following figure shows the actual effect of this menu. On the left is the menu of the SQL Server website, and on the right is an example of this article.
This menu can be made using JavaScript and CSS. For convenience, ASP is used here. In this example, there are six files. Download these files from the link at the bottom of the page. The six files are:
(I) SamplePage. asp: this is the page for displaying menus in this example. Set all codes to the inetpubScripts directory on the local server. Use http: // localhost/Scripts/SamplePage. asp to open the example menu shown in the preceding figure. SamplePage. asp use the # Include command to reference menu. asp to generate a menu.
(Ii) Menu. asp: Call the function generation Menu in Functions. inc. For more information about calling methods, see the following description.
(3) Menu.css: This file contains the style definitions of all button states. There are four types of buttons: normal, normal sub-menu, select status, select status sub-menu. "Select status" indicates that the button text is preceded by a dot, and the sub-menu indicates that the text is indented to a certain distance. Each button has a variety of states, such as the floating status when the mouse is hovering, the concave status when the mouse is pressed, and so on. You can define styles for different states of all buttons. The color of the style changes the color of the menu.
(Iv) Menu. js: this is the client script code. The code here is responsible for responding to the mouse event and changing the appearance of the button. Here, the RaiseButton () function is elevated, and the DepressButton () function is pressed down.
(V) linenavdns.gif: this is a 2-pixel image used to separate menu buttons. It is similar to <HR>, but it looks better. If you change the background color of the menu, you must change the color of the image at the same time.
(6) functions. inc: server-side script. . If you change the color of the button text in menu.css, you also need to change some functions here. See the following description.
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.
