创建水平滚动菜单栏

Posted 2023-02-16

【中文标题】创建水平滚动菜单栏

【英文标题】：Creating a horizontally scrolling menu bar

【发布时间】：2014-04-15 05:46:40

【问题描述】：

我正在寻找一些关于为网站的建议（要在计算机上查看，而不是在手持设备上查看）。我对编码很生疏，但我真的只是在寻找如何实现这种效果的粗略轮廓。首先，让我解释一下我要做什么。

它看起来像这样，其中 是箭头的图像：

如果您要单击任一箭头，则菜单（或者更确切地说，其中的对象分别向左或向右移动，使菜单的某些部分现在可见，而其他部分现在不可见，例如（如果您是点击左箭头）：

换句话说，这个菜单的目的是比屏幕更宽，但我只想显示箭头之间的内容。

任何帮助将不胜感激。

【问题讨论】：

正如您所提到的，您需要一个起点，因此请查看 CodePen：codepen.io/… 或查看 1stwebdesigner.com/css/… 以获得一些灵感/帮助。

【参考方案1】：

查看 swipe.js，它们在网页中非常易于使用，您也可以使它们具有响应性。

https://github.com/thebird/Swipe

您将使用此代码创建一个可滑动的滑块

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

在<div></div> 内创建您的页面（A | B | C）

【参考方案2】：

使用以下脚本会有所帮助

<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

【参考方案3】：

您可以通过将所有内容放在一个固定宽度的 div 中来实现这一点。

例如：

<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>

现在，当单击任何箭头时，您可以手动移动 .inner-container。

CSS 应该是这样的：

  .content-box
     position: relative;
     width: 12.5em;
     overflow: hidden;
  

  .inner-container
     position: absolute;
  

  .inner-container > div
      width: 1em;
  

此外，在左右图像点击时，您可以使用以下代码...

$('.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.

这只是您想要的概述，没有深入细节。

PS：给出的解决方案请记住您没有使用引导程序。

【讨论】：

谢谢！刚开始研究它，它似乎会很好地工作。唯一的问题是（这只是表明我的编码是多么生疏——已经有好几年了）我如何使用链接来改变内部容器的样式——在这种情况下改变内部容器类的 left 属性。 Javascript，我猜？我知道这个问题对你来说太低级了，所以我很抱歉，但我不确定我以前是否曾经这样做过。

经过一番搜索，看来 jquery 是正确的方法。再次感谢！

你可以使用它们中的任何一个...只需在用户单击左右图像时修改内部容器内div的左右属性

已修改答案。希望这会有所帮助。