我正在使用WordPress二十四主题。每当浏览器自动调整为移动视图大小时,菜单就会切换。因此,您必须单击切换菜单,菜单应向下滑动。
每当我点击菜单切换时,我想平滑地向下滑动到菜单。默认情况下,主题不具有任何过渡效果。我插入了一些过渡效果,但它不起作用。我有可能只通过CSS来做吗?如果有,怎么样?
我是否需要使用jQuery来解决此问题。
我正在使用此网站http://ash-malon.info/
我插入的一些代码转换,只有填充缓动正常工作,我希望它在向下或向上滑动时的总缓动效果。
.primary-navigation {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 14px;
padding-top: 24px;
transition: all 500ms ease-in-out;
}
.primary-navigation.toggled-on {
padding: 72px 0 36px;
transition: all 500ms ease-in-out;
}
答案 0 :(得分:0)
我建议你使用jQuery,因为你已经使用了functions.js
我相信你想用jquery slideToggle应用相同的效果。
这是一个很好的例子:jsfiddle
您可以click here了解有关slideToggle的更多信息。
您可以将以下代码中添加的切换JS替换为您的functions.js:
jQuery(document).ready(function($){
$('.menu-toggle').click(function(){
$('.menu-main-menu-container').slideToggle('slow');
});
});
您还可以删除CSS上的transition: all 500ms ease-in-out;
。
我希望这会有所帮助。