Question

Hey all, another interesting one,

I’m building a menu that will slide across the entire width of the page (width:100%;) and need some help. I have an arrow button floating on the right side of the page that will trigger a menu bar to slide out when clicked. I’d like the arrow button to slide out in front of it and once all the way across change the arrow image to it’s opposite file.

The big issue is that the width and height of these need to be flexible to allow for varying content. I’ve got a feeble attempt at making it work, but I know that I’m missing a whole lot of factors here. My code doesn’t even touch moving the arrow button along with the rest.. and that’s not for lack of effort!

Any help? Thank you!

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

Is this what you’re looking for? Try this out in your browser:

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

I removed the image you had in your only because I didn’t have it and wanted to test it locally with text. Hope this helps!