How to implement the two-level navigation menu in WordPress with JavaScript _javascript tips

Navigation Menu
the navigation menu has long been "deep in the hearts of the public", the application of blog increasingly important and diverse. From the beginning of this article, I will carry out a few topics on the WordPress navigation menu, discuss how to use and strengthen the navigation menu in WordPress, the topic has a certain relationship, the difficulty will gradually increase.

There are usually two kinds of navigation menus on WordPress, page navigation menu and category navigation menu.
Ever remember? WordPress is able to compose a separate page, the page navigation menu is based on the homepage and each individual page composed of the menu. The category navigation menu is a menu consisting of a home page and various categories.
This is the effect demo
Now that the menu consists of a homepage and a list of independent pages or a list of categories, we need to deal with two links, that is, the first menu item and other items.
In addition, we also need to deal with the three states of the menu item, that is, the general state, the status of the current items (such as: in the first page, the first menu item is the current menu item) and the selected menu item status.
That is to say, we need to deal with 3 things altogether:
1. Other menu items outside the home page
2. Homepage menu item
3. Visual effects when a menu item is in a different state

Desired structure:

<div id= "menubar" >
 <ul class= "Menus" >
 <li class= "..." ><a href= "http://.../" >home </a></li>
 <li class= "..." ><a href= "http://.../" > menu item 1</a></li>
 <li Class= "..." ><a href= "http://.../" > menu item 2</a></li> <li ...
 "class= ><a" href= /.../"> Menu item 3</a></li> ...
 </ul>
</div>

Page navigation Menu

1. List of independent pages as a menu item
Call Wp_list_pages to get a list of independent pages and use the following parameters:
Depth: List depth (maximum number of layers), this article discusses the first-level menu, so the maximum depth is 1
Title_li: Title string, not required here, set to 0
Sort_column: How list items are sorted by ascending order based on the order in which the page was created
The statement that prints a stand-alone Page menu item is:

<?php wp_list_pages (' Depth=1&title_li=0&sort_column=menu_order ');?>

2. Homepage menu item
Because the class of the general independent page is Page_item, the class of the current standalone page is Current_page_item. When the page is the homepage, the first menu item class should be Current_page_item, others are page_item. To do this, we need a branch code to determine the class for it:

<?php
 
//If the first page, class is Current_page_item
if (Is_home ()) {
 $home _menu_class = ' Current_page_item ';
If not the first page, class is Page_item
} else {
 $home _menu_class = ' Page_item ';
}
 
? >

The statement that prints the first page menu item is:

<li class= "<?php Echo ($home _menu_class)?>" >
 <a title= "Home" href= "<?php Echo get_settings (' Home ');? >/">Home</a>
</li>

3. The style of the menu
This is a general to special processing process, the General menu item style put in front, the current and selected menu item style behind, when the latter condition will cover the former style, thus changing the appearance.

/* Menu item */
#menubar ul.menus li {
 float:left/* Left floating */
 list-style:none; * Empty list Style * *
 margin-right:1px; To the right of the interval * *
* Menu Necklace link
//#menubar Ul.menus li a {
 padding:5px 10px;/* Inner margin/
 display:block/* Display as Block * * Color
 : #FFF/* Text color/
 background: #67ACE5/* Background color/
 text-decoration:none;/* No Next Line/
}
/* Current menu item
/#menubar Ul.menus li.current_page_item a {
 background: #5495CD;//* Background color/}//
* Select menu Necklace Link/*
#menubar Ul.menus li a:hover {
 background: #4281B7;/* background color/
}

Category navigation Menu

1. Category list as a menu item
Call method Wp_list_categories get the category list and use the following parameters:
Depth: List depth (maximum number of layers), this article discusses the first-level menu, so the maximum depth is 1
Title_li: Title string, not required here, set to 0
ORDER BY: How list items are sorted in ascending order, based on orders that are set when the page is created
Show_count: Do you want to show the number of articles in this category, no need to display here, set to 0
The statement that prints the Category menu item is:

<?php wp_list_categories (' depth=1&title_li=0&orderby=name&show_count=0 ');?>

2. Homepage menu item
Similar to the page navigation menu, only the class of the menu item differs.
Page_item Change to Cat-item
Current_page_item Change to Current-cat

3. The style of the menu
Because the class of the menu item is slightly different, it needs to be modified slightly.
Current_page_item Change to Current-cat

Level Two navigation menu

We already know how the menu was created, and this time we'll use the category list to make the level two navigation menu. What we need to do is actually to change the level two menu on the original basis, and to handle the level two menu. (Make sure that the category contains subcategories, otherwise you cannot make a level two menu.)
We have a total of 3 things to deal with:
1. Bring up level two menu (sub category)
2. Level two menu style
3. The effect of level two menu

Desired structure

<div id= "menubar" > <ul class= "Menus" > <li class= "..." ><a href= "http://.../" >Home</a> </li> <li class= "..." > <a href= "http://.../" > Menu 1</a> <ul class= "Children" > <li CLA Ss= "..." ><a href= "http://.../" > menu item 1</a></li> <li "..." class= ><a "href=" > menu item 2</a></li> <li class= "..." ><a href= "http://.../" > menu item 3</a></li> </ul > </li> <li class= "..." > <a href= "http://.../" > Menu 2</a> <ul class= "Children" > < Li class= "..." ><a href= "http://.../" > menu item 4</a></li> </ul> </li> <li class= "..." &
  Gt <a href= "http://.../" > Menu 3</a> <ul class= "Children" > <li class= "..." ><a href= "http://.../" > menu item 5</a></li> <li class= "..." ><a href= "http://.../" > menu item 6</a></li> </ul > </li> ... </ul> &LT;/DIV&GT
 

Implementation action

1. Bring up level two menu (sub category)
Do you remember how to set the depth of the list when you made the navigation menu? At that time, the depth was set to 1 to not show the subcategory, and now it is necessary to set the depth to 2 by the level two subcategory.
Depth: List depth (maximum number of layers), this article discusses the level two menu, so the maximum depth is 2.
The statement that prints the Category menu item is:

<?php wp_list_pages (' Depth=2&title_li=0&sort_column=menu_order ');?>

2. Level two menu style
It's just a change in the original style, plus a subcategory style.

/* Level Two menu */
#menubar Ul.children {
 display:none * * * Initialization page does not show up * *
 padding:0;
 margin:0;
}
/* Level two Menu menu item */
#menubar ul.children li {
 float:none;/* Vertical Arrangement * * *
 margin:0;
 padding:0;
}
/* Level Two menu's current menu item link
/#menubar ul.children li a {
 width:100px/* is very important for IE6 * *
}

The statement that prints the first page menu item is:

<li class= "<?php Echo ($home _menu_class)?>" >
 <a title= "Home" href= "<?php Echo get_settings (' Home ');? >/">Home</a>
</li>

3. Two-level menu effects
All use JavaScript implementations, for easy understanding, the object-oriented way to write code, drawing on the part of the Prototype framework of code. Because the code is more, it's not appropriate to step through, so I've labeled a lot of annotations. The code is not very complicated, If there is a JS base, there should be no obstacles.
In addition to cater to individual tastes, plus transparent effect. enjoy!

/* author:mg12 feature:menulist with second-level menus Update:2008/08/30 Tutorial ress-menubar-2///** class/var class = {Create:function () {return function () {this.initialize.apply (this, arg
 uments);
}}/** Menu list */var menulist = Class.create (); Menulist.prototype = {/** * Construction method * ID: Menu list * Opacity: Transparency (0.0-1.0, 0.0 is full transparent, 1.0 is opaque) * * * initialize:functio
 N (ID, opacity) {//Get menu List this.obj = document.getElementById (ID);
 
 if (!this.obj) {return;}
 Process all menus in a menu list var menus = this.obj.childNodes;
  for (var i = 0; i < menus.length i++) {var menu = menus[i];
  if (Menu.tagname = = ' LI ') {///Build menu new Menus (menu, opacity);
}}}/** menu */var menus = class.create (); Menu.prototype = {/** * Construction method * Target: Target menu * Opacity: Transparency (0.0-1.0, 0.0 is fully transparent, 1.0 is opaque) * * * initialize:functio
 
 N (target, opacity) {this.util = new menuutil (); Get target menu (no extra elements) This.obj = This.util.cleanWhitespace (taRget); Define transparency, default to opaque this.opacity = Opacity | |
 
 1; Get menu This.menu = this.obj.childNodes//Important!
 
 If the menu does not contain a menu item, it is not processed if (This.menu.length < 2) {return;}
 Menu title and vegetable monomer this.title = this.menu[0];
 
 
 This.body = this.menu[1];
 Define the initial style This.util.setStyle (this.body, ' visibility ', ' hidden ');
 This.util.setStyle (this.body, ' position ', ' absolute ');
 This.util.setStyle (this.body, ' overflow ', ' hidden ');
 
 This.util.setStyle (this.body, ' Display ', ' block ');
 Add Listener This.addlistener (this.obj, ' mouseover ', This.util.bind (this, this.activate), false);
 This.addlistener (this.obj, ' mouseout ', This.util.bind (this, this.deactivate), false); /** * Activation Method * When the mouse moves to the menu title is activated/Activate:function () {//Get the current menu body position var pos = This.util.cumulativeOffset (this.t
 Itle);
 var left = pos[0];
 
 var top = pos[1] + this.util.getHeight (this.title);
 Define active style This.util.setStyle (This.body, ' left ', left + ' px ');
 This.util.setStyle (this.body, ' top ', top + ' px '); This.util.setStyle (tHis.body, ' visibility ', ' visible ');
 This.util.setStyle (This.body, ' opacity ', this.opacity);
 This.util.setStyle (This.body, ' filter ', ' alpha (opacity= ' + this.opacity * 100 + ') '); /** * Remove the method * When the mouse moves out the menu heading is activated/deactivate:function () {//define the release style This.util.setStyle (this.body, ' visibility ', '
 Hidden '); /** * Monitoring Method * Element: Monitor Object * Name: Listening method * Observer: Method to execute * usecapture: The way in which the browser invokes the event (True Capture method, False to Bubbling mode) * * Addlistener:function (element, name, observer, Usecapture) {if (Element.addeventlistener) {ELEMENT.A
 Ddeventlistener (name, observer, Usecapture);
 else if (element.attachevent) {element.attachevent (' on ' + name, observer);
}}/** some practical methods * * var menuutil = class.create ();
 Menuutil.prototype = {initialize:function () {}, $: function (ID) {return document.getElementById (ID);
 }, $A: function (iterable) {if (!iterable) {return [];
 } if (Iterable.toarray) {return Iterable.toarray ();
  else {var results = [];for (var i = 0; i < iterable.length i++) {Results.push (iterable[i));
 return results;
 }, Bind:function () {var array = this. $A (arguments);
 var func = array[array.length-1];
 var _method = func, args = array, object = Args.shift ();
 return function () {return _method.apply (object, Args.concat (array));
 }, Getheight:function (Element) {return element.offsetheight;
 }, Setstyle:function (element, key, value) {Element.style[key] = value;
 }, Getstyle:function (element, key) {return element.style[key];
 }, Cleanwhitespace:function (list) {var node = List.firstchild;
  while (node) {var nextnode = node.nextsibling;
  if (Node.nodetype = = 3 &&!/\s/.test (Node.nodevalue)) {List.removechild (node);
 node = NextNode;
 } return list;
 }, Cumulativeoffset:function (Element) {var Valuet = 0, Valuel = 0;
  do {Valuet + + element.offsettop | | 0; Valuel + + Element.offsetleft | |
  0;
 element = Element.offsetparent; } while (ElemeNT);
 return [Valuel, Valuet];
 }/** add to page Load event/window.onload = function (e) {new menulist (' menus ', 0.9);}