Buttons | menus | buttons | menu button Menus can be seen on many sites, such as Microsoft's SQL Server Web site. When the mouse moves over the menu button, it floats and the menu button dips down when the mouse button is pressed. The following figure is the actual effect of this menu, the menu on the left is the SQL Server Web site, and the right image is the example in this article.
This menu can be made with JavaScript and CSS. For convenience, here we need to use ASP. There are six files in this example, please download these files from the link at the bottom of this article page. These six documents are:
㈠samplepage.asp: This is the page that shows the menu in this example. To set all the code in the local server inetpubscripts directory, use http://localhost/Scripts/SamplePage.asp to open the sample menu shown in the previous illustration. Samplepage.asp uses the #include command to reference menu.asp to generate a menu.
㈡menu.asp: Invokes functions in functions.inc to generate menus. The specific invocation method is described below.
㈢MENU.CSS: This file contains the style definitions for all state of the button. There are four types of buttons: normal, Normal submenu, select Status, select Status submenu. Where "select State" refers to the button text preceded by a dot, the submenu refers to the text indented a certain distance. Each button has a variety of different states, such as the floating state when the mouse hovers, the depressed state when the mouse is pressed, and so on. You can define styles for each of the various states of a button. Changing the color of the style here also changes the color of the menu.
㈣menu.js: This is the client script code. The code here is responsible for responding to mouse events and changing the appearance of the button. where the Raisebutton () function raises the button, the Depressbutton () function presses the button.
㈤linenavdns.gif: This is a graph with a height of 2 pixel, which separates the menu buttons. It's about the same as < hr>, but it looks a little nicer. If you change the background color of the menu, you must change the color of the graphic at the same time.
㈥functions.inc: Server-side script. The functions.inc contains a total of 5 VBScript processes, which are used to output the four button and menu separator linenavdns.gif described earlier. If you change the color of the button text in Menu.css, you also need to change some of the functions here. See below for specific instructions.
As mentioned earlier, this example actually draws the code for the menu in Menu.asp, and the following describes how the various buttons in the menu are created. We already know that there are four types of buttons, and this example uses all of the four buttons. The top button in the previous image, command 1, belongs to the first button type, created with the following line of code:
Call Drawmenu (button text, target URL)
Change the call parameter when you actually use it.
The second button text "command 1-1" is indented (the second type of button), and the last button, "command 2-2", is created with the following line of code:
Call Drawsubmenu (button text, target URL)
The buttons in the sample menu are separated by linenavdns.gif, which can be added to any two buttons with the following code:
Call Drawmenuseperator ()
The third button is preceded by an orange dot (that is, the selection symbol, which is the third type of button). This button is added with the following code:
Call Drawchsnmenu (button text, target URL)
The fourth button text is indented with a dot (class fourth button) and the code to add the button is as follows:
Call Drawchsnsubmenu (button text, target URL)
Here's how to customize the color of the menu. Color customization A bit troublesome, here only explain its passing, specifically please readers download the code test themselves. To change the background color of a menu, first change the background color of the table in menu.asp, and then modify all the background and border colors in the menu.css. If you change the text color of the button, you must also change the "color=" portion of the < font> tag that is exported by the functions in Functions.inc.
Finally, let's say that this menu is available for users who do not support CSS or JavaScript. If JavaScript is not supported, the button does not appear to float or sag, and if CSS is not supported, the menu appearance changes, but the menu basic function is normal.
