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

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

是否看见有些主题的导航下拉菜单有一个淡入的缓冲动画,效果是不是很炫,愿意折腾的童鞋,就随我一起把它加到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
  • JQuery
  • Wordpress教程
  • HotNews Pro
评论  64  访客  49  作者  13
    • ling
      ling 4

      抢沙发,难得哦

      • gsid
        gsid 2

        jQuery很好很强大

        • ffhome
          ffhome 1

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

          • B-Swan
            B-Swan 3

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

            • B-Swan
              B-Swan 3

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

                • 知更鸟
                  知更鸟

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

                    • B-Swan
                      B-Swan 3

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

                  • 憨豆先生
                    憨豆先生 6

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

                    • 憨豆先生
                      憨豆先生 6

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

                      • 跟我去流浪
                        跟我去流浪 4

                        看到代码就……

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

                        愿老大早日康复

                        • 晨光博客
                          晨光博客 5

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

                          • Surpet
                            Surpet 4

                            鸟鸟
                            我等你的精简版

                            • 咖喱
                              咖喱 0

                              欢迎鸟哥归来!!!

                              • 韩国
                                韩国 5

                                没看到效果啊!

                                • 福橘
                                  福橘 5

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

                                    • 知更鸟
                                      知更鸟

                                      @ 福橘 不知什么工具条

                                        • 福橘
                                          福橘 5

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

                                            • 知更鸟
                                              知更鸟

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

                                                • 福橘
                                                  福橘 5

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

                                                    • robin
                                                      robin 5

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

                                                      • 福橘
                                                        福橘 5

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

                                              • tike
                                                tike 2

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

                                                • 魅力云南
                                                  魅力云南 4

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

                                                  • water6000
                                                    water6000 3

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

                                                    • 蘇主任
                                                      蘇主任 4

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

                                                      • JaCall
                                                        JaCall 4

                                                        刚才挂了????

                                                        • 碎语人生
                                                          碎语人生 5

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

                                                          • JaCall
                                                            JaCall 4

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

                                                            • 比度克
                                                              比度克 1

                                                              很好很强大

                                                              • 淘宝开店流程
                                                                淘宝开店流程 0

                                                                JQ太牛了

                                                                • 蘇主任
                                                                  蘇主任 4

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

                                                                    • robin
                                                                      robin 5

                                                                      @ 蘇主任 试过,不过貌似没什么变化…

                                                                    • 蘇主任
                                                                      蘇主任 4

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

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

                                                                      • 蘇主任
                                                                        蘇主任 4

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

                                                                        • ffhome
                                                                          ffhome 1

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

                                                                          • ★Extreme★
                                                                            ★Extreme★ 4

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

                                                                            • namind
                                                                              namind 3

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

                                                                              • namind
                                                                                namind 3

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

                                                                                • namind
                                                                                  namind 3

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

                                                                                  • 小鸡
                                                                                    小鸡 2

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

                                                                                    • namind
                                                                                      namind 3

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

                                                                                      • leez
                                                                                        leez 4

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

                                                                                        • 蓝冰
                                                                                          蓝冰 3

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

                                                                                            • 知更鸟
                                                                                              知更鸟

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

                                                                                                • coolike
                                                                                                  coolike 2

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

                                                                                              • coolike
                                                                                                coolike 2

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

                                                                                                  • 知更鸟
                                                                                                    知更鸟

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

                                                                                                  • ciker
                                                                                                    ciker 1

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

                                                                                                    • jntzdd
                                                                                                      jntzdd 1

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

                                                                                                        • 知更鸟
                                                                                                          知更鸟

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

                                                                                                      匿名

                                                                                                      发表评论

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

                                                                                                      拖动滑块以完成验证