前几天王桂明从网上找了网站设计素材-3种漂亮的下拉菜单样式,特别喜欢样式2,准备更换本博loper主题的菜单栏,因为loper主题不能有下拉菜单,甚是不方便,于是正好国庆放假期间,王桂明在家折腾起博客来,更换博客导航栏

先把代码换上去,发现被下面的文章挡住了,下拉菜单不能出,可能是div层的关系,于是修改CSS把下拉菜单提到上一层,但是原代码的CSS不适合loper主题,不得不手工一个一个的调整css样式,都调整完毕后,要把博客导航栏里的文字全部更换成博客代码,特别在首页调用分类名称和链接地址的方法和在首页调用page页面名称和链接地址的代码,原来没接触过,所以又花了一些时间从网上找资料和有效的解决方法,找到了2个方法,如下:

WordPress根据分类别名获取分类链接和分类ID

wordpress通过page的ID别名获取标题内容并且显示链接地址

根据上面的方法,把导航栏及下拉菜单都更换成代码,这样在后台更换分类名称不会影响到导航栏,也可以说这是个半自动的导航栏。

最后就是鼠标指到导航栏显示文字的问题,如图:

成功更换博客导航栏并带下拉菜单

成功更换博客导航栏并带下拉菜单

鼠标指到博客建设时显示title文字,被下拉菜单遮住了,查了CSS很长时间都没找出原因,头都 搞晕了,最后突然想起来,这段样式是写在JS里,于是找到loperjs.js,把里面的z-index增加数值,提到最上的一层,终于解决了问题,

本来想做完后写一篇教程的,但每个主题样式都 不一样,又不通用于是放弃写了,如果大家想用这个可以留言给我,我帮你来解决遇到的问题。

历经几天的修改博客导航栏终于成功修改完成,写这篇文章记录一下过程。

» 订阅本站: http://www.0523jz.com/feed