问题使导航浮动左边

问题描述：

我有一个反馈面板，但问题是，当你点击它时，导航会覆盖反馈面板的一些内容。问题使导航浮动左边

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

问题

我想要做的是，当用户点击反馈，该<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>

答

你为什么不只是设置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元素。

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

与此有关的是，它已经移动nav''的方式进行反馈按钮之前被点击。它应该。反馈按钮需要先点击 – Emily

@Emily您不得在原始html中的nav元素上包含“移动”类。 'toggleClass'调用将为您添加它。 –

这就是它如何'

答

的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; 
}

问题使导航浮动左边

相关推荐