How to implement a responsive horizontal page sliding navigation with jQuery and CSS?

Responsive Horizontal Page Sliding

To create a responsive horizontal navigation similar to the one in the image you provided, you can use a combination of CSS and jQuery. The following snippet will resize the pages to fit the screen width on any device:

1. Calculate the number of slides and adjust the width of the wrapper accordingly.


2. Set the width of each slide based on the number of slides to ensure they fit horizontally.


3. Use jQuery to animate the left margin of the wrapper to reveal the corresponding slide when an item in the menu is clicked.

This solution offers several advantages:

1. It uses only one instance of the navigation menu to minimize markup duplication.


2. It requires only jQuery as a dependency.


3. It works for any number of slides, making it a dynamic solution.

To prevent scrollbars from appearing on slides that have shorter content, set the minimum height of the pages in the CSS:

<code class="css">.page { min-height: 100%; }</code>

$(document).ready(function() {
// Calculate the number of slides and adjust wrapper width
var slideNum = $('.page').length;
var wrapperWidth = 100 * slideNum;
var slideWidth = 100 / slideNum;
$('.wrapper').width(wrapperWidth + '%');
$('.page').width(slideWidth + '%');

// Click listener for navigation items
$('a.scrollitem').click(function() {
// Remove selected class and add it to the clicked link
$('a.scrollitem').removeClass('selected');
$(this).addClass('selected');

//Determine which slide number was clicked and calculate the required margin
var slideNumber = $($this).attr('href').index('.page'),
margin = slideNumber * -100 + '%';

// Animatethe wrapper's left margin to show corresponding slide
$('.wrapper.animate({
marginLeft: margin},
1000);
return false;
});
});

<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<nav>
<a href="#page-1" class="scrollitem selected">Page 1</a>
<a href="#page-2" class="scrollitem">Page 2</a>
<a href="#page-3" class="scrollitem">Page 3</a>
</nav>
<div id="page-1" class="page">
<h3>Page 1</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
<div id="page-2" class="page">
<h3>Page 2</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
<div id="page-3" class="page">
<h3>Page 3</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
</div></code>

The above is the detailed content of How to implement a responsive horizontal page sliding navigation with jQuery and CSS?. For more information, please follow other related articles on the PHP Chinese website!