Создание горизонтально прокручиваемой строки меню

Я ищу несколько советов по созданию горизонтальной полосы прокрутки меню для веб-сайта (для просмотра на компьютере, а не на портативных устройствах). Я довольно увлечен кодированием, но на самом деле я просто ищу приблизительную схему того, как я могу добиться этого эффекта. Сначала позвольте мне объяснить, что я пытаюсь сделать.

Это будет выглядеть примерно так, где <- и -> изображения стрел:

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

если вы нажмете на любую стрелку, меню (или, скорее, объекты в пределах перемещается влево или вправо, соответственно, что делает некоторые части меню теперь видимыми, а другие теперь невидимыми, например (если вы стрелка влево):

<---- A | Б | C | D ----->

Другими словами, это меню должно быть шире, чем экран, но я хочу, чтобы показывалось только то, что помещается между стрелками.

Любая помощь будет принята с благодарностью.

Источник

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-контейнер.

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: Решение принимается с учетом того, что вы не используете бутстрап.

Источник

Проверьте 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)

Источник

Использование следующих скриптов поможет

<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

Источник
Другие вопросы по тегам