Question

嘿所有，另一个有趣的，

我正在构建一个可以在整个页面宽度上滑动的菜单（宽度：100％;），需要一些帮助。我有一个浮动在页面右侧的箭头按钮，当单击时会触发菜单栏滑出。我希望箭头按钮在它前面向外滑动，一直到将箭头图像更改为相反的文件。

最大的问题是这些的宽度和高度需要灵活，以允许不同的内容。我做了一个微弱的尝试，但我知道我在这里错过了很多因素。我的代码甚至没有触及与其余部分一起移动箭头按钮..这不是因为没有努力！

有任何帮助吗？谢谢！

HTML：

<div id="main">
     <div class="trans" id="trigger">
          <img class="arrow_small" src="images/left_small.png" alt="slide out menu" />
     </div>
     <div id="slider">
          <div class="trans" id="overlay"></div>
          <div id="content">
               <p>this is the content</p>
          </div>
     </div>
</div>

CSS：

#main {
    width:100%;
    height:306px;
    top:50%;
    margin-top:-153px;
    position:absolute;
}
#trigger {
    width:30px;
    height:100%;
    float:right;
    background-color:#000;
    position:relative;
    z-index:3;
}
.arrow_small {
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-6px;
    margin-top:-12px;
}
#overlay {
    width:100%;
    height:100%;
    position:absolute;
}
#content {
    width:100%;
    height:100%;
    position:absolute;
    z-index:2;

使用Javascript：

$(document).ready(function(){
//hide functions
    $('#slider').css('display', 'none');
//menu slide out
    $('#trigger').click(function (){
        var bar = $('#slider');
            bar.show(function(){
                this.animate({'marginRight':'100%'},1000);
            });
    });
});

Answer 1

这是你要找的吗？在浏览器中试试这个：

HTML：

<div id="main">
 <div id="slider">
 &nbsp;
      <div id="image">
        <p>Image would go here</p>
      </div>
      <div id="content">
        <p>content...</p>
      </div>
 </div>

CSS：

    * {
    margin: 0;
    padding: 0;
}
#slider {
    width: 6%;
    height: 350px;
    top: 33%;
    background-color: black;
    position: absolute;
    right: 0;
}
.arrow_small {
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-6px;
    margin-top:-12px;
}
#image {
    width: 75px;
    background-color: black;
    position:relative;
    color: white;
    float: left;
}
#content {
    position: relative;
    overflow: hidden;
    left: 100px;
    color: white;
}

JS：

    $(function() {
    $('#image').toggle(function (){
        $("#slider").animate({"width":"100%"}, 1000);
    }, function() {
        $("#slider").animate({"width":"6%"}, 1000);
    });
});

我删除了您的图像，因为我没有它，并希望在本地使用文本进行测试。希望这有帮助！

jQuery动画横跨页面的水平幻灯片

1 个答案: