导航菜单
导航菜单早已 "深化民意", 在博客上的使用日益重要且多样. 从本文开端, 我将展开几个对于 WordPress 导航菜单的话题, 探讨如何在 WordPress 上应用和增强导航菜单, 话题间有肯定的承接关系, 难度也会逐渐添加.
WordPress 上的导航菜繁多般有两种, 页面导航菜单和分类导航菜单.
可曾记得? WordPress 是能够撰写独立页面的, 页面导航菜单就是以首页和各个独立页面组成的菜单. 而分类导航菜单则是以首页和各个分类组成的菜单.
这是成果演示
既然菜单由首页和独立页面列表或首页和分类列表所组成, 咱们就需求解决两个环节, 即首页菜单项和其余菜单项.
另外, 咱们还需求解决菜单项的三个形态, 即普通形态, 以后菜单项形态 (如: 在首页中, 首页菜单项就是以后菜单项) 和选中菜单项形态.
也就是说, 咱们共需求解决 3 个事件:
1. 首页外的其余菜单项
2. 首页菜单项
3. 菜单项处于不同形态时的视觉成果
料想构造:
<p 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> </p>
页面导航菜单
1. 独立页面列表作为菜单项
调用 wp_list_pages 获取独立页面列表, 并应用以下参数:
depth: 列表深度(层的**数量), 本文探讨的是一级菜单, 故**深度为 1
title_li: 题目字符串, 这里不需求, 设为 0
sort_column: 列表项的排序形式, 依据创立页面时所设定的 order 进行升序陈列
打印独立页面菜单项的语句是:
<?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?>
2. 首页菜单项
因为普通独立页面的 class 是 page_item, 以后独立页面的 class 是 current_page_item. 当页面是首页时, 首页菜单项的 class 应该是 current_page_item, 其余状况则是 page_item. 为此, 咱们需求一段分支代码来为它确定 class:
<?php
// 假如是首页, class 是 current_page_item
if (is_home()) {
$home_menu_class = 'current_page_item';
// 假如不是首页, class 是 page_item
} else {
$home_menu_class = 'page_item';
}
?>
打印首页菜单项的语句是:
<li class="<?php echo($home_menu_class); ?>">
<a title="Home" href="<?php echo get_settings('home'); ?>/">Home</a>
</li>
3. 菜单的款式
这是一个从普遍到非凡的解决进程, 普通菜单项的款式放后面, 以后和选中菜单项的款式放在前面, 当后者条件满足就会笼罩前者的款式, 从而扭转外观.
/* 菜单项 */
#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; /* 背景颜色 */
}
分类导航菜单
1. 分类列表作为菜单项
调用办法 wp_list_categories 获取分类列表, 并应用以下参数:
depth: 列表深度(层的**数量), 本文探讨的是一级菜单, 故**深度为 1
title_li: 题目字符串, 这里不需求, 设为 0
orderby: 列表项的排序形式, 依据创立页面时所设定的 order 进行升序陈列
show_count: 能否显示该分类的文章数量, 这里不需求显示, 设为 0
打印分类菜单项的语句是:
<?php wp_list_categories('depth=1&title_li=0&orderby=name&show_count=0'); ?>
2. 首页菜单项
与页面导航菜单类似, 只是菜单项的 class 有所不同.
page_item 更改为 cat-item
current_page_item 更改为 current-cat
3. 菜单的款式
由于菜单项的 class 略有不同, 所以也需稍作修正.
current_page_item 更改为 current-cat
二级导航菜单
咱们曾经晓得菜单如何创立了, 这回咱们要应用分类列表做成二级导航菜单. 咱们要做的其实是在原有的根底上改出二级菜单, 以及对二级菜单进行解决. (请确保的的分类中蕴含子分类, 否则调不出二级菜单.)
咱们共需求解决 3 个事件:
1. 调出二级菜单 (子分类)
2. 二级菜单的款式
3. 二级菜单的成果
料想构造
<p 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> </p>
施行操作
1. 调出二级菜单 (子分类)
能否还记得制造导航菜单时是如何设定列表深度的? 过后将深度设为 1 是为了不显示子分类, 如今要二级子分类当然要将深度设为 2 了.
depth: 列表深度(层的**数量), 本文探讨的是二级菜单, 故**深度为 2.
打印分类菜单项的语句是:
<?php wp_list_pages('depth=2&title_li=0&sort_column=menu_order'); ?>
2. 二级菜单的款式
也只是在原本的款式上进行修正, 加上子分类的款式.
/* 二级菜单 */
#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 来说非常很重要 */
}
打印首页菜单项的语句是:
<li class="<?php echo($home_menu_class); ?>">
<a title="Home" href="<?php echo get_settings('home'); ?>/">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);
}
以上就是安达网络工作室关于《以JavaScript来实现WordPress中的二级导航菜单的方法》的一些看法。更多内容请查看本栏目更多内容！
假如您的博客有很多很多图片，空间又有流量限度，那么避免他人盗取本人的图片链接应该说是势在必行了，由于...
WordPress 3.0 引入导航菜单性能, 让页面的导航和链接的治理变得简略易用. WP 向用户提供了菜单治理页面和多...
通过两天的正则表白式的学习，和钻研wordpress的路由函数，胜利完成了自定义wordpress路由性能，以下是路由...
本文实例讲述了WordPress完成回复文章评论后发送邮件告诉的性能。分享给大家供大家参考，详细如下： 很多时...
本文实例讲述了WordPress增加前台注册性能的办法。分享给大家供大家参考。详细剖析如下： WordPress属于集体...
wordpress头部的代码十分多，包括WordPress版本，前后文、第一篇文章、主页meta信息等各种冗余代码，这些对...
安达网络工作室自成立以来，一直专注于互联网品牌建设，我们团队的成员曾务于国内优秀广告公司及互联网公司业务类型涉及WEB视觉、交互设计、移动终端用户体验等质量和信誉是我们存在的基石。我们注重客户提出的每个要求，充分考虑每一个细节，积极的做好服务，努力开拓更好的视野。在所有新老客户面前，我们都很乐意虚心、朴实的跟您接触，更深入的了解您的企业，以便为您提供更优质的服务！
微信二维码
QQ二维码
