How to Create a Responsive Horizontal Page Sliding System with jQuery and CSS?

Responsive Horizontal Page Sliding

Problem

Designing a responsive horizontal navigation system presents several challenges:

• Maintaining page visibility within the viewport
• Preventing gaps or overlaps between pages
• Allowing for pages that extend beyond 100% height, with scrollbar visibility
• Ensuring compatibility with Internet Explorer 9 or above

Solution

This solution employs jQuery and includes the following key features:

1. Responsive Sizing: The script calculates the total width of the wrapper based on the number of pages, ensuring responsive scaling.
2. Smooth Transition: Clicking navigation links smoothly animates the wrapper's left margin, transitioning between pages without abrupt jumps.
3. Dynamic Height Handling: Pages can extend beyond 100% height, and a scrollbar appears when necessary, eliminating unwanted gaps.
4. Active Link Indication: The selected navigation link is highlighted to indicate the current page position.
5. IE Compatibility: The code is compatible with Internet Explorer 9 and above.

Code Implementation

<code class="javascript">$(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;
  });
});</code>

CSS

<code class="css">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;
}</code>

Conclusion

This code snippet provides a comprehensive solution for responsive horizontal page navigation, efficiently addressing the stated requirements. Its flexibility allows for dynamic navigation menus and accommodating long pages with scrollbars. Moreover, its compatibility with Internet Explorer 9 ensures compatibility with a wide range of browsers.

The above is the detailed content of How to Create a Responsive Horizontal Page Sliding System with jQuery and CSS?. For more information, please follow other related articles on the PHP Chinese website!