Question

我正在建立一个新网站，在这个网站上我有一个导航栏，左侧是菜单指示，中间是徽标，右侧可能还有其他一些东西。

我设置了一个jQuery动作，这样当你点击菜单指示器时，一个新的div（菜单）滑入。如果我从PC浏览网站，代码没有任何问题（还），但是当我从手机打开菜单时，img标识不会离开页面（因为有很多空间，因此在PC版本中它会停留在页面中），它会简单地进入菜单，制作所有内容看起来很奇怪。

我知道我不能很好地解释自己，所以这里是一个JSFiddle。

https://jsfiddle.net/9gx7dzwj/

HTML

    <body>
    <div id="menu"><ul>
        <h1>Menu</h1>
        <li>Home</li>
        </ul></div>
    <div id="navbar">
        <div id="menuindicator"></div>
        <img id="logo" src="http://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg"/>
        </div>
    <div id="main">
        <!--<h1>asdqe</h1>-->

        </div>
</body>

CSS

body {
width: 500px;
margin: 0px;
height: 100%;
background-color: red;
}


#navbar {
height: 2.5em;
background-color: white;
margin-top: 0px;
width: 100%;


}
#logo {
margin-top: -2.75em;
height: 2.5em;
display: block;
margin-left: auto;
margin-right: auto;

}
#menuindicator {
background-color: black;
width: 2.5em;
height: 2.5em;
margin-left: 0;
z-index: 1;
display: inline-block;
}
#menuindicator img {
margin-top: 0.75em;
margin-right: auto;
width: 1em;
}
#menu {
background-color: dimgrey;
height: 100%;
width: 30em;
float: left;
display: inline;
}

JS

$(document).ready( function() {
$('#menu').hide();
$('#menuindicator').click(function() {
    $('#menu').toggle("slide");
  });
});

一切都与wy网站相同，我只是添加了固定的宽度来模拟移动环境。

有人可以帮忙吗？

（还有另外一件事让我烦恼，为什么我要在徽标上设置一个负的上边距让它留在导航栏中？）

提前致谢！

编辑：是的，我可能只是通过向导航栏中的元素添加带有jQuery的负偏移量来解决问题，但我仍然对发生这种情况的原因感兴趣

当新的div滑入时，如何让img离开页面？

0 个答案: