本来想改一下菜单效果,因为响应式效果不好,换成效率高一些的展开效果。后来直接掉到css的深坑里面,其实最难的部分不是css,而是js。
js解决之后看到一堆css我也不想继续了。只是把jq抓取菜单a标签下的文本方法记录一下。


jQ有一个text()方法可以获取指定标签的内的文本。于是我刚开始就这样:

$("#nav ul>li>a").text();

这样就直接抓取了所有菜单文本名称,全部挤在一起返回一个文本,这当然不是我想要的,我只需要抓取当前一个个菜单li下对应的一个个菜单名来使用,而不是全部。网上那个搜索啊。。。 没有找到,只能想了一个比较笨的方法,用for循环:

var li_num = $(".nav>li>a").size(); // 一级a标签的数量
for (i=0;i<li_num;i++) {
    var li_text = $(".nav>li>a").eq(i).text();
    // 为每一个菜单a标签最后插入对应的菜单名
    $(".nav>li>a").eq(i).append('<span class="three-d-box"><span class="front">'+li_text+'</span><span class="back">'+li_text+'</span></span>');
}

上面append是想插入一些标签,因为WP的菜单没办法直接改函数,只能用js。


顺便贴一下这个3D导航菜单效果吧,屌炸天的纯CSS3菜单。网上有横向的,我改成了纵向:
(如果你需要加到wordpress上,上面的代码相信你会用到的)
3d导航菜单

演示地址

打开演示地址,右键另存即可获取源码。