Wordpress给导航菜单添加鼠标划过特效

 2017年11月12日 15:49  14,231  22  打印本文  
      现在很多博客导航都非常炫酷,九哥也是不想千篇一律,这里就分享两种鼠标划过导航菜单的特效教程,效果很炫酷的,小伙伴们可以自行体验下。

特效一

一:设置

后台→外观→菜单,点击右上角的“显示选项”,把模块和显示高级菜单属性下的选项全都打勾。

二:代码部分

选择导航菜单(主要菜单)

1.修改导航菜单:本站首页

导航标签添加代码:

  1. <i class="fa-home fa"></i> <span class="font-text">首页</span>

CSS类添加代码:

  1. cddh cddh1 wow animated

2.修改导航菜单:99八十一

导航标签添加代码:(同首页)

CSS类添加代码:

  1. cddh wow animated cddh2

3.修改导航菜单:资源分享

导航标签添加代码:(同首页)

CSS类添加代码:

  1. cddh wow animated cddh3

之后导航菜单依次类推。

css代码

将以下代码添加到style.css文件中:

  1. .down-menu>.current-menu-item>a:hover{animation-duration:.8s;animation-name:fadeInUp;background:#c40000 none repeat scroll 0 0;color:#fff!important}@keyframes fushang{0%{opacity:0;transform:translateY(-300px)}10%{opacity:0}100%{opacity:1;transform:translateY(0)}}
  2. .fushang{animation-name:fushang}
  3. .cddh{animation-name:fushang;z-index:5}
  4. .cddh1{animation-duration:.7s}
  5. .cddh2{animation-duration:.8s}
  6. .cddh3{animation-duration:1s}
  7. .cddh4{animation-duration:1.1s}
  8. .cddh5{animation-duration:1.2s}
  9. .cddh6{animation-duration:1.3s}
  10. .cddh7{animation-duration:.5s;animation-name:fushang}

请根据自己导航菜单的多少自行修改对应代码。

效果:打开主页导航会从上依次降落到导航位,鼠标经过会出现浮动特效。具体效果请自行折腾体验。

特效二

直接将以下代码添加到style.css文件中:

  1. #site-nav .down-menu>li>a:hover{height:88px;border-bottom:88px solid    #b485e2}
  2. #site-nav .down-menu a{height:88px;line-height:88px;border-bottom:0 solid   #b485e2;transition-duration:.6s}

效果:鼠标经过会出现背景色,并且有颜色上浮特效。具体效果请自行折腾体验。

相关推荐:

Wordpress给移动端底部添加导航菜单
      看到很多博客移动端底部都有单独的导航菜单,体验还不错,九哥亲测可用,这里把实现方法分享给小伙伴们。 1.效果展示 2.实现方法 HTML代码 <style type="text/cs...
阅读全文
weinxin
小算草微信公众号
扫一扫关注小算草微信公众号,打开微信简简单单即可查看小算草所有内容,更快捷更方便。
Mr Y

吐槽一下

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

    • avatar 小四 来自天朝的朋友 谷歌浏览器 Windows 10 河南省安阳市 移动 【书童】

      特效二没有效果啊 :sad:

      • avatar 数字财富学 来自天朝的朋友 谷歌浏览器 Windows 10 上海市 移动 【小白】

        博主的网站确实很炫

        • avatar 枫叶 来自天朝的朋友 QQ浏览器  Android 7.1.1 vivo X9i Build/NMF26F 广东省广州市 电信 【小白】

          没图片,不知道效果是什么样

            • avatar 九哥 站长 来自天朝的朋友 谷歌浏览器 Windows Server 2003

              @枫叶 试一下就知道效果了,很炫的。

            • avatar 寒辞 来自天朝的朋友 谷歌浏览器 Windows 10 广东省广州市 电信 【小白】

              加上适当的特效还是挺不错的

              • avatar 灰常记忆 来自天朝的朋友 谷歌浏览器  vivo X20A Build/NMF26X) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/38.0.2125.102 Mobile Safari/537.36 VivoBrowser/5.2.21 陕西省西安市 联通 【小白】

                打开有点慢,css特效还是少加点。

                • avatar Koolight 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省 联通 【进士】

                  昨天好像没法留言的。

                    • avatar 九哥 站长 来自天朝的朋友 谷歌浏览器 Windows Server 2003

                      @Koolight 可以的啊,你是不是违反我的评论规则了?发了敏感词?

                    • avatar 胡俊杰 来自天朝的朋友 QQ浏览器 Windows 7 浙江省宁波市 联通 【小白】

                      哈哈挺好的方法刚刚本地看了一下,不过我博客实在太慢了,在搞个特效估计就要炸了。

                      • avatar 夏日博客 来自天朝的朋友 谷歌浏览器 Windows 7 北京市 联通 【小白】

                        特效会拖垮wp的,wp太臃肿了。

                        • avatar 电烤箱什么牌子好 来自天朝的朋友 谷歌浏览器 Windows 10 云南省昆明市 电信 【秀才】

                          好看,但是感觉没啥用。

                          • avatar 九哥 站长 来自天朝的朋友 谷歌浏览器 Windows Server 2003

                            对,自己的博客自己做主,喜欢什么风格折腾就是了?

                            • avatar 懿古今 来自天朝的朋友 谷歌浏览器 Windows 7 广西百色市田阳县 电信 【进士】

                              第一个好像是要主题加载有wow.js文件才行,这些特效关键还是要看自己是否喜欢,喜欢就折腾

                                • avatar 九哥 站长 来自天朝的朋友 QQ浏览器 Windows 7

                                  @懿古今 具体我也没仔细研究,鸟哥主题自带wow.js文件,我还是喜欢我现在的效果。