2

我一直在努力使我们的一个网站对移动设备友好，但遇到了麻烦。我知道传统的做法是把汉堡放在左边，让内容滑到右边，但我想做完全相反的事情，希望有人能帮助我。我找到了一个关于如何创建所有内容的很棒的教程，并且已经完成了。

我已经编辑了 JS 文件和 css 文件，但没有任何效果。

这是我在 JS 文件中更改的内容：

//set margin for the whole container with a jquery UI animation
    jQuery("#container").animate({ "marginRight": ["70%", 'easeOutExpo'] }, {
        duration: 700
    });

//set margin for the whole container back to original state with a jquery UI animation
    jQuery("#container").animate({ "marginRight": ["0", 'easeOutExpo'] }, {
        duration: 700,

在 css 文件中，我只是更改了任何“正确：0；”的规则。到“左：0；” 反之亦然。我只是不知道为什么它不向左滑动内容。如果我在 firebug 中调试，代码似乎正在运行，但网站上没有任何反应。任何帮助将不胜感激！

4

1 回答 1

1

不包含脚本很难理解，但我试图弄清楚，这里是你应该修改的更改。
此外，jQuery animate 选项没有 marginRight。

改变：

//set margin for the whole container with a jquery UI animation
jQuery("#container").animate({ "marginRight": ["70%", 'easeOutExpo'] }, {
  duration: 700
});

进入：

jQuery("#container").animate({"marginLeft": ["-70%", 'easeOutExpo']}, {
  duration: 700
});

在CSS上：
寻求 改变#hamburger
float:left;float:right;

寻求导航元素
更改left: 0px;为right:0px;

编辑：更改left: 0px;为更新工作小提琴right:-20px;

最后寻求改变#contentLayer
right: 0;left:0;

这是工作的jsfiddle，享受修改

于 2013-10-30T22:31:59.297 回答