为导航多级菜单增加淡入动画特效

2011年03月8日23:15:39 64 暂未收录 12,311
摘要

  是否看见有些主题的导航下拉菜单有一个淡入的缓冲动画,效果是不是很炫,愿意折腾的童鞋,就随我一起把它加到HotNews pro主题2.4版中。同样要用到jquery.js。   如果,你使用的不是HotNews pro 2.4版主题,并且主题已加载jquery.js,可参考上面的方法.   只需打开:Superfish v1.4.8.js,修改最后的“#topnav ul”为你的导航菜单ID选择器即可,比如:默认WP主题Twenty Ten是:.menu-header ul。

是否看见有些主题的导航下拉菜单有一个淡入的缓冲动画,效果是不是很炫,愿意折腾的童鞋,就随我一起把它加到HotNews pro主题2.4版中。同样要用到jquery.js。

首先下载Superfish v1.4.8.js:

上传到HotNews pro主题js目录中。

分别打开:header.php、header_a.php、header_b.php、header_h.php模版文件,在:

  1. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/custom.js"></script>

下面加入:

  1. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/superfish.js"></script>

然后,找到并删除:

  1. sfEls[i].onmouseout=function() {
  2. this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  3. }

注:共有两处,如果不删除在IE6下会有BUG。

最后,在style.css中加入:

  1. #topnav .sf-sub-indicator {
  2. display: none;
  3. }

注:如果不加入这句会在有二级菜单项目名称后面显示“»”。

完成,具体效果看我的导航菜单。

如果,你使用的不是HotNews pro 2.4版主题,并且主题已加载jquery.js,可参考上面的方法.

只需打开:Superfish v1.4.8.js,修改最后的“#topnav ul”为你的导航菜单ID选择器即可,比如:默认WP主题Twenty Ten是:.menu-header ul。

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:64   其中:访客  49   博主  13   引用   2

    • ling 4

      抢沙发,难得哦

      • gsid 2

        jQuery很好很强大

        • ffhome 1

          感谢提供,原作品越来越完善,辛苦了!

          • B-Swan 3

            已经投入使用了,效果果然比之前好多了!
            大鸟辛苦了,不知道身体怎么样了~~~注意休息哈!
            对了,最后敢问下什么时候做一个播放视频的页面让我们使用啊,嘿嘿

            • B-Swan 3

              补充下问题,不知道是我不小心把代码弄串还是还是怎么。。。改完这个效果后网页左下角一直报错。。。很纠结啊。检查了一下还真不知道错在哪里了,拜托大鸟帮忙回忆下

                • 知更鸟 Admin

                  @B-Swan 如果严格按上面方法不会出错的

                    • B-Swan 3

                      @知更鸟 嘿嘿,真的是我不小心自己给弄错了。。。。
                      sfEls[i].onmouseout=function() {
                      this.className=this.className.replace(new RegExp(” sfhover\\b”), “”);
                      }
                      这段代码我并没有删除,我用/**/给注释了。。。有俩个后面把后面大括号给丢掉了。。。现在好了!

                  • 憨豆先生 6

                    学习了~感谢鸟哥!昨天访问不上你的网站.不知道是怎么回事了~

                    • 憨豆先生 6

                      鸟哥..帮忙看下我的站,我按照教程添加了CSS可还是会在菜单项目名称后面显示“»”

                      • 跟我去流浪 4

                        看到代码就……

                        唉,我等赖人期待简化版的到来

                        愿老大早日康复

                        • 晨光博客 5

                          效果不错,也终于见哥回来了

                          • Surpet 4

                            鸟鸟
                            我等你的精简版

                            • 咖喱 0

                              欢迎鸟哥归来!!!

                              • 韩国 5

                                没看到效果啊!

                                • 福橘 5

                                  鸟哥,帮忙看看www.harzi.com.cn,这个主题的边栏工具条使用不了,我非常喜欢这个主题,鸟哥能帮忙修下吗。

                                    • 知更鸟 Admin

                                      @福橘 不知什么工具条

                                        • 福橘 5

                                          @知更鸟 就是这个主题的后台小工具设置后,在前台都不显示。

                                            • 知更鸟 Admin

                                              @福橘 那你的日历是怎么显示的

                                                • 福橘 5

                                                  @知更鸟 日历没显示啊鸟哥,你再看看www.harzi.com.cn 在网上找的仿臭豆的主题

                                                    • robin 5

                                                      @福橘 这主题貌似不支持小工具

                                                        • 福橘 5

                                                          @robin 谁能改版下,让这款主题支持小工具,真的很喜欢这个模板,或是谁能再仿制个?

                                              • tike 2

                                                感谢鸟哥~ 祝“热点新闻”越做越好~~

                                                • 魅力云南 4

                                                  鸟哥呀,遇到个麻烦。请教哈
                                                  我的博客标签全部不能用了
                                                  网址:http://www.ynmore.com

                                                  • water6000 3

                                                    问下,你的菜单条中每个菜单项的宽度是否可以修改,(例如:你的首页,浏览博客之间)在什么地方修改,因为,有的菜单项要很长!

                                                    • 蘇主任 4

                                                      安裝一切正常~
                                                      感謝鳥哥~

                                                      • JaCall 4

                                                        刚才挂了????

                                                        • 碎语人生 5

                                                          谢谢分享,已经修改了。想请问一下,就是那个下载按钮如何设置的?

                                                          • JaCall 4

                                                            这篇文章 首页 按照原样式显示 是怎么实现的?!

                                                            • 比度克 1

                                                              很好很强大

                                                              • 淘宝开店流程 0

                                                                JQ太牛了

                                                                • 蘇主任 4

                                                                  鳥大~
                                                                  有辦法調整淡出的時間嗎??

                                                                  • 蘇主任 4

                                                                    鳥大~
                                                                    感謝你~
                                                                    我修改了superfish.js

                                                                    原本是8800
                                                                    我改成delay: 3600,
                                                                    有比較快了~

                                                                    • 蘇主任 4

                                                                      鳥大~
                                                                      哈~
                                                                      原來如此~
                                                                      感謝你哦~

                                                                      • ffhome 1

                                                                        文中“然后,找到并删除:”步骤实施后,ie6访问下拉菜单没有了,不执行此步骤,ie6反而没有问题,这是什么问题呢

                                                                        • ★Extreme★ 4

                                                                          主题加载太多JS,首页显示速度慢了点了……

                                                                          • namind 3

                                                                            鸟哥,为啥我的只在首页有淡入淡出效果呢

                                                                            • namind 3

                                                                              还有就是除了首页外,在其他页面菜单弹出后存在收不回去的问题

                                                                              • namind 3

                                                                                鸟哥啊,我启用淡入淡出效果没成功,反而吧右侧的“回到顶部 转到底部”功能给没有效果了?请问这是怎么回事呢,急

                                                                                • 小鸡 2

                                                                                  鸟哥 页首 分类下拉列表,淡入的效果,改出来后感觉收回去很慢,时间长,怎么解决?

                                                                                  • namind 3

                                                                                    鸟哥,您能不能说的详细点?“同样要用到jQuery.js。”2.4有没有用这个我们不知道啊;如果没有使用,我们也不知道怎么使用jQuery.js啊?

                                                                                    • leez 4

                                                                                      我的背景图片在火狐下可以看到,在IE6。0和8。0下都不显示!
                                                                                      请问怎么解决?

                                                                                      • 蓝冰 3

                                                                                        鸟哥,导航栏下拉菜单半透明样式是怎么弄的?嘿嘿,菜鸟求教~想弄跟你现在这个一样的~~

                                                                                          • 知更鸟 Admin

                                                                                            @蓝冰 查看源文件把我的样式文件下回去,替换基本就差不多

                                                                                              • coolike 2

                                                                                                @知更鸟 替换了不行。我看源文件,鸟哥你好像用JS隐藏了LI样式。麻烦鸟哥发个完整的你用的STYLE.CSS出来。

                                                                                            • coolike 2

                                                                                              非常期待鸟哥的导航菜单效果,期待分享。

                                                                                                • 知更鸟 Admin

                                                                                                  @coolike http://zmingcx.com/wp-content/themes/HotNewspro24/style.css

                                                                                                • ciker 1

                                                                                                  哈哈。。好东西啊。已经改好了。。

                                                                                                  • jntzdd 1

                                                                                                    “只需打开:Superfish v1.4.8.js,修改最后的“#topnav ul”为你的导航菜单ID选择器即可,比如:默认WP主题Twenty Ten是:.menu-header ul”
                                                                                                    这句话怎么理解.我用的是27版的那该怎么弄。

                                                                                                      • 知更鸟 Admin

                                                                                                        @jntzdd 2.7版已有此特效,不需要你自己折腾了

                                                                                                    • 来自外部的引用: 2

                                                                                                      • 为导航多级菜单增加淡入动画特效 | |企业|信息化|Wordpress|圆久岛
                                                                                                      • HotNews pro主题2.4正式版 | 嗨!CC!| 我的CC生活记录!