在菜单切换上添加平滑过渡效果(Twenty Fourteen WordPress主题)

时间:2016-02-03 15:31:08

标签: wordpress menu toggle transition slide

我正在使用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;

}

1 个答案:

答案 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;

我希望这会有所帮助。