0

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

正如您在上图中所见，电子邮件输入字段被阻止。

问题

我想要做的是，当用户单击反馈时，<nav>将浮动到左侧，以便用户可以输入他们想要的内容，然后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>
4

2 回答 2

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;
}
于 2013-07-06T12:53:49.083 回答
0

javascript 

<script type="text/javascript">
$(document).ready(function(){
    $(".trigger").click(function(){
        $(".panel").toggle("fast");
        $('nav').toggleClass('moved');
        $(this).toggleClass("active");
        return false;
    });
});
</script>

css

.moved{
float:left;
}
于 2013-07-06T13:32:09.053 回答