Question

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

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>

Answer 1

将以下内容放入您网站的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 example

对于转换，请将以下内容添加到CSS中：

#banner-hood {
    -webkit-transition:all .35s;
    -moz-transition:all .35s;
    transition:all .35s;
}

超越内容的CSS标题

1 个答案: