本来想改一下菜单效果,因为响应式效果不好,换成效率高一些的展开效果。后来直接掉到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上,上面的代码相信你会用到的)
打开演示地址,右键另存即可获取源码。