1

所以我最近在我的页面上添加了一个 jQuery 驱动的滑动面板，我终于开始工作了......问题是当它滑出时，它会将我的标题推到比实际页面内容更远的地方......如果你访问我的网站，这非常明显然后单击内容区域左侧边栏中的“菜单”按钮...面板将滑出，标题移出位置。

www.brooksrealtysvc.com/privacy

我确定问题出在用于标题的 CSS 中……谁能帮我确定我可以改变什么来帮助纠正这个问题？

相关CSS

#banner-wrap
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
}

#banner-bar
{
  height: 177px;
  background-color: #c2c2c2;
}

#banner-hood
{
  position: absolute;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 60;
}

#banner-logo
{
  position: relative;
  top: 0;
  left: 0;
  margin-top: -180px;
  margin-left: 0px;
  z-index: 80;
}

#banner-text
{
  position: relative;
  top: 0;
  left: 0;
  margin-top: -33px;
  margin-left: -346px;
  z-index: 80;
}

#banner-svc
{
  position: relative;
  top: 0;
  left: 0;
  margin-top: 0px;
  margin-left: 550px;
  z-index: 80;
}

相关 HTML

<body>
<div id="banner-wrap">
    <div id="banner-bar">
        <div id="banner-hood">
            <center><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/header_hood.png" style="float:center"></center>
            <div id="banner-logo"><center><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/header_logo4.png" style="float:center"></center></div>
            <div id="banner-svc"><center><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/header_svc.png"></center></div>
            <div id="banner-text"><center><a href="http://www.brooksrealtysvc.com"><font face="georgia" color="#8a0304&quot;">HOME</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.brooksrealty.idxco.com/idx/8087/featured.php"><font face="georgia" color="#8a0304">LISTINGS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.brooksrealty.idxco.com/idx/8087/roster.php"><font face="georgia" color="#8a0304">AGENTS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.brooksrealty.idxco.com/idx/8087/basicSearch.php"><font face="georgia" color="#8a0304">SEARCH MLS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.brooksrealtysvc.com/rentals"><font face="georgia" color="#8a0304">RENTALS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.brooksrealtysvc.com/history"><font face="georgia" color="#8a0304">HISTORY</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.brooksrealtysvc.com/contact"><font face="georgia" color="#8a0304">CONTACT</font></a></center></div>
            </div>
    </div>
</div>
4

1 回答 1

0

将以下内容放在head您网站的部分中：

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
    $('.open').click(function(){
        $('#banner-hood').toggleClass('displace');
    });
});
</script>

您还需要在 CSS 中添加以下行：

.displace { margin-left:120px; }

jsFiddle 示例

对于过渡，将以下内容添加到您的 CSS 中：

#banner-hood {
    -webkit-transition:all .35s;
    -moz-transition:all .35s;
    transition:all .35s;
}
于 2013-11-10T19:04:23.317 回答