创建WordPress主题的悬浮菜单

或者叫弹出式菜单,下拉菜单,悬浮延长菜单…等

等等。其实悬浮菜单指的不过是当你的鼠标滑过某一个链接时,出现一个链接列表,而鼠标如果不放在该链接上面,悬浮菜单又自动收缩隐藏。它之所以有这么多的名字,是因为要创建一个悬浮菜单有多种方法。它的命名取决于使用何种技术。

注:此文原文为Small Potato的Do-It -Yourself WordPress Hover Menu,我在这里添油加醋的翻译一下,希望Small Potato和阅读此文的你都不要介意,重要的如果你正好需要或将来需要到弄一个Wordpress的悬浮菜单,而此文帮到了你。

不管使用哪种方法来创建Wordpress的悬浮菜单,这个方法都不是那么容易的。一开始,你可能试图想要使用纯CSS的技术来实现这个悬浮菜单,但很快你会发现,IE浏览器会把这个悬浮菜单显示的一塌糊涂。

经过一个小时左右的折腾,你放弃了纯CSS,你又试图使用Javascript,但你会发现,Javascript操作起来更加困难,如果你之前从未学过JS,那将会在创建的过程中碰到很多麻烦,浪费很多时间。(老帕注:原文里,Small Potato不建议使用Javascript的原因是需要为Javascript破费一些MONEY。我实在想不出来,在中国,使用Javascript做个悬浮菜单,难道还需要向谁付费?)

所以,Javascript你也放弃了。幸运的是,你还有可靠的小土豆。(不幸运的是,为你翻译的是不可靠的老帕)。我将向大家分享:如何通过简单的方法创造一个悬浮菜单,并且不需要使用a:hover标签,也不会在IE浏览器下显示错误。

使用a:hover创建的悬浮菜单,在IE浏览器下无法正常显示,老帕我顺便再一次牢骚:每次用CSS设计主题的时候,真他妈的希望全世界只有一种浏览器。
下面一个通过a:hover创建悬浮菜单的简单例子 :

<a href="#">Regular Link Here

<span>
<a href="#">Hover Link 1</a>
<a href="#">Hover Link 2</a>
</span>

</a>

在上面的例子里面,Hover Link 1和Hover Link 2在IE浏览器下是不能够正常显示的,不过,用纯CSS和a:hover创建悬浮菜单,那意味着你已经掌握了创建过程中的一些技巧。

那如何创建一个不需要使用a:hover的悬浮菜单呢,简单,使用:hover标签,可是IE是不支持:hover的,那就要通过一些其它的途径来让IE支持,你需要一是个特殊格式的文件: csshover.htc 下面是这个文件的两种版本:

Version 1.42.060206 (:hover and :active) download | view
Version 2.02.060206 (1.42 and :focus) download | view

下载这件文件,丢到你的主题文件夹里面,然后在header.php里面加上下面的代码:

<!--[if IE]>
<style type="text/css">
body{ behavior:url("<?php bloginfo('template_directory'); ?>/csshover.htc"); }
</style>
<![endif]-->

OK,现在你的主题已经拥有了这个挺板札的文件csshover.htc,它的功能就是让IE支持:hover标签,你所要做的是寻找一种方法来创建你的悬浮菜单,下面是一个简单的例子:
DGX:请注意,有些朋友可能会奇怪,IE支持a:hover啊?a:hover和:hover是有区别吗?当然有区别,不信你去试一下给li:hover设一个背景颜色,在FF下能显示,在IE下就不能。

<div class=”hover-wrap”>
这里显示一些正常的文本当用户浏览你的博客时,这些文本总是显示的

<div class=”hover-menu”>
这里显示的,是当用户鼠标滑过时显示的文本
</div>

</div>

 

接下来要做的是在style.css里面样式化你的悬浮菜单:


.hover-wrap{
position: relative;
}

.hover-wrap .hover-menu{
display: none;
}

.hover-wrap:hover .hover-menu{
display: block;
position: absolute;
top: 10px;
left: 10px;
z-index: 100;
white-space: no-wrap;
}

上面各CSS标签的属性就不翻译了,需要的朋友去Small Potato的原文看,但上面的代码只是一个简单的悬停文本例子,而不是真正实用的悬浮的链接菜单,这么聪明的你,难道还不懂举一反三,要创建悬停的链接菜单,不过是加一些UL,LI,A等标签,把文本转换为表格或其它你需要的形式罢了。

“创建WordPress主题的悬浮菜单”的11个回复

  1. 我太需要这篇文章啦(在我一个多月以前修改模板的时候…..)
    下一次(不知道什么时候)一定要试试…

  2. 学到东西了。。。不过只学到一半,汗。。。

    问菜鸟问题:

    1、主题文件夹在哪里?
    2、自己上传到服务器的网站文件,如果浏览者的系统没有这个htc文件,是不是他的IE仍然无法显示我做好的悬浮菜单的效果?

    请抽空解答一下,谢谢:)

  3. @SEVEN
    1.不知道你是用什么程序,无法说确切路径。但不管你用什么程序,这个文件可以上传到任何地方。只要在

    部分声明引用并正确设置引用地址就可以了。
    2.只需要自己引用了,在任何用户的浏览下都是可以显示效果的。
  4. “要创建悬停的链接菜单,不过是加一些UL,LI,A等标签,把文本转换为表格或其它你需要的形式罢了。”

    是在HTML里加UL LI 这些东西? 是在哪个文件里编辑 还是别的..

发表评论

电子邮件地址不会被公开。 必填项已用*标注