在WordPress中使用Dock样式导航栏 - 博客系统 - 系统选型 - TechWeb-技术社区

TechWeb-技术社区 » 系统选型 » 博客系统 » 在WordPress中使用Dock样式导航栏

打印 \| 推荐 \| 订阅 \| 收藏标题: [推荐] 在WordPress中使用Dock样式导航栏
本主题由 TechMaster 于 2008-6-6 11:41 加入精华

新人

TW中级会员

UID 117276
精华 7
积分 408
帖子 237
阅读权限 30
注册 2007-3-21
状态离线

#1

发表于 2008-6-6 11:36 资料短消息加为好友

在WordPress中使用Dock样式导航栏

对于Dock这个名字，大家应该不会陌生。最著名的就是苹果电脑中的Dock，当鼠标经过时候它就出现并显示效果，平常时候就隐藏不见，其实就跟Windows的隐藏工具栏一样。tech.techweb.com.cn9K8@#q"d*z(M4`
[attach]1288[/attach]
现在我们也可以把类似效果的导航栏添加到WordPress中使用（这里DEMO，请把鼠标移到屏幕顶部中央），具体的修改方法如下：
1. 首先下载这个文件，并把它上传到WordPress的JS目录。
2. 修改header.php文件，在</head>标签之前添加下面一句：

<script src="hide_menu.js" type="text/javascript"></script>
0^!a8C&t&W4F'y.x3?1|3`

3. 下载这个CSS样式文件，并把语句复制到你的style.css文件中。
4. 在模板文件中查找<body>标签，一般在header.php或者index.php文件中，并紧跟其下面增加如下语句：-q3R3n-A/s;o*y

<div id="hit_area" ></div>TechWeb-技术社区9?9s*_5W&o5I
<div id="menu_holder">
<div id="nav">
0v5~9[,a7g*b'{!t<ul>
:R!z/}!E5_,f;R"A(u<li><a href="http://jstween.blogspot.com">jstween</a></li>
#{+B:L-v Z<li><a href="http://ww.2210media.com">2210media</a></li>6n#z*b-C2g3t%d
<li><a href="http://www.digg.com">Digg</a></li>程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛5F!I(m(z:y1v"a1u
<li><a href="http://www.cssmania.com">CSS Mania</a></li>
(J+z#j$\7A7Z b f0|/@tech.techweb.com.cn<li><a href="http://www.kirupa.com">Kirupa</a></li>
0H+|+])K9Y1m#c*t%t)K*Y8l</ul>TechWeb-技术社区/G%\)D#H1D;~%K#j%C
</div>
#@8o/` C8G7o+d%ttech.techweb.com.cn</div>:y(g.N!I)y7T'a"|9t#g
<div id="hit_area2" >程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛+i+k0g.Y'K.T%D3i;l9{3m
<!– contenu de la page ici –>
4Q9A#I"Q)C"q-`$M%Y/M</div>
%w(|*f2Q"U'\TechWeb-技术社区

就这么简单，OK，enjoy yourself！5`'f*g%E!n"f!L

[ 本帖最后由 TechMaster 于 2008-6-6 11:38 编辑 ]

附件: 您所在的用户组无法下载或查看附件

引用回复

当前时区 GMT+8, 现在时间是 2008-10-8 08:23
京ICP证060517号