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...
2017年10月14日   28,602   28
阅读全文
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 河南省安阳市 移动 【书童】
      回复 2019年1月11日 12:27

      特效二没有效果啊 :sad:

      • avatar 数字财富学 来自天朝的朋友 谷歌浏览器 Windows 10 上海市 移动 【小白】
        回复 2018年7月19日 20:46

        博主的网站确实很炫

        • avatar 枫叶 来自天朝的朋友 QQ浏览器 Android 7.1.1 vivo X9i Build/NMF26F 广东省广州市 电信 【小白】
          回复 2017年12月10日 06:58

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

            • avatar 九哥 站长 来自天朝的朋友 谷歌浏览器 Windows Server 2003
              回复 2017年12月10日 16:57

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

            • avatar 寒辞 来自天朝的朋友 谷歌浏览器 Windows 10 广东省广州市 电信 【小白】
              回复 2017年11月20日 13:31

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

              • 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 陕西省西安市 联通 【小白】
                回复 2017年11月19日 12:54

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

                • avatar Koolight 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省 联通 【进士】
                  回复 2017年11月16日 20:55

                  昨天好像没法留言的。

                    • avatar 九哥 站长 来自天朝的朋友 谷歌浏览器 Windows Server 2003
                      回复 2017年11月16日 20:57

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

                    • avatar 胡俊杰 来自天朝的朋友 QQ浏览器 Windows 7 浙江省宁波市 联通 【小白】
                      回复 2017年11月15日 21:48

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

                      • avatar 夏日博客 来自天朝的朋友 谷歌浏览器 Windows 7 北京市 联通 【小白】
                        回复 2017年11月14日 14:50

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

                        • avatar 电烤箱什么牌子好 来自天朝的朋友 谷歌浏览器 Windows 10 云南省昆明市 电信 【秀才】
                          回复 2017年11月14日 11:00

                          好看，但是感觉没啥用。

                          • avatar 九哥 站长 来自天朝的朋友 谷歌浏览器 Windows Server 2003
                            回复 2017年11月13日 11:32

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

                            • avatar 懿古今 来自天朝的朋友 谷歌浏览器 Windows 7 广西百色市田阳县 电信 【进士】
                              回复 2017年11月12日 17:55

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

                                • avatar 九哥 站长 来自天朝的朋友 QQ浏览器 Windows 7
                                  回复 2017年11月12日 17:59

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