创建一个水平滚动菜单栏 [英] Creating a horizontally scrolling menu bar

问题描述

我正在寻找关于为网站创建水平滚动菜单栏的一些建议（可以在计算机上查看，而不是在手持设备上查看）。我在编码方面很生疏，但我只是在寻找一个关于如何实现这种效果的粗略概述。首先，让我解释我想要做什么。

它看起来像这样，其中< - 和 - >是箭头的图像： / p>

< ---- C | D | E | F ---->

如果你点击箭头，菜单（或者说，分别向左或向右移动的对象，使得菜单的某些部分现在可见，而其他部分现在不可见，例如（如果您要点击左箭头）：

< ---- A | B | C | D ----->

换句话说，这个菜单的意图是比屏幕更宽，但我只想要适合箭头之间的东西以显示。

任何帮助将不胜感激。 您可以通过将所有内容放入固定宽度的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容器。 / p>

这个CSS就是这样的：

  .content-框{
 position：relative; 
 width：12.5em; 
 overflow：hidden; 
} 
 
 .inner-container {
 position：absolute; 
} 
 
 .inner-container> div {
 width：1em; 
} 
  

此外，在左侧和右侧图片点击中，您可以使用以下代码。 ..（$。

  $（'。left-btn'）。click（function（）{
 $（'。内部容器'）。each（function（）{
 $（this）.css（{'left'，（parseInt（$（this）.css（'left'） -  16）+'px'} ）; 
}）; 
}）; 
 
 //这里16表示内容器中div的大小
  
 $ p 
 
 
 
 这只是你想要的内容的概述，而没有深入细节。
 PS：解决方案记住你没有使用bootstrap。
 
I'm looking for some advice on creating a horizontally scrolling menu bar for a website (to be viewed on computer, not handhelds). I'm quite rusty on coding, but I'm really just looking for a rough outline of how I could go about achieving this effect. First, let me explain what I'm trying to do.

It would look something like this, where <-- and --> are images of arrows:

<----    C     |     D      |     E      |      F     ---->

if you were to click on either arrow, the menu (or rather, the objects within the  moves to the left or right, respectively, making some parts of the menu now visible, and others now invisible, such as (if you were to click the left arrow): 

<----   A      |    B       |     C      |      D   ----->

In other words, this menu is intended to be wider than the screen, but I only want what fits in between the arrows to show.

Any help would be greatly appreciated.
解决方案
You can achieve this by putting all your content in a fixed width div.

Eg: 
<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>
Now, when any of the arrows are clicked, you can manually move the .inner-container.

CSS for this would be something like this:
  .content-box{
     position: relative;
     width: 12.5em;
     overflow: hidden;
  }

  .inner-container{
     position: absolute;
  }

  .inner-container > div{
      width: 1em;
  }
Further, on left and right image clicks, you can use the following code...
$('.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.
This is just the overview of what you want, without getting into the finer details.

PS: Solution is given keeping in mind that you are not using bootstrap.

                        
这篇关于创建一个水平滚动菜单栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！