Various styles in the drop-down navigation menu

Now it is very popular to use drop-down menus as links, and there are two forms: one is to select and then click a link button to start navigation, one more convenient way is to click and start navigation. The latter is the mainstream, so today I will only discuss the second method...
In fact, there are many implementation methods in the second method, and their complexity varies, Code The length varies greatly. It can be opened on this page, or in the pop-up window, And the pop-up window can be in a variety of forms, so the whole process is really complicated...

1. Now, we will introduce you to the simplest and most practical implementation method, with high flexibility and a clear view !!!
<Form>
<Select onchange = "window. Open (options [selectedindex]. value, '_ Self')">
<Option selected> select a link
<Option value = http://www.163.com/> Netease
<Option value = http://www.sina.com.cn/> Sina
<Option value = http://www.jzzy.com> site creation Resources
</SELECT>
</Form>
There is nothing to explain about the code. It refers to the window after onchange (reselect. open (open window), options indicates the option, [selectedindex]. value refers to selecting the corresponding link in the value to open in the window. In fact, the most important part of this Code is actually _ Self. Of course, it can also be _ blank, I think all the friends who are familiar with HTML will understand whether to open the corresponding link in the new window, And _ Self means to open this page, _ blank refers to opening...
You may think the above Code is too simple, but its practicality is very valuable. The code is short and clear, and you will surely sigh: "The original drop-down menu can be so simple" is actually so simple ......

2. I only talked about whether to open the link in the new window. What should I do if I want to control the parameters in the pop-up window? Don't worry. After reading the following, your problem will be solved ......
<Script language = "JavaScript">
<! --
Destinationandtitle = new array () // sets an array
Destinationandtitle [0] = "http://www.163.com/#netease"
Destinationandtitle [1] = "http://www.sohu.com/#sohu"
Destinationandtitle [2] = "http://www.jzzy.com/* 源"
// Set several links above. Note: The number can be increased at will, so the flexibility here is strong.
Top = 0;
Left = 0;
Height = 400;
Length = 600;
// Set the length, width, and orientation of the window to be opened, and the distance from the top to the left
Toolbar = 0; // Toolbar
Location = 0;
Directories = 0;
Status = 0; // Status Bar
Menubar = 0; // menu bar
Scroll = 0; // scroll bar
Resize = 0; // whether the mouse can zoom in or out the window
// The above settings show the window properties, 1 = Yes, 0 = No
Function popup () {// set a function to open a window
VaR url = Document. F. S. Options [document. F. S. Options. selectedindex]. value;
// Set the number of opened windows. Note that F. s indicates the specific names of the following tables and select.
If (URL! = ''){
If (! Window. popupwin | popupwin. Closed)
Popupwin = open (URL, "", "Top =" + TOP + ", Left =" + Left + ", width =" + width + ", location = "+ location +", toolbar = "+ toolbar +", menubar = "+ menubar +" scrollbars = "+ scroll + ", resizable = "+ resize +" "); // read the previously controlled parameters and open the window
Else {
Popupwin. Close (); // close an old window when a new window is opened.
Popupwin = open (URL, "", "Top =" + TOP + ", Left =" + Left + ",
Width = "+ width +", Height = "+ height +", status = "+ status + ",
Directories = "+ directories +", location = "+ location + ",
Toolbar = "+ toolbar +", menubar = "+ menubar +" scrollbars = "+ scroll +", resizable = "+ resize +"); // open a window
}
}
Else return false;
}
// The code above indicates that the control link is always in a pop-up window.
Document. Write ("<form name = 'F'> <select name = 'S'
Onchange = popup ()> <option value = '#'> select the link </option> "); // insert an HTML parameter, which is implemented only in JavaScript.
For (I = 0; I <destinationandtitle. length; I ++) {// multiple drop-down links are displayed here
VaR urlmsg = destinationandtitle [I]. Split ('*') // separate them with the asterisk (*).
Document. Write ("<option value =" + urlmsg [0] + ">" + urlmsg [1])} // uses an I parameter to incrementally implement the drop--down menu
Document. Write ("</SELECT> </form> ");
// -->
</SCRIPT>
This code is a bit long, but it successfully controls the window orientation, size, and related attributes. It also has an important feature: When a window pops up, you can select another link. The opened link will be opened in the pop-up window and will not open a new window without limit as in the previous example ..