Responsive horizontal page sliding

Question

I want to create horizontal responsive page navigation as illustrated by the below image :

Answer 1

Horizontal page sliding

with left-margin animation

This jQuery snippet :

1. Calculates the number of slides and set the width of the wrapper accordingly.
2. According to which link is clicked, left-margin is animated on the wrapper to show the corresponding slide with a smooth transition
3. Toggles the class of the clicked link for active link highlighting

Note that this solution:

1. Uses only one menu occurence to minimize markup and prevent content repetition.
2. Requires only the jQuery library
3. works for a dynamic number of slides

$(document).ready(function() {
  var slideNum = $('.page').length,
    wrapperWidth = 100 * slideNum,
    slideWidth = 100 / slideNum;
  $('.wrapper').width(wrapperWidth + '%');
  $('.page').width(slideWidth + '%');

  $('a.scrollitem').click(function() {
    $('a.scrollitem').removeClass('selected');
    $(this).addClass('selected');

    var slideNumber = $($(this).attr('href')).index('.page'),
      margin = slideNumber * -100 + '%';

    $('.wrapper').animate({
      marginLeft: margin
    }, 1000);
    return false;
  });
});

html,
body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  position: relative;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
}

.wrapper {
  height: 100%;
  background: #263729;
}

.page {
  float: left;
  background: #992213;
  min-height: 100%;
  padding-top: 30px;
}

#page-1 {
  background: #0C717A;
}

#page-2 {
  background: #009900;
}

#page-3 {
  background: #0000FF;
}

a {
  color: #FFF;
}

a.selected {
  color: red;
}

.simulate {
  height: 2000px;
}

  

    page 1
    page 2
    page 3
  
  

    
page 1
    
Simulated content heigher than 100%
  
  

    
page 2
    
Simulated content heigher than 100%
  
  

    
page 3
    
Simulated content heigher than 100%