Question

我一直致力于让我们的某个网站移动设备友好，并遇到麻烦。我知道传统做法是将汉堡放在左边，让内容向右滑动，但我想做的恰恰相反，我希望有人可以帮助我。我找到了一个关于如何创建所有内容的great tutorial并且已经完成了。

我编辑了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中调试，代码似乎正在工作，但网站上没有任何反应。任何帮助将不胜感激！

Answer 1

如果不包含脚本很难理解，但我试图弄明白，这里是你应该修改的更改。
更多jQuery animate选项中有 no 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;

寻找 nav 元素
将 left: 0px; 更改为 right:0px;

编辑：将 left: 0px; 更改为 right:-20px;
update working fiddle

#contentLayer 的最后一次搜索 right: 0; 更改为 left:0; < / p>

这里是working jsfiddle，享受修改

如何在右侧显示汉堡菜单？

1 个答案: