0

I have a navigation bar that on mobile it has overflow and for people to see all the choices they need to scroll to the right or to the left. I want to add buttons with arrows so when people click for example on the right one the nabber will slide on its own to the right.

I have tried jQuery 

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

but none of this seems to work how I want, it makes the nabber dissappear.

the menu bar with slider

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

The function 

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

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

I want to be able to click the button and have the navigation-bar scroll to the left.

MCM
  • 141
  • 2
  • 15
  • Possible duplicate https://stackoverflow.com/questions/15658858/how-to-make-div-slide-from-right-to-left – Antonio Esposito Apr 09 '19 at 21:46
  • 1
    Can we see your CSS, too? I think a [working example](https://stackoverflow.com/help/mcve) might help demonstrate the issue. – showdev Apr 09 '19 at 21:52
  • 1
    It sounds like you might be looking to [animate](http://api.jquery.com/animate/) [scrollLeft](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft), but I'm not sure. – showdev Apr 09 '19 at 21:59
  • Thank you for your answer @showdev scollLeft worked like a charm!! :) – MCM Apr 10 '19 at 15:03

2 Answers2

3

Hope this will help you.

$(".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>
Berk Store
  • 49
  • 6
  • Thank you for your answer! but this made my navbar disappear :( But with simply scrollLeft I achieved the wanted result! :) – MCM Apr 10 '19 at 15:02
1

You can use CSS translation to achieve this, activated upon a button click or something similar.

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

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

user37309
  • 597
  • 5
  • 14