WordPress导航栏滑过钢琴按键特效

4.5
(4)

准备重新调整下导航栏菜单,以前的菜单滑过钢琴按键特效要去掉了,分享记录一下。特效代码只有CSS代码,非常简单。由于古哥用的是JustNews主题,这里以JustNews主题为例。即,CSS代码可以直接拿去给JustNews主题使用,其他主题需要稍作修改。

WordPress导航栏滑过钢琴按键特效

在主题自定义选项或子主题style文件中插入如下代码:

@media (min-width:991px) {
	.primary-menu>ul>.menu-item>a:hover {
	color:#fff!important;
	height:64px;
	border-bottom:64px solid var(--theme-color);
	transition-duration:0.3s;
}
}

上述代码仅在屏幕尺寸大于991px才生效。

其他主题只需要修改菜单class对应的css标签以及border-bottom的值。

最后,给各位展示下是什么样子的效果吧,以后就见不到了。

WordPress导航栏滑过钢琴按键特效

共计4人评分,平均4.5

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

原创文章,作者:古哥,转载需经过作者授权同意,并附上原文链接:https://iymark.com/website/wordpress/menu-hover-css.html

(0)
上一篇 2022年09月04日 19:18
下一篇 2022年09月05日 20:16

相关推荐

发表回复

登录后才能评论
本站APP