WordPress动态菜单高亮
我的图书馆
WordPress动态菜单高亮
网站/博客访问者可以通过高亮显示的动态菜单了解自己目前所在位置。高亮显示的动态菜单就像地图上“你在这里”的温馨提示一样。WordPress.org就利用了高亮显示动态菜单的技术。
根据页面上有黑色加粗下划线的字体，我们可以确定，目前我们所在的页面属于网站“DOCS”（文档）版块。
在这篇文章里，我们会谈到怎样为当前页面创建一个高亮导航菜单，也有些插件能帮我们完成大部分创建任务。
能够使导航菜单高亮显示的因素包括：
加载当前位置和导航位置的高亮显示
移动鼠标时，其它导航菜单的高亮显示
显示导航菜单的子菜单，保留浏览路线（即从主页进入各级页面的路径）。（本文暂不涉及这方面内容）
、、、、等都可以达到高亮显示导航菜单的效果。但这里我们只介绍用 CSS/PHP高亮显示方法，要使用JavaScript等其它方法的读者请参考其它资料。
下面是基本导航栏的常见样式：
此外页面的样式表单中可能还包括一些代码，这些代码使“当前”ID的列表项不同于其它列表项。
代码在静态页面中可以正常运行，但动态页面要相对复杂。假设导航菜单在某个网站的侧边栏中，而侧边栏存在于一个独立文件中，该文件从不同文件中调用数据。显然，根据之前的描述，无论当前是什么页面，只有一个菜单项能够高亮显示。这当然不是我们希望的结果。
通过PHP，我们可以实现高亮显示当前页面的导航效果。结合与WordPress的函数，我们可以测试访问者正浏览的页面并根据测试结果改写代码。
要完成以上任务，有两种方法可供选择。第一种方法需要创建一个变量（$current），且该变量值要等于我们所在的页码，同时还需要在每
个页面中放入一些CSS代码，而不是将所有CSS代码放在主CSS文档中。第二种方法糅合了PHP，略为复杂，但同时意味着我们可以将所有样式存放在单独
的CSS文档中。
第一种方法：在每个页面中插入CSS代码
第一步，从列表中删除 id="current" ，并为所有列表项重新添加一个唯一的id属性。
接下来出场的是PHP。
我们要编写一个条件语句，判断当前被浏览的页面内容并根据判断结果定义变量。
本段代码利用is_page(); 函数判断当前页面的标题。例如如果标题是“Page
One”，变量$current被赋值"" ；如果标题是“Page Two”，变量$current被赋值
""，等等。本段代码应该出现在WordPress模板 &head&&/head&
标签之间的header.php文件中。
现在我们需要编写一些能够响应以上代码并能根据$current的值高亮显示相应列表项的CSS代码。CSS文件不允许动态内容，所以我们不能在CSS文件中编写这类代码。因此我们要将高亮显示列表项的代码移出CSS文件，存储在动态内容所在的页面中。
假设我们这时我们只需要将某个菜单项的背景色换为黄色，表示高亮显示。这时的CSS代码是：
&style type="text/css"&
#current {
background-color:
接下来我们将代码移出CSS文件，存放在当前页面页头部分的内联CSS区块中。
&style type="text/css"&
#current {
background-color:
如果在WordPress模板中，这段代码应该被放在&head&&/head& 标签之间的header.php文件中。
之后是动态效果的实现。我们用一些PHP代码来代替#current选择符：
&style type="text/css"&
#&?php echo $&?& {
background-color:
这段代码输出$current的值，最终完善CSS代码，成功使相应列表项高亮显示。
第二种方法：将所有CSS代码放在一个文件中
使用这种方法，我们也需要从列表中删除 id="current"，但不用再为每个列表项都添加唯一的id属性。我们要让PHP代码完成两个任务：决定哪一个页面是当前访问页面；显示“current”的ID，是导航菜单与众不同。
下面是最初状态下的导航菜单列表：
简单清爽。我们只需要修改每一行代码的开始部分，也就是开始标签& li&。（暂时）保留列表的其它部分。
接下来我们要输入一些if语句，让PHP来判断用户目前所在页面，同时PHP将“current”显示在页面右边。以上& li&元素组中某一对& li&元素显示为：
第六行中两个相邻的大于号是刻意同时出现的。if语句中断了开始标签& li&，第六行中的第二个符号表示结束第一行的开始标签。
记住，这只是列表中的第一个列表项；我们需要为每一个导航菜单进行类似操作。但如果使用模板，只需要在header.php中操作一次就可以了。
最终结果是，如果用户在主页上，WordPress为导航菜单生成的HTML代码会是：
& li id="current"&&a href="#"&Page One&/a&&/li&
在其它页面则显示为：
& li&&a href="#"&Page One&/a&&/li&
接下来我们就可以制作链接了，这样访问者访问主页时，导航菜单项就能清晰地显示出相应内容。
导航菜单怎样访问header.php文档，怎样让访问者明白自己目前所在的位置，下面有一个关于这方面的介绍：
根据网站上放置得当的ID，访问者随时都能够了解自己的具体位置，即使他们是从搜索引擎来到我们的网站。
在WordPress中我们可以利用来判断当前页面属性，并设置代码让导航菜单做相应显示。
根据之前的描述，我们还需要规定一些CSS声明来帮助当前菜单项：
background-color: #336699;
现在导航菜单的高亮显示效果就出来了。
利用第二种方法，所有CSS文件都存放在主CSS页面中。当我们改动文件时，不再需要进入不同模板更改，非常方便。这也是大多数人喜欢CSS的原因吧。
动态菜单高亮只适用于WordPress 1.5之后版本中“页面”功能所生成的。但利用不同的is_functions，我们也可以用这种方法来测试其它环境。 Ryan Boren总结了不同is_functions函数以及它们可以测试的环境。WordPress手册的一文也对此有所介绍。
中一篇文章列举了高亮显示动态菜单的实际用例。
下面的资料可能对我们自定义高亮显示动态菜单以及创建菜单和导航有所帮助。
下列插件可以帮助我们完成复杂的php编码，我们只需要编写css。
——利用普通页面结果创建动态菜单。该插件提供动态高亮以及多层菜单等选项。
——该插件可快速为控制板中的页面、类别、日志、主页、存档以及书签生成动态表，并且用户可以选择是否使用下拉式菜单。如果使用主题则无需再编码。
——利用定制的hook（钩子）将页面导航置入主题。同时支持删除页面、新增页面、网站地图、顶级菜单、二级菜单等。
TA的推荐TA的最新馆藏当前位置： →
→ 菜单高亮显示的几种情况及实现
菜单高亮显示的几种情况及实现
& 作者及来源： zzh - 博客园 &
&收藏到→_→：
摘要: 菜单高亮显示的几种情况及实现
"菜单高亮显示的几种情况及实现"：：
前段时间遇到了一个需求：访问页面时，跟该页面相关的menu要求保持高亮。
因为是第一次遇到这个问题，在处理的时候走了不少弯路，后来在网络上搜索了一下，发现菜单高亮显示有几种不同层次的需求。
在下不才，在此将这几种需求以及各自的解决方案列出来，以作抛砖引玉之用，也希望后来遇到这种问题、并且看到我的帖子的朋友能从中获益。
代码是从项目中抽出来稍加修改而来，也许有的地方不够完善，大家一起探讨！
1、当鼠标移入后，菜单显示成高亮；移出后恢复
2、在1的基础上，单击某个菜单项，该项保持高亮（页面不刷新）
3、在1的基础上，单击某个菜单项，该项保持高亮（页面刷新）
4、当鼠标移入后，改变菜单的背景图片，与1效果类似
1、这是最基本的一步，基本上要求菜单高亮显示的，这个需求会同时存在；这里我们用css来解决这个需求；
博客园_总排行榜
博客园_最新
博客园_月排行榜
博客园_周排行榜
博客园_日排行榜js代码_js特效免费下载_JS特效代码网&&
当前位置： &
jquery导航栏左右滑动焦点高亮菜单特效代码
本js特效代码兼容：ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器
jquery导航栏左右滑动焦点高亮菜单特效代码(function(a){&&&&
a.fn.webwidget_menu_glide=function(p){&&&&
var&p=p||{};&&&&
var&f=p&&p.menu_text_size?p.menu_text_size:&12px&;&&&&
var&g=p&&p.menu_text_color?p.menu_text_color:&blue&;&&&&
var&h=p&&p.menu_margin?p.menu_margin:&10px&;&&&&
var&i=p&&p.menu_width?p.menu_width:&100px&;&&&&
var&j=p&&p.menu_height?p.menu_height:&20px&;&&&&
var&k=p&&p.menu_sprite_color?p.menu_sprite_color:&red&;&&&&
var&l=p&&p.menu_background_color?p.menu_background_color:&black&;&&&&
var&m=p&&p.sprite_speed?p.sprite_speed:&fast&;&&&&
f&+=&&px&;&&&&
h&+=&&px&;&&&&
i&+=&&px&;&&&&
j&+=&&px&;&&&&
var&n=a(this);&&&&
if(n.children(&ul&).length==0||n.find(&li&).length==0){&&&&
n.append(&Require&menu&content&);&&&&
return&null&&&&
s_m(n.children(&ul&).children(&li&),h,i,j);&&&&
s_m_t_c(n.find(&a&),g,j,f);&&&&
n.css(&background-color&,l);&&&&
if(n.children(&ul&).children(&li&).is(&.current&)){&&&&
var&o=n.children(&ul&).children(&li&).filter(&.current&).offset()&&&&
}else{&&&&
var&o=n.children(&ul&).children(&li:first&).offset()&&&&
var&q=o.left+'px';&&&&
s_m_s_c(n.find(&.webwidget_menu_glide_sprite&),k,i,j,q);&&&&
n.children(&ul&).children(&li&).hover(function(){&&&&
var&b=$(this).offset();&&&&
var&c=b.left+'px';&&&&
n.find(&.webwidget_menu_glide_sprite&).stop().animate({&&&&
left:c&&&&
},function(){&&&&
n.find(&.webwidget_menu_glide_sprite&).stop().animate({&&&&
left:q&&&&
n.children(&ul&).children(&li&).children(&ul&).children(&li&).hover(function(){},function(){});&&&&
function&s_m_t_c(a,b,c,d){&&&&
a.css(&color&,b);&&&&
a.css(&line-height&,c);&&&&
a.css(&font-size&,d)&&&&
function&s_m(a,b,c,d){&&&&
style=&margin-right:&+b+&;&width:&&+c+&;&height:&&+d+&;&;&&&&
a.attr(&style&,style)&&&&
function&s_m_s_c(a,b,c,d,e){&&&&
a.css(&background-color&,b);&&&&
a.css(&width&,c);&&&&
a.css(&height&,d);&&&&
a.css(&left&,e)&&&&
})(jQuery);
此评论不代表本站观点}