Cara menggunakan JavaScript untuk melaksanakan menu navigasi sekunder dalam kemahiran WordPress_javascript

Menu navigasi
Menu navigasi telah lama "berakar dalam hati orang ramai", dan aplikasinya di blog menjadi semakin penting dan pelbagai Bermula dari artikel ini, saya akan melancarkan beberapa topik mengenai menu navigasi WordPress dan membincangkan cara menggunakannya dan mempertingkatkan menu navigasi pada WordPress Antara topik Terdapat hubungan usaha tertentu, dan kesukaran akan meningkat secara beransur-ansur.

Secara amnya terdapat dua jenis menu navigasi pada WordPress, menu navigasi halaman dan menu navigasi kategori.
Pernahkah anda ingat? WordPress boleh menulis halaman bebas Menu navigasi halaman ialah menu yang terdiri daripada halaman utama dan setiap halaman bebas Menu navigasi kategori ialah menu yang terdiri daripada halaman utama dan setiap kategori.
Ini adalah demonstrasi kesan
Memandangkan menu tersebut terdiri daripada halaman utama dan senarai halaman bebas atau halaman utama dan senarai kategori, kita perlu berurusan dengan dua pautan, iaitu item menu halaman utama dan item menu lain.
Selain itu, kita juga perlu memproses tiga keadaan item menu, iaitu keadaan umum, keadaan item menu semasa (contohnya: pada halaman utama, item menu halaman utama adalah item menu semasa) dan menu yang dipilih. keadaan item Dalam erti kata lain, kita perlu menangani 3 perkara secara keseluruhan:
1. Item menu lain di luar laman utama
2. Item menu utama
3. Kesan visual apabila item menu berada dalam keadaan berbeza

Struktur yang dijangkakan:

<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 navigasi halaman

1. Senarai halaman bebas sebagai item menu

Panggil wp_list_pages untuk mendapatkan senarai halaman bebas, dan gunakan parameter berikut:
kedalaman: kedalaman senarai (bilangan maksimum lapisan Artikel ini membincangkan menu peringkat pertama, jadi kedalaman maksimum ialah 1
). title_li: rentetan tajuk, tidak diperlukan di sini, tetapkan kepada 0
sort_column: Kaedah pengisihan item senarai, dalam tertib menaik mengikut susunan yang ditetapkan semasa membuat halaman
Pernyataan untuk mencetak item menu halaman bebas ialah:

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

2. Item menu utama

Memandangkan kelas umum halaman bebas ialah page_item, kelas halaman bebas semasa ialah current_page_item Apabila halaman adalah halaman utama, kelas item menu halaman utama hendaklah current_page_item, dalam kes lain ia adalah page_item , kami memerlukan kod cawangan untuk menentukan kelas:

<&#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;>

Pernyataan untuk mencetak item menu halaman utama ialah:

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

3. Gaya menu

Ini adalah proses dari umum kepada khas Secara umumnya, gaya item menu diletakkan di hadapan, dan gaya item menu semasa dan terpilih diletakkan di belakang Apabila syarat terakhir dipenuhi, gaya terdahulu akan menjadi ditimpa, sekali gus menukar rupa

/* 菜单项 */
#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 navigasi kategori

1. Senarai kategori sebagai item menu

Panggil kaedah wp_list_categories untuk mendapatkan senarai kategori, dan gunakan parameter berikut:
kedalaman: kedalaman senarai (bilangan maksimum lapisan Artikel ini membincangkan menu peringkat pertama, jadi kedalaman maksimum ialah 1
). title_li: rentetan tajuk, tidak diperlukan di sini, tetapkan kepada 0
orderby: Kaedah pengisihan item senarai, dalam tertib menaik mengikut susunan yang ditetapkan semasa membuat halaman
show_count: Sama ada untuk memaparkan bilangan artikel dalam kategori ini, tidak perlu memaparkannya di sini, ditetapkan kepada 0
Kenyataan untuk mencetak item menu kategori ialah:

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

2. Item menu utama

Ia serupa dengan menu navigasi halaman, kecuali kelas item menu adalah berbeza.
page_item ditukar kepada cat-item
current_page_item ditukar kepada current-cat

3. Gaya menu

Kerana kelas item menu sedikit berbeza, ia juga perlu diubah suai sedikit.
current_page_item ditukar kepada current-cat

Menu navigasi kedua

Kami sudah tahu cara membuat menu Kali ini kami akan menggunakan senarai kategori untuk membuat menu navigasi sekunder . (Sila pastikan kategori mengandungi subkategori, jika tidak, menu kedua tidak boleh dibawa ke atas.)

Kita perlu menangani 3 perkara secara keseluruhan:
1. Panggil menu kedua (subkategori)
2. Gaya menu sekunder
3. Kesan menu sekunder

struktur yang diramalkan

<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>

Laksanakan operasi

1. Panggil menu kedua (subkategori)

Adakah anda masih ingat bagaimana untuk menetapkan kedalaman senarai semasa membuat menu navigasi Pada masa itu, kedalaman ditetapkan kepada 1 supaya tidak memaparkan subkategori Sekarang, sudah tentu, jika anda mahukan subkategori peringkat kedua, anda mesti tetapkan kedalaman kepada 2.
kedalaman: kedalaman senarai (bilangan maksimum lapisan Artikel ini membincangkan menu kedua, jadi kedalaman maksimum ialah 2.
Kenyataan untuk mencetak item menu kategori ialah:

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

2. Gaya menu sekunder

Ia hanyalah pengubahsuaian kepada gaya asal dan menambah gaya subkategori.

/* 二级菜单 */
#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 来说十分很重要 */
}

Pernyataan untuk mencetak item menu halaman utama ialah:

<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);
}