垂直横幅与隐藏/显示按钮

时间:2015-04-27 06:25:36

标签: javascript jquery html css

我必须使用我不想要的contianer div显示引导页面的垂直横幅,因为它会破坏设计。我想到将垂直对齐的横幅放在实际内容的右侧左侧,并且对于特定的横向对齐,让我们说最小 900px 宽度,

我设计了他们喜欢this但想要添加类似于此example

中的一个节目的功能

我想用hide&amp ;;显示两边的垂直横幅显示按钮

更新小提琴:http://fiddle.jshell.net/6w7dvbzd/4/

1 个答案:

答案 0 :(得分:1)

如果您想对样本页面产生相同的效果,请尝试使用此功能。



  $(function () {
    $( "#left-ad" ).animate({ "left": "0" }, "slow" );
  });

#left-ad {
    position:absolute;
    left:-99px;
    position: fixed;
    width:100px;
    height:100%;
    background-color:red;
    margin:auto 0;
}
#sidebar {
    margin:auto 0;
    background-color:green;
    height:200px;
}
.right-ad {
    right:0;
    position: fixed;
    position:absolute;
    width:100px;
    height:300px;
    background-color:red;
}
.wrapper {
    width:200px;
    margin:0 auto;
    background-color:blue;
    height:150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left-ad">
    <div id="sidebar"> <a href="#"><img src="sidewall.png" alt="LEft Banner" ></a>

    </div>
</div>
<div class="right-ad"> <a href="#"><img src="wad.jpg" alt="Right Banner" style="border-width: 0px" ></a>

</div>
<div class=wrapper>//center body part</div>
&#13;
&#13;
&#13;