javascript|xml| Menu | dropdown
One, simple explanation
The biggest advantage of this menu is that you can cross any label on the page, or even the frame, (the General menu will be blocked by Select,object,flash) so if you have this need, then this menu is a good choice.
Overall, it has the following characteristics:
(1) Menu styles and data are configured via XML
(2) The style of the menu can be modified at will, such as:
<base>
<background-color> #DDDDDD </background-color>
<background-image>url (menu_bg.jpg) </background-image>
<font-size>10pt</font-size>
<color> #000099 </color>
<width>100%</width>
<text-align>center</text-align>
<cursor>default</cursor>
</base>
As long as the node name conforms to the style attribute of the respective label (TABLE,TR,TD one).
(3) A split picture can be set between the main menu items, and a submenu item can set the style of the split line.
(4) All images are controlled by CSS to avoid path problems.
(5) can set the virtual directory alias, for the menu link using an absolute path to facilitate, such as:
<context>
<path>hdsa</path>
</context>
When this value is set, the user simply writes the menu based on the file's directory structure without having to worry about the virtual directory.
Because the menu uses Window.createpopup (), it is limited to IE5.5 and the submenu is blocked if it is a new open window.
Note: the Window.createpopup () Production menu has been inspired by predecessors
When this value is set, the user simply writes the menu based on the file's directory structure without having to worry about the virtual directory.
Because the menu uses Window.createpopup (), it is limited to IE5.5 and the submenu is blocked if it is a new open window.
Note: the Window.createpopup () Production menu has been inspired by predecessors
=====================================================================
Two, the implementation of two scripts can be written in a file:
(1) script to handle popup windows
------------------some of the following functions are used to handle pop-up windows------------------//
var pops = new Array (); Array to store the popup window family
function createpopup (degree)
{
if (Degree < 0)//number of layers cannot be less than 0
return null;
if (Pops[degree]!= null)///If already present, do not need to create
return Pops[degree];
if (degree = 0)
Pops[0] = Window.createpopup (); Create the top-level popup window
else{
if (pops[degree-1] = = null)
Pops[degree-1] = createpopup (degree-1)//recursive backtracking starts at the first level
Pops[degree] = Pops[degree-1].document.parentwindow.createpopup (); Create a child popup window from the parent popup window
}
Pops[degree].document.body.setattribute ("degree", degree);
return Pops[degree];
}
Createpopup (1); Create a 2-story popup family
var opopup = pops[0];
var timer = null;
/**
* Show First Level submenu
* @param objshow-objects that display submenus
* @param strgetid-tag ID for storing display content
*/
function showSubMenu1 (Objshow,strgetid) {
Cleartimer ();
Endhidesubmenu ();
var objget = eval (document.getElementById (Strgetid));
Pops[1].hide ();
pops[0].document.body.innerhtml = objget.innerhtml;
Pops[0].show (0,0,1,1,objshow);
var intwidth = pops[0].document.body.scrollwidth;
var intheight = pops[0].document.body.scrollheight;
Pops[0].hide ();
Pops[0].show (10,objshow.offsetheight-2,intwidth,intheight,objshow);
}
/**
* Show Level Two menu
* @param strgetid-tag ID for storing display content
* @param OBJTR-The TR object showing the submenu
*/
function ShowSubMenu2 (STRGETID,OBJTR) {
Cleartimer ();
Endhidesubmenu ();
var objget = eval (document.getElementById (Strgetid));
pops[1].document.body.innerhtml = objget.innerhtml;
Pops[1].show (0,0,1,1,pops[0].document.body);
var intwidth = pops[1].document.body.scrollwidth;
var intheight = pops[1].document.body.scrollheight;
Pops[1].hide ();
Pops[1].show (Objtr.offsetwidth-2,-2, Intwidth, Intheight, OBJTR);
}
Hide A Level submenu
function hideSubMenu1 () {
Pops[0].hide ();
Window.settimeout ("Pops[0].hide ()", 1000);
}
Hide Level Two submenu
function HideSubMenu2 ()
{
Cleartimer ();
Timer = Window.settimeout ("Pops[1].hide ()", 1000);
Pops[1].hide ();
}
Hide all drop down menus
function Hidesubmenu ()
{
if (Pops[0]!= null) pops[0].hide ();
if (pops[1]!= null) pops[1].hide ();
}
function Cleartimer ()
{
if (timer!= null)
Window.cleartimeout (timer)
timer = null;
Alert ("OK");
}
(2) Read the parsing XML data file, print the menu script
Location information
var m_strtitle = "Your location->";
--------main Menu style related definition---------//
Define main Menu Styles
var m_strmainmenustyle = "";
The style attribute of the main menu item
var m_strmainmenuitemstyle = "";
Main Menu Item Style property
var m_strmmitemprobase = {};
Main menu item Mouse hover Style property
var m_strmmitempromover = {};
A split picture between a menu item and an item
var m_strmmitemsplitimg;
--------submenu style related definition---------//
Define submenu Styles
var m_strsubmenustyle = "";
The style attribute of the child menu item
var m_strsubmenuitemstyle = "";
Child menu Item Style property
var m_strsmitemprobase = {};
Child menu item Mouse hover Style property
var m_strsmitempromover = {};
Sub-menu item bottom border Style (as split line)
var m_strsmitemborderb = "";
To define a virtual directory path
var m_strcontextpath = "";
Menu XML data File Object
var M_doc;
Main Menu Collection
var m_objmmlist;
var Str_pos_front = "Your location:";
LoadMenu ("Main_menu.xml");
/**
* Load Menu
* @param strxmlpath-xml the path and filename of the data file
*/
function LoadMenu (strxmlfile) {
M_doc = new ActiveXObject ("MSXML2. domdocument.3.0 ");
M_doc.async = false;
M_doc.load (Strxmlfile);
Getmainmenustyle ();
Getsubmenustyle ();
Get the main Menu collection
M_objmmlist = M_doc.selectsinglenode ("//popmenu/menus"). ChildNodes;
Get virtual Directory
if (M_doc.selectsinglenode ("//popmenu/context/path")) {
M_strcontextpath = M_doc.selectsinglenode ("//popmenu/context/path"). Text;
}
Output Main Menu
Printmainmenu ();
Output First Level submenu
Printsubmenu ();
}
/**
* Move the mouse to move out of the main menu style changes
* @param obj-Changing the object of a style
* @param BOLCHG-whether to change the style
*/
function Chgmainmenustyle (OBJ,BOLCHG)
{
if (BOLCHG) {//mouse hover changes color
For (Var pro in M_strmmitempromover) {
Obj.style[pro] = M_strmmitempromover[pro];
}
else {//mouse move out
Obj.style.border = "0";
For (Var pro in m_strmmitemprobase) {
Obj.style[pro] = M_strmmitemprobase[pro];
}
}
}//end function Chgmainmenustyle (obj,i)
/**
* Mouse move in Move out submenu style change
* @param obj-Changing the object of a style
* @param BOLCHG-whether to change the style
*/
function Chgsubmenustyle (OBJ,BOLCHG) {
if (BOLCHG) {//mouse hover changes color
For (Var pro in M_strsmitempromover) {
Obj.style[pro] = M_strsmitempromover[pro];
}
else {//mouse move out
For (Var pro in m_strsmitemprobase) {
Obj.style[pro] = M_strsmitemprobase[pro];
}
}
}//end function Chgsubmenustyle (obj,i)
/**
* Construct node style
* @param strpath node path
*/
function Getnodestyle (strpath) {
var strstyle = "";
if (M_doc.selectsinglenode (strpath)) {
var nodelist = M_doc.selectsinglenode (strpath). ChildNodes;
for (var i = 0;i < Nodelist.length;i + +) {
var nodename = Nodelist[i].nodename;
var nodetext = Nodelist[i].text;
Strstyle + = Nodename.tolowercase () + ":" + Nodetext + ";";
}
}
return strstyle;
}
/**
* Construct node Style property
*/
function Getnodeproperty (strpath) {
var arrproperty = {};
if (M_doc.selectsinglenode (strpath)) {
var nodelist = M_doc.selectsinglenode (strpath). ChildNodes;
for (var i = 0;i < Nodelist.length;i + +) {
var nodename = Nodelist[i].nodename;
NodeName = Nodename.tolowercase ();
var nodetext = Nodelist[i].text;
The change from attribute to property. such as Background-color-> backgroundcolor
var aname = Nodename.split ("-");
var strproperty = aname[0];
for (var j = 1;j < Aname.length;j + +) {
Strproperty + + aname[j].substring (0,1). toUpperCase () + aname[j].substr (1);
}
Arrproperty[strproperty] = Nodetext;
}
}
return arrproperty;
}
/**
* Get the main menu style
*/
function Getmainmenustyle () {
Get the main menu style
M_strmainmenustyle = Getnodestyle ("//popmenu/style/main-menu/base");
Get main Menu item style
M_strmainmenuitemstyle = Getnodestyle ("//popmenu/style/main-menu/menu-item/base");
property of Main Menu item
M_strmmitemprobase = Getnodeproperty ("//popmenu/style/main-menu/menu-item/base");
When the mouse hovers, the main menu item changes
M_strmmitempromover = Getnodeproperty ("//popmenu/style/main-menu/menu-item/mouse-over");
To get a split picture between the menu item and the item
if (M_doc.selectsinglenode ("//popmenu/style/main-menu/menu-item/split-image")) {
var node = m_doc.selectsinglenode ("//popmenu/style/main-menu/menu-item/split-image");
m_strmmitemsplitimg = "Background-image:" + Node.text + ";";
M_strmmitemsplitimg + = "Background-repeat:no-repeat;background-position:center Center;";
}
}//end function Getmainmenustyle ()
/**
* Get the main menu style
*/
function Getsubmenustyle () {
Get submenu Style
M_strsubmenustyle = Getnodestyle ("//popmenu/style/sub-menu/base");
Get submenu Item Style
M_strsubmenuitemstyle = Getnodestyle ("//popmenu/style/sub-menu/menu-item/base");
property of a submenu item
M_strsmitemprobase = Getnodeproperty ("//popmenu/style/sub-menu/menu-item/base");
To change the property of the submenu item when the mouse hovers
M_strsmitempromover = Getnodeproperty ("//popmenu/style/sub-menu/menu-item/mouse-over");
Get Sub menu item bottom border Style (as split line)
if (M_doc.selectsinglenode ("//popmenu/style/sub-menu/menu-item/split-line")) {
var node = m_doc.selectsinglenode ("//popmenu/style/sub-menu/menu-item/split-line");
M_strsmitemborderb = "Border-bottom:" + Node.text + ";";
}
}//end function Getsubmenustyle ()
var M_bolfirst = true;//Whether the first response menu
Document.onclick = function () {
M_bolfirst = true;
Alert (parent.frames[0]);
}
Top.document.onclick = function () {
M_bolfirst = true;
}
/**
* Expand each main Menu
* @param objtd-Main menu, TD
* @param strsubmenuid-ID of the corresponding submenu
* @param bolexistsubmenu-submenu present
*/
function Spreadmainmenu (objtd,strsubmenuid,bolexistsubmenu) {
var strevent = Event.type.toLowerCase ();
if (!pops[0].isopen && strevent = "mouseover" && M_bolfirst) {
Return
}
if (pops[0].isopen && strevent = "click") {
Return
}
Chgmainmenustyle (objtd,true);
Endhidesubmenu ();
if (Bolexistsubmenu) {
If you have a submenu
SHOWSUBMENU1 (OBJTD,STRSUBMENUID);
} else {
Hidesubmenu ();
M_bolfirst = false;//is not the first time to respond to menus
}
}
Print Main Menu
function Printmainmenu ()
{
var divstyle = "width:100%;";
var strhtml = "";
strhtml = "<div style= '" + Divstyle + "' >";
strHTML + = "<table style=" "+m_strmainmenustyle+" ' id= ' mm ' cellpadding= ' 3 ' ><tr> ';
If the user sets a split picture, the output
if (m_strmmitemsplitimg && m_strmmitemsplitimg!= "") {
strHTML + + "<td style= '" + m_strmmitemsplitimg + "' width=2></td>";
}
var intmenuwidth = 0;
for (var i = 0; i< m_objmmlist.length i + +)
{
var menunode = m_objmmlist[i];
var attlist = menunode.attributes;
var menutext = Attlist.getnameditem ("text"). Text;
var menuhref = Attlist.getnameditem ("href"). Text;
var menutarget = "";
if (Attlist.getnameditem ("target")
Menutarget = Attlist.getnameditem ("target"). Text;
Else
Menutarget = "_self";
var intmenuwidth;
if (Attlist.getnameditem ("width"))
Intmenuwidth = Attlist.getnameditem ("width"). Text;
var strsubmenuid = "sm" + i;
var strmouseoverevent = "";
var strclickevent = "";
If you have a submenu, display
if (Menunode.haschildnodes ()) {
Strmouseoverevent = "Chgmainmenustyle (this,true); Spreadmainmenu (this,\" "+ Strsubmenuid +" \ ", true);";
Strclickevent = strmouseoverevent;
}else{
Strmouseoverevent = "Chgmainmenustyle (this,true);";
Strclickevent = "onclickevent (' + menuhref +" ', ' "+ Menutarget +" ', ' "+ MenuText +"); ";
}
strHTML + + "<td width=" + intmenuwidth + "style=" "+ M_strmainmenuitemstyle +" ' id=mm "+ i +
" " +
">" + menutext+ "</td>";
If the user sets a split picture, the output
if (m_strmmitemsplitimg && m_strmmitemsplitimg!= "") {
strHTML + = "<td style= '" + m_strmmitemsplitimg + "' width= ' 2 ' ></td>";
}
}
strHTML = "<td></td>";
strHTML = "</tr>";
strHTML = "</table>";
strHTML = "</div>";
document.write (strhtml);
}//end Printmainmenu ()
Print a Level submenu
function Printsubmenu () {
for (var i = 0; i< m_objmmlist.length i + +) {
Menunode = M_objmmlist[i];
If there is no submenu, perform the Next loop
if (!menunode.haschildnodes ()) {
Continue
}
Get a collection of submenus under the main menu
var objsmlist = menunode.childnodes;
var intsubmenulen = objsmlist.length;
submenu ID corresponding to each main menu
var strsubmenuid = "sm" + i;
Arrmenuid.push (STRSUBMENUID);
var strsubmenuhtml = "<div style= ' display:none;border:0; ' id= '" + strsubmenuid + "' >" +
"<table cellspacing= ' 0 ' cellpadding= ' 4 ' style= '" + M_strsubmenustyle + "' >";
for (var j = 0;j < Intsubmenulen;j + +) {
var objsubmenu = objsmlist[j];
var attlist = objsubmenu.attributes;
var menutext = Attlist.getnameditem ("text"). Text;
var menuhref = Attlist.getnameditem ("href"). Text;
var menutarget = "";
if (Attlist.getnameditem ("target")
Menutarget = Attlist.getnameditem ("target"). Text;
Else
Menutarget = "_self";
If you have a Level three submenu, you need an arrow ID
var strrightrow = "";
Level Two submenu ID
var strsubmenu2id = strsubmenuid + "_sm" + j;
Response of a submenu at the time of mouse hover and move out
var strmouseoverevent = "Parent.chgsubmenustyle (this,true);p arent.endhidesubmenu ();";
var strmouseoutevent = "Parent.chgsubmenustyle (this,false);p arent.beginhidesubmenu ();";
Location information Display
var strposition = Str_pos_front + m_objmmlist[i].attributes.getnameditem ("text"). Text + "->"
+ MenuText;
alert (strposition);
if (Objsubmenu.haschildnodes ()) {
Print its Level two submenu
PRINTSUBMENU2 (objsubmenu,strsubmenu2id,strposition);
Strmouseoverevent + + parent.showsubmenu2 (\ "" + strsubmenu2id + "\", this); ";
Strmouseoutevent + = "parent.beginhidesubmenu ();";
Strrightrow = "<font style= ' font-family:webdings;font-size:7pt;height:10 ' >4</font>";
Strposition = "";
} else {
Strmouseoverevent + = "parent.endhidesubmenu ();";
Strmouseoverevent + = "parent.hidesubmenu2 ();";
}
var stronclickevent = "javascript:parent.onClickEvent (' + menuhref +" ', ' "+ Menutarget +" ', ' "+ strposition +"); "
strsubmenuhtml + = "<tr style=" + M_strsubmenuitemstyle + "'" +
"Onmouseover= '" + strmouseoverevent + "'" +
"Onmouseout= '" + strmouseoutevent + "'" +
"onclick=" + stronclickevent + "" +
"> <td width= ' 3 ' nowrap style= '" + M_strsmitemborderb + "' > </td>" +
"<td nowrap style=" + m_strsmitemborderb + "' >" + menutext + "</td>" +
"<td width= ' align= ' right ' nowrap style= '" + M_strsmitemborderb + "' >" + strrightrow + "</td>" +
"</tr>";
alert (objSubMenu.text.length);
}//end for sub-menu number loop
strsubmenuhtml = "</table></div>";
document.write (strsubmenuhtml);
}//end for main Menu number loop
}//end function Printsubmenu ()
/** Print Level Two submenu
*objsubmenu: A Level submenu object
*strsubmenu2id: ID of the level two menu that will be printed
*strposition: Main Menu and First Level submenu text description
*/
function PrintSubMenu2 (objsubmenu,strsubmenu2id,strposition)
{
Arrmenuid.push (STRSUBMENU2ID);
var objsmlist = objsubmenu.childnodes;
var intsubmenu2len = objsmlist.length;
var strsubmenu2html = "<div style= ' display:none;border:0; ' id= '" + strsubmenu2id + "' >" +
"<table cellspacing= ' 0 ' cellpadding= ' 4 ' style= '" + M_strsubmenustyle + "' >";
for (var i = 0; i< intsubmenu2len;i + +)
{
var objSubMenu2 = objsmlist[i];
var attlist = objsubmenu2.attributes;
var menutext = Attlist.getnameditem ("text"). Text;
var menuhref = Attlist.getnameditem ("href"). Text;
var menutarget = "";
if (Attlist.getnameditem ("target")
Menutarget = Attlist.getnameditem ("target"). Text;
Else
Menutarget = "_self";
var strPostion2 = strposition + "->" + menutext;
strsubmenu2html + = "<tr style=" + M_strsubmenuitemstyle + "'" +
"Onmouseover= ' Parent.parent.chgSubMenuStyle (this,true);"
"Parent.parent.endHideSubMenu (); ' " +
" " +
"Onclick=javascript:parent.parent.onclickevent (' + menuhref +" ', ' "+ Menutarget +" ', ' "+ StrPostion2 +"); "
"> <td width= ' 3 ' nowrap style= '" + M_strsmitemborderb + "' > </td>" +
"<td nowrap style=" + m_strsmitemborderb + "' >" + menutext + "</td>" +
"<td width= ' 3 ' nowrap style= '" + M_strsmitemborderb + "' > </td>" +
"</tr>";
}
strsubmenu2html = "</table></div>";
document.write (strsubmenu2html);
}//end function printSubMenu2
/**
* Open the link, all the menu links are through this function to open. and display location information
* @param strURL-Open the address of the link
* @param strtarget-Opens the target of the link. such as _self,_blank, etc.
* @param strviewtext-Location information
*/
function Onclickevent (strurl,strtarget,strviewtext)
{
M_bolfirst = true;//to First response when responding to menus later
Document.all.selected_menu.innerText = Strviewtext;
M_strtitle = "";
var arrtext = strviewtext.split ("->");
if (Arrtext.length >0)
M_strtitle = arrtext[0];
for (var i = 1; i < arrtext.length i + +)
{
M_strtitle + = "-" + arrtext[i];
}
M_strtitle = m_strtitle.substring (str_pos_front.length);
Hide drop down menu
Hidesubmenu ();
Show title
if (M_strtitle!= "")
{
Parent.document.title = M_strtitle;
}
if (strURL = "#")
Return
If the URL is a JavaScript string, it executes directly
if (Strurl.tolowercase (). IndexOf ("JavaScript")!=-1) {
Executescript (strURL);
Return
}
strURL = M_strcontextpath + strurl;//address should add virtual directory
window.open (Strurl,strtarget);
}
Executes a JavaScript string
function Executescript (strscript)
{
The first eval gets the variable represented by the string, and the second Eval executes the script in the variable
eval (strscript);
}
