如何用jQuery和CSS实现响应式水平页面滑动导航？

响应式水平页面滑动

要创建类似于您提供的图像中的响应式水平导航，您可以结合使用 CSS 和 jQuery。以下代码片段将调整页面大小以适合任何设备上的屏幕宽度：

1. 计算幻灯片数量并调整包装的宽度


2. 根据幻灯片的数量设置每张幻灯片的宽度，以确保它们水平放置。


3. 使用 jQuery 为左侧设置动画单击菜单中的项目时，包装器的边距会显示相应的幻灯片。

此解决方案具有以下几个优点： p>

1. 它仅使用导航菜单的一个实例，以最大限度地减少标记重复。


2. 它只需要 jQuery 作为依赖关系。


3. 它适用于任意数量的幻灯片，使其成为一个动态解决方案。

要防止内容较短的幻灯片上出现滚动条，请在 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 id="Page">Page 1</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
<div id="page-2" class="page">
<h3 id="Page">Page 2</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
<div id="page-3" class="page">
<h3 id="Page">Page 3</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
</div></code>

以上是如何用jQuery和CSS实现响应式水平页面滑动导航？的详细内容。更多信息请关注PHP中文网其他相关文章！