Comment utiliser JavaScript pour implémenter le menu de navigation secondaire dans les compétences WordPress_javascript

Menu de navigation
Le menu de navigation est depuis longtemps « profondément enraciné dans le cœur des gens », et son application sur les blogs est devenue de plus en plus importante et diversifiée. À partir de cet article, je lancerai plusieurs sujets sur le menu de navigation de WordPress et expliquerai comment l'utiliser. et améliorer le menu de navigation sur WordPress. Entre les sujets Il existe une certaine relation d'entreprise et la difficulté augmentera progressivement.

Il existe généralement deux types de menus de navigation sur WordPress, le menu de navigation par page et le menu de navigation par catégorie.
Vous en êtes-vous déjà souvenu ? WordPress peut écrire des pages indépendantes. Le menu de navigation des pages est un menu composé de la page d'accueil et de chaque page indépendante. Le menu de navigation des catégories est un menu composé de la page d'accueil et de chaque catégorie.
Voici la démonstration de l'effet
Puisque le menu se compose d'une page d'accueil et d'une liste de pages indépendantes ou d'une page d'accueil et d'une liste de catégories, nous devons traiter deux liens, à savoir les éléments de menu de la page d'accueil et d'autres éléments de menu.
De plus, nous devons également traiter les trois états des éléments de menu, à savoir l'état général, l'état actuel de l'élément de menu (par exemple : sur la page d'accueil, l'élément de menu de la page d'accueil est l'élément de menu actuel) et le menu sélectionné. état de l'article
Autrement dit, nous devons gérer 3 choses au total :
1. Autres éléments de menu en dehors de la page d'accueil
2. Éléments du menu d'accueil
3. Effets visuels lorsque les éléments de menu sont dans des états différents

Structure attendue :

<div id="menubar">
 <ul class="menus">
 <li class="..."><a href="http://.../">Home</a></li>
 <li class="..."><a href="http://.../">菜单项1</a></li>
 <li class="..."><a href="http://.../">菜单项2</a></li>
 <li class="..."><a href="http://.../">菜单项3</a></li>
 ...
 </ul>
</div>

Menu de navigation des pages

1. Liste de pages indépendante comme élément de menu
Appelez wp_list_pages pour obtenir une liste de pages indépendantes et utilisez les paramètres suivants :
profondeur : profondeur de la liste (nombre maximum de couches). Cet article traite du menu de premier niveau, donc la profondeur maximale est de 1
. title_li : chaîne de titre, non nécessaire ici, définie sur 0
sort_column : La méthode de tri des éléments de la liste, par ordre croissant selon l'ordre défini lors de la création de la page
L'instruction pour imprimer l'élément de menu de la page indépendante est :

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

2. Éléments du menu d'accueil
Puisque la classe générale d'une page indépendante est page_item, la classe de la page indépendante actuelle est current_page_item. Lorsque la page est la page d'accueil, la classe de l'élément de menu de la page d'accueil doit être current_page_item, dans les autres cas, c'est page_item. , nous avons besoin d'un code de succursale pour le déterminer classe :

<&#63;php
 
// 如果是首页, class 是 current_page_item
if (is_home()) {
 $home_menu_class = 'current_page_item';
// 如果不是首页, class 是 page_item
} else {
 $home_menu_class = 'page_item';
}
 
&#63;>

La déclaration pour imprimer l'élément de menu de la page d'accueil est :

<li class="<&#63;php echo($home_menu_class); &#63;>">
 <a title="Home" href="<&#63;php echo get_settings('home'); &#63;>/">Home</a>
</li>

3. Style de menu
Il s'agit d'un processus allant du général au spécial. Généralement, les styles des éléments de menu sont placés au premier plan et les styles des éléments de menu actuels et sélectionnés sont placés à l'arrière. Lorsque ces dernières conditions sont remplies, les premiers styles seront placés. écrasé, changeant ainsi l'apparence

.

/* 菜单项 */
#menubar ul.menus li {
 float:left; /* 靠左浮动 */
 list-style:none; /* 清空列表风格 */
 margin-right:1px; /* 右侧的间隔 */
}
/* 菜单项链接 */
#menubar ul.menus li a {
 padding:5px 10px; /* 内边距 */
 display:block; /* 显示为块 */
 color:#FFF; /* 文字颜色 */
 background:#67ACE5; /* 背景颜色 */
 text-decoration:none; /* 没有下横线 */
}
/* 当前菜单项链接 */
#menubar ul.menus li.current_page_item a {
 background:#5495CD; /* 背景颜色 */
}
/* 选中菜单项链接 */
#menubar ul.menus li a:hover {
 background:#4281B7; /* 背景颜色 */
}

Menu de navigation par catégorie

1. Liste des catégories comme élément de menu
Appelez la méthode wp_list_categories pour obtenir la liste des catégories et utilisez les paramètres suivants :
profondeur : profondeur de la liste (nombre maximum de couches). Cet article traite du menu de premier niveau, donc la profondeur maximale est de 1
. title_li : chaîne de titre, non nécessaire ici, définie sur 0
orderby : La méthode de tri des éléments de la liste, par ordre croissant selon l'ordre défini lors de la création de la page
show_count : Afficher ou non le nombre d'articles dans cette catégorie, il n'est pas nécessaire de l'afficher ici, mis à 0
L'instruction pour imprimer les éléments de menu de catégorie est :

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

2. Éléments du menu d'accueil
Il est similaire au menu de navigation des pages, sauf que la classe des éléments de menu est différente.
page_item a été remplacé par cat-item
current_page_item remplacé par current-cat

3. Style de menu
Étant donné que la classe des éléments de menu est légèrement différente, elle doit également être légèrement modifiée.
current_page_item remplacé par current-cat

Menu de navigation secondaire

Nous savons déjà comment créer un menu. Cette fois, nous allons utiliser une liste de catégories pour créer un menu de navigation secondaire. Ce que nous devons faire est de modifier le menu secondaire en fonction de celui d'origine et de traiter le menu secondaire. . (Veuillez vous assurer que la catégorie contient des sous-catégories, sinon le menu secondaire ne pourra pas être affiché.)
Nous devons gérer 3 choses au total :
1. Appelez le menu secondaire (sous-catégorie)
2. Style de menu secondaire
3. Effet du menu secondaire

Structure prévue

<div id="menubar">
 <ul class="menus">
 <li class="..."><a href="http://.../">Home</a></li>
 <li class="...">
  <a href="http://.../">菜单1</a>
  <ul class="children">
  <li class="..."><a href="http://.../">菜单项1</a></li>
  <li class="..."><a href="http://.../">菜单项2</a></li>
  <li class="..."><a href="http://.../">菜单项3</a></li>
  </ul>
 </li>
 <li class="...">
  <a href="http://.../">菜单2</a>
  <ul class="children">
  <li class="..."><a href="http://.../">菜单项4</a></li>
  </ul>
 </li>
 <li class="...">
  <a href="http://.../">菜单3</a>
  <ul class="children">
  <li class="..."><a href="http://.../">菜单项5</a></li>
  <li class="..."><a href="http://.../">菜单项6</a></li>
  </ul>
 </li>
 ...
 </ul>
</div>

Mettre en œuvre l'opération

1. Appelez le menu secondaire (sous-catégorie)
Vous souvenez-vous encore de la manière de définir la profondeur de la liste lors de la création du menu de navigation ? A cette époque, la profondeur était fixée à 1 pour ne pas afficher de sous-catégories. Maintenant, bien sûr, si vous voulez des sous-catégories de deuxième niveau, vous devez le faire. réglez la profondeur sur 2.
profondeur : profondeur de la liste (nombre maximum de couches). Cet article traite du menu secondaire, donc la profondeur maximale est de 2.
. L'instruction pour imprimer les éléments de menu de catégorie est :

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

2. Style de menu secondaire
Il s'agit simplement d'une modification du style d'origine et de l'ajout de styles de sous-catégories.

/* 二级菜单 */
#menubar ul.children {
 display:none; /* 初始化页面时不显示出来 */
 padding:0;
 margin:0;
}
/* 二级菜单的菜单项 */
#menubar ul.children li {
 float:none; /* 垂直排列 */
 margin:0;
 padding:0;
}
/* 二级菜单的当前菜单项链接 */
#menubar ul.children li a {
 width:100px; /* 对 IE6 来说十分很重要 */
}

La déclaration pour imprimer l'élément de menu de la page d'accueil est :

<li class="<&#63;php echo($home_menu_class); &#63;>">
 <a title="Home" href="<&#63;php echo get_settings('home'); &#63;>/">Home</a>
</li>

3. 二级菜单的效果
全部使用 JavaScript 实现, 为便于理解, 使用面向对象方式编写代码, 借鉴了部分 Prototype 框架的代码. 因为代码比较多, 不适合逐句解说, 所以我已标上了大量注释. 代码不是很复杂, 有 JS 基础的话应该不会存在障碍.
另外为了迎合个别人的口味, 加上透明效果. Enjoy!

/*
 
Author: mg12
Feature: MenuList with second-level menus
Update: 2008/08/30
Tutorial URL: http://www.neoease.com/wordpress-menubar-2/
 
*/
 
/** 类 */
var Class = {
 create: function() {
 return function() {
  this.initialize.apply(this, arguments);
 }
 }
}
 
/** 菜单列表 */
var MenuList = Class.create();
MenuList.prototype = {
 
 /**
 * 构造方法
 * id: 菜单列表
 * opacity: 透明度 (0.0 - 1.0, 0.0 为全透明, 1.0 为不透明)
 */
 initialize: function(id, opacity) {
 // 获取菜单列表
 this.obj = document.getElementById(id);
 if (!this.obj) { return; }
 
 // 对菜单列表内的所有菜单进行处理
 var menus = this.obj.childNodes;
 for (var i = 0; i < menus.length; i++) {
  var menu = menus[i];
  if (menu.tagName == 'LI') {
  // 构建菜单
  new Menu(menu, opacity);
  }
 }
 }
}
 
/** 菜单 */
var Menu = Class.create();
Menu.prototype = {
 
 /**
 * 构造方法
 * target: 目标菜单
 * opacity: 透明度 (0.0 - 1.0, 0.0 为全透明, 1.0 为不透明)
 */
 initialize: function(target, opacity) {
 this.util = new MenuUtil();
 
 // 获取目标菜单 (没多余元素)
 this.obj = this.util.cleanWhitespace(target);
 // 定义透明度, 默认为不透明
 this.opacity = opacity || 1;
 
 // 获取菜单
 this.menu = this.obj.childNodes
 
 // 重要! 如果菜单不包含菜单项, 则不进行处理
 if (this.menu.length < 2) { return; }
 
 // 菜单标题和菜单体
 this.title = this.menu[0];
 this.body = this.menu[1];
 
 
 // 定义初始样式
 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');
 
 // 添加监听器
 this.addListener(this.obj, 'mouseover', this.util.bind(this, this.activate), false);
 this.addListener(this.obj, 'mouseout', this.util.bind(this, this.deactivate), false);
 },
 
 /**
 * 激活方法
 * 当鼠标移动到菜单标题是激活
 */
 activate: function() {
 // 获取当前菜单体的位置
 var pos = this.util.cumulativeOffset(this.title);
 var left = pos[0];
 var top = pos[1] + this.util.getHeight(this.title);
 
 // 定义激活时样式
 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 + ')');
 },
 
 /**
 * 解除方法
 * 当鼠标移动出菜单标题是激活
 */
 deactivate: function(){
 // 定义解除时样式
 this.util.setStyle(this.body, 'visibility', 'hidden');
 },
 
 /**
 * 监听方法
 * element: 监听对象
 * name: 监听方法
 * observer: 执行的方法
 * useCapture: 浏览器调用事件的方式 (true 为 Capture 方式, false 为 Bubbling 方式)
 */
 addListener: function(element, name, observer, useCapture) {
 if(element.addEventListener) {
  element.addEventListener(name, observer, useCapture);
 } else if(element.attachEvent) {
  element.attachEvent('on' + name, observer);
 }
 }
}
 
/** 一些实用的方法 */
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];
 }
}
 
/** 添加到页面加载事件 */
window.onload = function(e) {
 new MenuList('menus', 0.9);
}