jquery - 使导航向左浮动的问题

Question

我有一个反馈面板，但问题是当您单击它时，导航会覆盖反馈面板的某些内容。

如您在上图中所见，电子邮件输入字段已被屏蔽。

问题

我想做的是当用户点击反馈时，<nav>将 float 到左侧，以便用户可以输入他们想要的内容，然后他们单击 feedback。再次和nav返回 center .

导航栏 CSS

nav{
text-align:center;
}

html

<div class="panel">
    <h3>Sliding Panel</h3>
    <p>Here's our sliding panel/drawer made using jQuery with the toggle function and some CSS3 for the rounded corners</p>

    <p>This panel is placed on the right instead of on the left. This could be particularly useful if, <a href="http://spyrestudios.com" title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p>



<div style="clear:both;"></div>

Answer 1

为什么不直接将反馈面板上的 z-index 设置为 50(如果它位于 DOM 中的导航之前，则设置更多)。这样它就会出现在导航上方，您不必担心将导航移开。

否则，如果您真的想在显示反馈面板时将导航移开，您可以这样做:

$('.feedback-button').click(function(){
    $('nav').toggleClass('moved');
   /* whatever else you do when the feedback button is clicked */
});

只要单击反馈按钮，就会在导航元素上切换“移动”类。这是假设存在某种类型为“反馈按钮”的反馈按钮。

然后你可以像这样设置一些css:

nav.moved {
  -webkit-transform:translate(-100px,0);
  transform:translate(-100px,0);
}

设置移动类后，这会将导航向左移动 100 像素。

如果您希望它具有动画效果，您也可以向导航元素添加过渡效果。

nav {
  -webkit-transition:transform 1s ease-in-out;
  transition:transform 1s ease-in-out;
}