WordPress给导航菜单添加鼠标划过特效
特效一
一:设置
后台→外观→菜单,点击右上角的“显示选项”,把模块和显示高级菜单属性下的选项全都打勾。
二:代码部分
选择导航菜单(主要菜单)
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}
效果:鼠标经过会出现背景色,并且有颜色上浮特效。具体效果请自行折腾体验。
相关推荐:
[bsy_insert_post ids=3294]
小四
特效二没有效果啊 🙁
数字财富学
博主的网站确实很炫
九哥@数字财富学
谢谢,欢迎常来。
枫叶
没图片,不知道效果是什么样
九哥@枫叶
试一下就知道效果了,很炫的。
寒辞
加上适当的特效还是挺不错的
灰常记忆
打开有点慢,css特效还是少加点。
九哥@灰常记忆
我用的国外主机,要是国内的肯定快。
灰常记忆@九哥
美国?还是香港,香港总的来说很快。
九哥@灰常记忆
美国
Koolight
昨天好像没法留言的。
九哥@Koolight
可以的啊,你是不是违反我的评论规则了?发了敏感词?
胡俊杰
哈哈挺好的方法刚刚本地看了一下,不过我博客实在太慢了,在搞个特效估计就要炸了。
九哥@胡俊杰
换个服务器?
夏日博客
特效会拖垮wp的,wp太臃肿了。
九哥@夏日博客
适量的特效还是可以的
电烤箱什么牌子好
好看,但是感觉没啥用。
九哥@电烤箱什么牌子好
就是为了好看,哈哈。
九哥
对,自己的博客自己做主,喜欢什么风格折腾就是了?
懿古今
第一个好像是要主题加载有wow.js文件才行,这些特效关键还是要看自己是否喜欢,喜欢就折腾
九哥@懿古今
具体我也没仔细研究,鸟哥主题自带wow.js文件,我还是喜欢我现在的效果。
小四@九哥
特效二代码,知更鸟加了没效果