分享一段浮动导航代码

这个名称好像不准确的，反正就那么个意思吧，因为博主的wordpress blog是单栏的，虽然很简洁，但带来的问题也显而易见：

就是一些信息无法有效的在页面上展开，如果放在footer区域，又无法很好地起到引导功能。

因此做了个侧边栏，以弥补单栏风格信息量不足的的缺陷，这对于那些采用单栏风格的博主来说，有一些作用。说明下，是从新蛋网掘出来的代码，本来要从淘宝商城扒的，但弄了一半发现几个地方没法修改，也可能是博主水平太低所致啊，呵呵。

在chrome下测试成功，IE9下有点小毛病但不影响使用，以IE6为核心的浏览器就悲催了。现公布出来，也有个抛砖引玉的意思，希望大侠们解决IE6的问题。

先上个图：

使用说明：

下载附件解压后：

1、查找浮动导航.php文件中的：<script type=”text/javascript” src=”<?php，把这两处ＪＳ文件路径改成你自己的。（修改主题文件夹的名称即可）
该文件中第10行的4处UTF8字符为导航条的名称：

下面四处php代码为调用的最新图文、热门评论等内容，可以根据自己要求修改，如果你想直接使用它们，请确保已经定义了相关函数或安装了有关插件。

2、把修改后的 浮动导航.php 中的全部内容复制到你所在主题的合适位置，博主是放到了header.php的末尾。
3、把/nav/daohang.css的样式全部复制到所用主题的style.css，当然也可直接引用，注意检查是否和已有样式重名。
4、 把/nav文件夹以及修改后的主题文件（例如上面提到的header.php）上传到主题目录覆盖，然后刷新下首页看看效果吧。

5、关于CSS的几处说明：

 #topNav{clear:both;width:100%;margin:0 auto;position: fixed;left: 0;top: 160px;}

中的，

left: 0;top: 160px;

前者是定义导航条居左，当然也可以改成right；后者是距离顶部的距离，调整它以便再合适的位置显示。

 #topNav .allCateNav{width:130px;float:left;z-index:9999;}

用来定义导航条的宽度。注意这个宽度和#topNav .catePop中

left:120px;

的关系，这决定着导航条和点击后出现的内容DIV之间的距离，如果距离过大的话，当从导航条滑向该DIV时，DIV会消失，菜鸟最好不要修改这两项CSS，高手无视之。

好了就这些了，网速坑爹，重写了好几遍，晕咯。

差点忘了放下载地址，直接右键另存为：http://shiya.net/wp-content/uploads/shiya.net浮动导航.zip。

相关文章

获取新版新浪微薄背景图片的方法

完美wordpress前台弹出登录窗（优化退出代码）全解析

iP2主题，基于P2

又要出发了

前台发布文章好难啊

月亮小镇(Moon Township)重要更新——前台弹出文章发布框