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

2017年11月12日 15:49 8,056 22 打印本文

现在很多博客导航都非常炫酷，九哥也是不想千篇一律，这里就分享两种鼠标划过导航菜单的特效教程，效果很炫酷的，小伙伴们可以自行体验下。

特效一

一：设置

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

二：代码部分

选择导航菜单（主要菜单）

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

导航标签添加代码：

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

CSS类添加代码：

cddh cddh1 wow animated

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

导航标签添加代码：（同首页）

CSS类添加代码：

cddh wow animated cddh2

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

导航标签添加代码：（同首页）

CSS类添加代码：

cddh wow animated cddh3

之后导航菜单依次类推。

css代码

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

.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)}}
.fushang{animation-name:fushang}
.cddh{animation-name:fushang;z-index:5}
.cddh1{animation-duration:.7s}
.cddh2{animation-duration:.8s}
.cddh3{animation-duration:1s}
.cddh4{animation-duration:1.1s}
.cddh5{animation-duration:1.2s}
.cddh6{animation-duration:1.3s}
.cddh7{animation-duration:.5s;animation-name:fushang}

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

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

特效二

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

#site-nav .down-menu>li>a:hover{height:88px;border-bottom:88px solid #b485e2}
#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日 21,120 28

阅读全文

weinxin

小算草微信公众号

扫一扫关注小算草微信公众号，打开微信简简单单即可查看小算草所有内容，更快捷更方便。

版权声明：本站原创文章，于2017年11月12日，由 Mr Y 发表，共 1321 字。
转载请注明：Wordpress给导航菜单添加鼠标划过特效 | 小算草

吐槽一下取消吐槽

小四河南省安阳市移动【书童】
回复 2019年1月11日 12:27 0楼

特效二没有效果啊
数字财富学 上海市移动【小白】
回复 2018年7月19日 20:46 0楼

博主的网站确实很炫
- 九哥站长
  回复 2018年7月19日 21:05 1层
  
  @数字财富学谢谢，欢迎常来。
枫叶广东省广州市电信【小白】
回复 2017年12月10日 06:58 0楼

没图片，不知道效果是什么样
- 九哥站长
  回复 2017年12月10日 16:57 1层
  
  @枫叶试一下就知道效果了，很炫的。
寒辞广东省广州市电信【小白】
回复 2017年11月20日 13:31 0楼

加上适当的特效还是挺不错的
灰常记忆 陕西省西安市联通【小白】
回复 2017年11月19日 12:54 0楼

打开有点慢，css特效还是少加点。
- 九哥站长
  回复 2017年11月19日 18:34 1层
  
  @灰常记忆我用的国外主机，要是国内的肯定快。
  - 灰常记忆 陕西省西安市联通【小白】
    回复 2017年11月20日 09:57 2层
    
    @九哥美国？还是香港，香港总的来说很快。
    - 九哥站长
      回复 2017年11月20日 22:00 3层
      
      @灰常记忆美国
Koolight 湖北省联通【进士】
回复 2017年11月16日 20:55 0楼

昨天好像没法留言的。
- 九哥站长
  回复 2017年11月16日 20:57 1层
  
  @Koolight 可以的啊，你是不是违反我的评论规则了？发了敏感词？
胡俊杰 浙江省宁波市联通【小白】
回复 2017年11月15日 21:48 0楼

哈哈挺好的方法刚刚本地看了一下，不过我博客实在太慢了，在搞个特效估计就要炸了。
- 九哥站长
  回复 2017年11月16日 12:52 1层
  
  @胡俊杰换个服务器?
夏日博客 北京市联通【小白】
回复 2017年11月14日 14:50 0楼

特效会拖垮wp的，wp太臃肿了。
- 九哥站长
  回复 2017年11月14日 17:01 1层
  
  @夏日博客适量的特效还是可以的
电烤箱什么牌子好 云南省昆明市电信【秀才】
回复 2017年11月14日 11:00 0楼

好看，但是感觉没啥用。
- 九哥站长
  回复 2017年11月14日 11:22 1层
  
  @电烤箱什么牌子好就是为了好看，哈哈。
九哥站长
回复 2017年11月13日 11:32 0楼

对，自己的博客自己做主，喜欢什么风格折腾就是了?
懿古今 广西百色市田阳县电信【进士】
回复 2017年11月12日 17:55 0楼

第一个好像是要主题加载有wow.js文件才行，这些特效关键还是要看自己是否喜欢，喜欢就折腾
- 九哥站长
  回复 2017年11月12日 17:59 1层
  
  @懿古今具体我也没仔细研究，鸟哥主题自带wow.js文件，我还是喜欢我现在的效果。
  - 小四河南省安阳市移动【书童】
    回复 2019年1月9日 13:15 2层
    
    @九哥特效二代码，知更鸟加了没效果

文章目录