首页 开发指南

2013-11-22 村上桐树1,134

wordpress 导航特效

1
我们要做的效果如上图。

最近看到好多博客在导航里面都用了上面这种特效,本着一查到底的精神,我把他们的代码扣了下来,原以为是JS写得特效,直到扒到最后一层才发面,原来是CSS3里面的东西,实现起来,比JS要简单很多。

这个写法如下:

?.nav .sub-menu li:hover .sub-menu-2{
?? ?left:100%;
?? ?background:#c41d1d;
?? ?display:table;
?? ?position:absolute;
?? ?z-index:2013;
?? ?width:100%;
?? ?border-bottom: 4px solid #156BDA;
?? ?margin-top:-30px;
}

这里面的.sub-menu-2也是一个ul,可能有人会问,这个类名能不能改成UL,答案是否定的,经本人测试,这个地方的要求指代分明,力求唯一,其实想想也不难理解,如果我们用UL来代替这个.sub-menu-2,假如这个代码执行了,那么.nav .sub-menu li下面如果有多个ul,岂不是要乱套了。

所以,即便是我们这里用了一个.sub-menu-2,也是要求这个元素是.nav .sub-menu li下面唯一的一个。

所以,我们要想把wordpress里面的wp_nav_menu做成这样的效果,我们首先要改变得就是wp_nav_menu这个函数的输出,而这个函数的默认输出如下:

<ul>
<li id="menu-item-8" class="...">
<a href="#">5UCMS</a>
<ul class=sub-menu>
<li><a>......</a>
<ul class="sub-menu">
<li>...</li>
</ul>
</li>
</ul>
</li>
</ul>

一个十分完善的输出。这样的输出,其实给我们的CSS带来了很多困扰,所以我们要做得就是改变这样的输出结构。

其实,如果我们想用JS来实现,一旦改变了这个结构,工作就变得简单多了。

关于如何改变这个输出,可以参考这里:http://www.sbmzenith.com/?p=328【wp_nav_menu中的walker详解

这里不再赘述,举例说明。

其实我们这里这个菜单的层级是有规划的,我们这里以三层为例。先写一个扩展类:

class companyMenu extends Walker_Nav_Menu

重写函数:function start_lvl

其中

?$indent = str_repeat("t", $depth);
?? ??? ?if($depth == 0){
?? ??? ?$output .= "n$indent<ul class="sub-menu">n";
?? ?}
?? ?else if($depth == 1){
?? ??? ?$output .= "n$indent<ul class="sub-menu-2">n";
?? ??? ?}
?? ?}

这里我们级顶层的ul和二级栏目中的ul不同的CLASS。

?if($depth == 0){
?? ??? ?$output .= $indent . '<li>';
?? ??? ?}
?? ??? ?else{
?? ??? ?$output .= $indent . '<li' . $id . $value . $class_names .'>';?? ?
?? ??? ?}

这里我们给顶层的li一个统一的class,便于CSS控制。

然后这样调用:

?<?PHP
?? ?wp_nav_menu(array( ?
??? 'theme_location'? => '', ?
??? 'menu'??????????? => 'head-menu', ?
??? 'container'?????? => 'div', ?
??? 'container_class' => 'nav', ?
??? 'container_id'??? => 'nav',
??? 'echo'??????????? => 1, ?
??? 'fallback_cb'???? => 'wp_page_menu', ?
??? 'before'????????? => '', ?
??? 'after'?????????? => '', ?
??? 'link_before'???? => '', ?
??? 'link_after'????? => '', ?
??? 'items_wrap'????? => '<ul>%3$s</ul>', ?
??? 'depth'?????????? => 0, ?
??? 'walker'????????? => new companyMenu('') ?
));
?>

接下来就是CSS了。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

会员评论:(0)

声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!
©www.sbmzenith.com 2013-2020 All Rights Reserved.
豫ICP备15009393号