Creating a horizontally scrolling menu bar

Question

I'm looking for some advice on creating a horizontally scrolling menu bar for a website (to be viewed on computer, not handhelds). I'm quite rusty on coding, but I'm really just looking for a rough outline of how I could go about achieving this effect. First, let me explain what I'm trying to do.

It would look something like this, where <-- and --> are images of arrows:

<---- C | D | E | F ---->

if you were to click on either arrow, the menu (or rather, the objects within the moves to the left or right, respectively, making some parts of the menu now visible, and others now invisible, such as (if you were to click the left arrow):

<---- A | B | C | D ----->

In other words, this menu is intended to be wider than the screen, but I only want what fits in between the arrows to show.

Any help would be greatly appreciated.

Answer 1

You can achieve this by putting all your content in a fixed width div.

Eg:

<div class="content-box">
    <div class="inner-container">
        <div> A </div>
        <div> B </div>
        <div> C </div>
        <div> D </div>
        <div> E </div>
        <div> F </div>
        <div> G </div>
        <div> H </div>
    </div>
</div>

Now, when any of the arrows are clicked, you can manually move the .inner-container.

CSS for this would be something like this:

  .content-box{
     position: relative;
     width: 12.5em;
     overflow: hidden;
  }

  .inner-container{
     position: absolute;
  }

  .inner-container > div{
      width: 1em;
  }

Further, on left and right image clicks, you can use the following code...

$('.left-btn').click(function(){
       $('.inner-container').each(function() {
             $( this ).css({'left', (parseInt($(this).css('left') - 16) + 'px' });
       });
});

// here 16 refers to the size of the divs in the inner-container.

This is just the overview of what you want, without getting into the finer details.

PS: Solution is given keeping in mind that you are not using bootstrap.

Answer 2

Check out swipe.js, they are very easy to use in a webpage and you can make them responsive too.

https://github.com/thebird/Swipe

You will create a swipe'able slider with this code

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Inside the <div></div> create your page (A | B | C)

Answer 3

Using following scripts will help

<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

<a href="#" id="prev2">Prev</a>
<div class="pics" id="menu" style="position: relative;">
    <div>A | B | C</div> 
    <div>D | E | F</div>       
    <div>G | H | I</div>       
</div>           
<a href="#" id="next2">Next</a>

DEMO