Using JavaScript to implement the second-level navigation menu in WordPress _ javascript skills

This article mainly introduces how to use JavaScript to implement the second-level navigation menu in WordPress. This article first describes the basic PHP navigation menu practices in WordPress, for more information, see Navigation menu
Navigation menus have long been "deeply rooted in the hearts of the people", and the applications on blogs are increasingly important and diverse. from the beginning of this article, I will discuss several topics about WordPress navigation menus and discuss how to use and enhance the navigation menus on WordPress. There is a certain relationship between topics, and the difficulty will gradually increase.

There are two types of navigation menus on WordPress: page navigation menu and category navigation menu.
Remember? WordPress can write independent pages, and the page navigation menu is a menu composed of the home page and each independent page, and the category navigation menu is a menu composed of the home page and each category.
This is a demo of the effect.
Since the menu consists of the home page and the independent page list or the home page and the category list, we need to deal with two steps, that is, the home page menu items and other menu items.
In addition, we also need to process the three States of the menu item, namely the general state and the current menu item State (for example, the home page menu item is the current menu item in the home page) and the status of the selected menu item.
That is to say, we need to handle three tasks in total:
1. Other menu items outside the home page
2. Home Page menu items
3. Visual Effects of menu items in different States

Expected structure:

 
 
 
 
  
  
Home
 
  
  
Menu item 1
 
  
  
Menu item 2
 
  
  
Menu item 3
...
 
 

Page navigation menu

1. Independent page list as menu item
Call wp_list_pages to obtain the independent page list and use the following parameters:
Depth: List depth (maximum number of layers). This article discusses the level-1 menu, so the maximum depth is 1.
Title_li: The title string. It is not required here and is set to 0.
Sort_column: Sort list items in ascending order based on the order set during page creation
The statement for printing the menu items on an independent page is:

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

2. Home Page menu items
Because the class of the independent page is page_item, the class of the current Independent page is current_page_item. when the page is a home page, the class of the home page menu item should be current_page_item, and in other cases, page_item. therefore, we need a branch code to determine the class for it:

<? Php // For the homepage, the class is current_page_itemif (is_home () {$ home_menu_class = 'current _ page_item '; // if it is not the homepage, class is page_item} else {$ home_menu_class = 'page _ item';}?>

The statement for printing the menu items on the home page is:

 /">Home

3. menu style
This is a general process from general to special processing. Generally, the style of a menu item is placed before it, and the style of the current and selected menu items is placed behind it. When the latter meets the conditions, the style of the former will be overwritten, to change the appearance.

/* Menu item */# menubar ul. menus li {float: left;/* float to the left */list-style: none;/* clear list style */margin-right: 1px; /* interval on the right */}/* menu necklace connected */# menubar ul. menus li a {padding: 5px 10px;/* padding */display: block;/* display as a block */color: # FFF;/* text color */background: #67ACE5;/* Background Color */text-decoration: none;/* No underlay line */}/* Current menu necklace connected */# menubar ul. menus li. current_page_item a {background: # 5495CD;/* background Color */}/* selected menu necklace */# menubar ul. menus li a: hover {background: #4281B7;/* background Color */}

CATEGORY navigation menu

1. Category list as menu item
Call wp_list_categories to obtain the category list and use the following parameters:
Depth: List depth (maximum number of layers). This article discusses the level-1 menu, so the maximum depth is 1.
Title_li: The title string. It is not required here and is set to 0.
Orderby: Sort list items in ascending order based on the order set during page creation.
Show_count: whether to display the number of articles for this category. This parameter is not required. Set it to 0.
The statement for printing the category menu item is:

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

2. Home Page menu items
Similar to the page navigation menu, the class of the menu item is different.
Page_item changed to cat-item
Current_page_item changed to current-cat

3. menu style
Because the class of the menu item is slightly different, you need to modify it slightly.
Current_page_item changed to current-cat

Level 2 navigation menu

We already know how to create a menu. This time we will use the category list to create a level-2 navigation menu. what we need to do is to change the level-2 menu and process the level-2 menu based on the original one. (make sure that the category contains the subcategory. Otherwise, the level-2 menu cannot be called .)
We need to handle three tasks in total:
1. Call up the level-2 menu (subcategory)
2. Level-2 menu style
3. Effect of level-2 menus

Expected Structure

 
 
 
 
  
  
Home
 
  
  
Menu 1 
   
 
    
Menu item 1
 
    
Menu item 2
 
    
Menu item 3
 
   
 
 
  
  
Menu 2 
   
 
    
Menu item 4
 
   
 
 
  
  
Menu 3 
   
 
    
Menu item 5
 
    
Menu item 6
 
   
 
...
 
 

Implementation

1. Call up the level-2 menu (subcategory)
Do you still remember how to set the depth of the list when creating the navigation menu? At that time, we set the depth to 1 to not display subcategories. Now we need to set the depth to 2 to level-2 subcategories.
Depth: List depth (maximum number of layers). This article discusses the level-2 menu, so the maximum depth is 2.
The statement for printing the category menu item is:

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

2. Level-2 menu style
Only modify the original style and add the style of sub-category.

/* Level-2 menu */# menubar ul. children {display: none;/* is not displayed when the page is initialized */padding: 0; margin: 0;}/* menu item of the level-2 menu */# menubar ul. children li {float: none;/* vertical arrangement */margin: 0; padding: 0;}/* click the current menu necklace of the level-2 menu */# menubar ul. children li a {width: 100px;/* very important for IE6 */}

The statement for printing the menu items on the home page is:

 /">Home

3. Effect of level-2 menus
All are implemented using JavaScript. For ease of understanding, code is written using object-oriented methods. Some Prototype framework code is used for reference. because there are many codes and it is not suitable for sentence-by-sentence explanation, I have marked a lot of comments. the code is not very complex and there should be no obstacle if there is a JS Foundation.
In addition, in order to cater to the taste of individual, with transparent effect. Enjoy!

/* Author: mg12Feature: MenuList with second-level menusUpdate: 2008/08/30 Tutorial URL: http://www.neoease.com/wordpress-menubar-2/ * // ** Class */var Class = {create: function () {return function () {this. initialize. apply (this, arguments) ;}}/ ** menu list */var MenuList = Class. create (); MenuList. prototype = {/*** constructor * id: Menu list * opacity: transparency (0.0-1.0, 0.0 is full transparency, 1.0 is opacity) */initialize: function (id, opacity) {// obtain the menu list this. obj = document. getElementById (id); if (! This. obj) {return;} // process all menus in the menu list. var menus = this. obj. childNodes; for (var I = 0; I <menus. length; I ++) {var menu = menus [I]; if (menu. tagName = 'lil') {// create Menu new menu (Menu, opacity) ;}}}/** Menu */var menu = Class. create (); Menu. prototype = {/*** constructor * target: target menu * opacity: transparency (0.0-1.0, 0.0 is full transparency, 1.0 is opacity) */initialize: function (target, opacity) {this. util = new MenuUtil (); // Obtain the target menu (no additional elements) this. obj = this. util. cleanWhitespace (target); // defines the transparency. The default value is opacity. this. opacity = opacity | 1; // obtain the menu this. menu = this. obj. childNodes // important! If the menu does not contain a menu item, if (this. menu. length <2) {return;} // menu title and menu body this. title = this. menu [0]; this. body = this. menu [1]; // defines the initial style this. util. setStyle (this. body, 'visibility ', 'did'); this. util. setStyle (this. body, 'position', 'absolute '); this. util. setStyle (this. body, 'overflow', 'hid'); this. util. setStyle (this. body, 'display', 'block'); // Add the 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 you move the cursor to the menu title, it is activated */activate: function () {// obtain the position of the current menu body var pos = this. util. cumulativeOffset (this. title); var left = pos [0]; var top = pos [1] + this. util. getHeight (this. title); // defines the style this. util. setStyle (this. body, 'left', left + 'px '); this. util. setStyle (t His. body, 'top', top + 'px '); this. util. setStyle (this. body, 'visibility ', 'visable'); this. util. setStyle (this. body, 'opacity ', this. opacity); this. util. setStyle (this. body, 'filter', 'Alpha (opacity = '+ this. opacity * 100 + ');},/*** Release Method * When the mouse moves out, the menu title is activated */deactivate: function () {// define the release style this. util. setStyle (this. body, 'visibility ', 'den den');},/*** listener Method * element: Listener object * name: Listener Method * obse Rver: method of execution * useCapture: method by which the browser calls the event (true is the Capture mode, false is the Bubbling mode) */addListener: function (element, name, observer, useCapture) {if (element. addEventListener) {element. addEventListener (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 (Rray) ;}, 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 loading event */window. onload = function (e) {new MenuList ('menus', 0.9 );}