Creating A Horizontally Scrolling Menu Bar

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 lo

Solution 1:

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)

Solution 2:

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

Solution 3:

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.