Сдвиньте div вправо и влево по клику

У меня есть панель навигации, которая на мобильных устройствах имеет переполнение, и люди могут видеть все варианты, которые им нужно прокручивать вправо или влево. Я хочу добавить кнопки со стрелками, чтобы, когда люди нажимали, например, на правую кнопку, наббер скользил сам по себе вправо.

Я пробовал jQuery

$('#admin-menu').animate({width:'toggle'},350);
or
$(#admin-menu).show("slide", { direction: "left" }, 1000);
or
$('#admin-menu').slideToggle( "slow" );

но ничего из этого, похоже, не работает так, как я хочу, это заставляет наббер исчезать.

строка меню с ползунком

<nav id = "admin-menu">
    <span class = "tab active" id = "locations-tab">
      <h6>Dashboard</h6>
    </span>
    <span class = "tab" id = "users-tab">
       <h6>Users</h6>
    </span>
    <span class = "tab" id = "users-tab">
       <h6>Users</h6>
    </span>
    <span class = "tab" id = "users-tab">
       <h6>Users</h6>
    </span>
    <span class = "tab" id = "users-tab">
       <h6>Users</h6>
    </span>
    <span class = "tab" id = "users-tab">
       <h6>Users</h6>
    </span>
</nav>

//The button to slide
    <i class = "fas fa-chevron-circle-right right-slider" onClick = "slider()"></I>

Функция

function slider(){
    console.info('Im here!!')

    $('#admin-menu').animate({width:'toggle'},50);
}

Я хочу иметь возможность нажимать кнопку и прокручивать панель навигации влево.

Возможный дубликат stackoverflow.com/questions/15658858/…

— 09.04.2019 23:46

Можем ли мы также увидеть ваш CSS? Я думаю, что рабочий пример может помочь продемонстрировать проблему.

— 09.04.2019 23:52

Похоже, вы ищете оживлять прокрутить влево, но я не уверен.

— 09.04.2019 23:59

Спасибо за ваш ответ @showdev scollLeft работал как шарм!! :)

— 10.04.2019 17:03

javascript jquery html css

09.04.2019 23:37

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

4 770

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

$("#btn").click(function() {
  $("#test").css("transform", "translateX(100px)");
});

https://codepen.io/anon/pen/MRJzog

Спасибо за ваш ответ!! :)

— 10.04.2019 17:03

Конечно! Не стесняйтесь отметить это как ответ на ваш вопрос!

— 11.04.2019 02:08

10.04.2019 00:30

Надеюсь, что это поможет вам.

$(".left-slider").click(function(){
	$('#admin-menu').animate({width:'hide'},1000);
});

$(".right-slider").click(function(){
	$('#admin-menu').animate({width:'show'},1000);
});

<link href = "https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel = "stylesheet"/>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id = "admin-menu">
    <span class = "tab active" id = "locations-tab">
      <h6>Dashboard</h6>
    </span>
    <span class = "tab" id = "users-tab">
       <h6>Users</h6>
    </span>
    <span class = "tab" id = "users-tab">
       <h6>Users</h6>
    </span>
    <span class = "tab" id = "users-tab">
       <h6>Users</h6>
    </span>
    <span class = "tab" id = "users-tab">
       <h6>Users</h6>
    </span>
    <span class = "tab" id = "users-tab">
       <h6>Users</h6>
    </span>
</nav>
<i class = "fas fa-chevron-circle-left left-slider"></i>
<i class = "fas fa-chevron-circle-right right-slider"></i>

Спасибо за ваш ответ! но это заставило мою панель навигации исчезнуть :( Но с помощью простой прокрутки влево я добился желаемого результата! :)

— 10.04.2019 17:02

10.04.2019 00:35