Move the div from side to side when clicked

My mobile navigation bar currently has overflow, requiring users to scroll left or right to see all the choices. I want to implement buttons with arrows that will automatically slide the navigation bar to the desired direction when clicked.

I have attempted to use jQuery with commands like:

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

However, these methods do not produce the desired effect and end up causing the navigation bar to disappear.

Here is 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 created:

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

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

The goal is to have the navigation-bar scroll to the left upon clicking the button.

javascriptjqueryhtmlcss

Answer №1

Hopefully, this information proves valuable to 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>

Answer №2

To achieve this effect, you can apply CSS translation triggered by a button click event.

$("#button").on("click", function() {
  $("#box").css("transform", "translateX(100px)");
});

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to retrieve EXIF data following the AJAX loading of images?

Currently, I am developing a swipe-able wine image viewer for NapaWapa.com and it's functioning quite smoothly: The challenge I'm facing is related to using a jquery plugin to extract the exif data from the images in the gallery. Unfortunately, ...

javascriptjqueryajaxexif

Connecting the mat-progress bar to a specific project ID in a mat-table

In my Job Execution screen, there is a list of Jobs along with their status displayed. I am looking to implement an Indeterminate mat-progress bar that will be visible when a Job is executing, and it should disappear once the job status changes to stop or ...

javascriptangulartypescriptangular7

Issue with Magento cart not updating after making a POST request using JQuery's ajaxSubmit function

Recently, I encountered a unique requirement that led me to use ajaxSubmit in order to add products to the Magento shopping cart. Despite using return true; as a callback, the shopping cart page displays empty until manually refreshing the page from the br ...

jqueryajaxmagentoform-submit

Using VueJS Single File Components can cause issues with the example code for "Custom Popups" in the Google Maps API

Trying to implement a unique Google Maps popup following the provided documentation. After copying and pasting the official Google example code into a VueJS jsFiddle, the custom marker functions correctly as intended. It remains in the designated area eve ...

javascriptgoogle-mapsgoogle-maps-api-3vue.jsvuejs2

Troubleshooting a 400 Bad Request Error in jQuery Ajax for WordPress Widgets

I am attempting to send information to admin-ajax.php in order to save it as a $_POST variable for handling on the cart page. However, my .ajax function keeps failing. var sendJsonA = {'value':'Data coming from JSON'} var ajaxurl = $ ...

javascriptphpjqueryajaxwordpress

Creating tooltips using React and Tailwind CSS

I'm currently working on creating tooltips for icons in my header. I have created a component that combines the icon and tooltip into one div, with Tailwind CSS styles applied. JSX Component: const HeaderIcon = ({ icon, redirect = window.location.pat ...

cssreactjstailwind-css

The onChange event does not function properly on formatted Mui sliders

Having an issue with the Mui styled Slider. The value is not changing smoothly and it seems like the thumb of the slider is not draggable. You can see the issue reproduced here. Thank you in advance. ...

javascriptreactjsmaterial-ui

Having a quandary with Socket.io when using clients.length (where clients refers to io.sockets.clients();)

Typically, when sending JSON from one client to another, everything works smoothly. However, if there is only one client, packets are still being sent. To address this issue (on the server-side in node.js), I implemented the following solution: var client ...

javascriptnode.jssocket.io

Generating a stacked array using JavaScript

I have an original two-dimensional array representing the full budget for each year, as shown below: budget = [['2001-01-01', 100], ['2001-01-02', 110], ... , ['2001-12-31', 140]] Now I want to create subarrays of the budget ...

javascriptarraysmultidimensional-arrayslice

The issue with the smooth scrolling feature in next/link has not been resolved

I am currently facing an issue where smooth scrolling is not working when using next/Link, but it works perfectly fine with anchor tags. However, the downside of using anchor tags is that the page reloads each time, whereas next/link does not reload the pa ...

javascriptcssnext.jsanchornext-link

AngularJS Currency Converter - Converting Currencies with Ease

I have a question regarding the most efficient way to handle currency conversion on a webpage. Currently, I have multiple input fields displaying different currencies. When a user clicks on the currency conversion button, a modal popup appears. After the ...

javascriptangularjstypescriptangularjs-directive

Exploring the directories: bundles, lib, lib-esm, and iife

As some libraries/frameworks prepare the application for publishing, they create a specific folder structure within the 'dist' directory including folders such as 'bundles', 'lib', 'lib-esm', and 'iife'. T ...

javascriptnode.jstypescriptwebpackrollup

Steps for iterating over the "users" list and retrieving the contents of each "name" element

I'm attempting to iterate over the "users" array and retrieve the value of each "name". Although the loop seems to be functioning correctly, the value of "name" is returning as "undefined" four times. JavaScript: for(var i = 0; i < customer.users ...

javascriptjson

Ways to tally HTML elements using VBA

Currently, I am delving into the world of creating a web scraping tool using VBA to extract event details and store them in an Excel sheet. Within this endeavor, I am faced with deciphering HTML code snippets that resemble the following: <div class="a ...

htmlexcelvbaweb-scraping

How can I create a table using a loop and an onclick function for each <td>?

I have written code to create a table in PHP using a loop. I want to add an onclick function to each cell so that when a particular cell is clicked, the background color changes. However, I am encountering an error. Am I doing something wrong? <head& ...

javascriptphpjqueryhtml

Is there a way to access the value of a variable within a loop inside a function and store it in a global variable?

I am struggling to retrieve the value of a variable after it has passed through a loop. I attempted to make it a global variable, but its value remains unchanged. Is there any way to achieve this? Below is my code snippet where I am attempting to access t ...

htmlfunctionvariablesjavascript

SVG files do not fetch external CSS stylesheets when embedded in the DOM

Take a look at this example on jsFiddle. When using IE, the external CSS is loaded and the rectangle is red, but in Chrome and FF the rectangle stays black. What causes this difference? <!-- Used for referencing the external css --> <?xml-styl ...

htmlcsssvg

What is the best way to animate various sprites using distinct buttons in HTML and CSS?

I've been experimenting with animating a sprite by using different onClick button triggers. I encountered an issue where only one of the buttons works correctly in the fiddle. However, in my local file version, the other buttons work but only once and ...

javascriptjqueryhtmlcssanimation

Minimize the gap between col-lg elements in responsive mode within Bootstrap

My website is built using Bootstrap 4 and the following is the HTML code: <div class="container"> <div class="row text-center "> <div class="col-lg-6">A</div> <div class="col-lg-6">B</div> </div> < ...

htmlcssbootstrap-4

Tips for successfully implementing an Ocrad.js example

I've been working on an OCR (optical character recognition) web application and stumbled upon the Ocrad.js JavaScript library Ocrad.js. It seems like a perfect fit for what I need, but unfortunately, I'm having trouble getting it to function prop ...

javascriptjqueryocr