Menu manipulation: Shifting menus left and right with a click

Take a look at this link. There are 12 menu items, but only 4 are visible due to space constraint. The rest are hidden.

Update: Jsfiddle cleaned up and removed my fiddle. I have provided an alternative link above. There was a missing jQuery part in my question.

I have two buttons:

  1. Move Left by -1 (referred to as 'ML')
  2. Move Right by +1 (referred to as 'MR')

I am attempting to achieve the following:

  1. Clicking on MR will shift menus by +1
  2. Clicking on ML will shift menus by -1

HTML

<div id="outer">
<input type="button" value="move left by -1" class="left" />
<input type="button" value="Move Right by +1" class="left" />
<ul id="menulist">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
    <li>Menu 5</li>
    <li>Menu 6</li>
    <li>Menu 7</li>
    <li>Menu 8</li>
    <li>Menu 9</li>
    <li>Menu 10</li>
    <li>Menu 11</li>
    <li>Menu 12</li>
</ul>

CSS

#outer {
    width:448px;
    overflow:hidden;
}
.left {
    float:left;
}
ul, li {
    list-style:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
ul {
    font-size:0;    
    float:left;
    width:1400px;
}
li {
    display:inline-block;
    padding:5px;
    background:lightgrey;
    border:darkgrey;
    width:100px;
    overflow:hidden;
    text-align:center;
    font-size:14px;
    border:1px solid black;
}

Any assistance with this issue would be greatly appreciated.

javascripthtmlcsstwitter-bootstrap

Answer №1

Check out this Jsfiddle link

If you are facing issues with this code in Internet Explorer, you can refer to this Stack Overflow question for assistance

Here is the HTML code:

<div id="outer">
    <input type="button" value="move left by -1" class="left" />
    <input type="button" value="Move Right by +1" class="right" />
    <ul id="menulist">
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
        <li>Menu 4</li>
        <li>Menu 5</li>
        <li>Menu 6</li>
        <li>Menu 7</li>
        <li>Menu 8</li>
        <li>Menu 9</li>
        <li>Menu 10</li>
        <li>Menu 11</li>
        <li>Menu 12</li>
    </ul>

Here is the associated CSS code:

#outer {
    width:448px;
    overflow:hidden;
}
.left {
    float:left;
}
ul, li {
    list-style:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
ul {
    font-size:0;
    float:left;
    width:1400px;
}
li {
    display:inline-block;
    padding:5px;
    background:lightgrey;
    border:darkgrey;
    width:100px;
    overflow:hidden;
    text-align:center;
    font-size:14px;
    border:1px solid black;
}

And here is the JavaScript code:

$('.left').click(function () {
    if (parseInt($('#menulist').css('margin-left'), 10) >= -784) {
        $('#menulist').animate({
            'marginLeft': "-=112px" //moves left
        });
    }
});
$('.right').click(function () {
    if (parseInt($('#menulist').css('margin-left'), 10) >= 0) {
        $('#menulist').css('margin-left', '0px!important');
    } else {
        $('#menulist').animate({
            'marginLeft': "+=112px" //moves right
        });
    }
});

Answer №2

float

ul {
        border: darkgray;
        border: 1px solid black;
    }

markup

<input type="button" value="shift left by -1" class="left" />
<input type="button" value="Shift Right by +1" class="right" />

Javascript

$('.left').click(function() {
    if($('#menu').css('margin-left') == '-896px'){
         $('#menu').css('margin-left', '-896px!important');
    }
    else {
        $('#menu').animate({
        'marginLeft': "-=112px" // move left
        });
    }
});

$('.right').click(function() {
    if($('#menu').css('margin-left') == '0px'){
         $('#menu').css('margin-left', '0px!important');
    }
    else {
        $('#menu').animate({
        'marginLeft': "+=112px" // move right
        });
    }
});

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

Leveraging the power of HTML 5 to dynamically insert content into a jQuery table

I am experiencing an issue with my jquery stock ticker. It displays the latest stocks including Company Name, stock price, and percentage changed. The stock price can be in GBP, USD, or YEN, but the current ticker does not indicate the currency. I attemp ...

javascriptjqueryhtml

Tips on how to retrieve the value of the second td in an HTML table when clicking on the first td utilizing jQuery

There is a specific requirement I have where I must retrieve the value of the second td in an HTML table when clicking on the first column. To accomplish this task, I am utilizing jQuery. $('.tbody').on('click','tr td:nth-child(1) ...

javascriptjqueryhtmlcss

Is dividing a website into two parts acceptable?

In the process of creating a social network, one major concern is making sure that the content is easily readable by Google while also providing users with a seamless and engaging experience through Ajax support. However, it's well-known that Ajax and ...

javascriptjqueryasp.net-mvcajax

Response from a Clean jQuery Web Service

I've been seeing a lot of code examples calling web services that return JSON data, but they tend to involve back-end languages like PHP. Does anyone know of a tutorial for a jQuery-only solution? For example, setting up div tags with IDs, then direct ...

javascriptjqueryjson

Convert the background image (specified in the CSS with background-image) into a PHP variable

I am looking to create a product gallery featuring 5 products, each with its own background image attribute. I am using a loop to insert the product images and I want each loop to display a different background-image. One approach I have considered is usi ...

phpcsshtml

Ways to Enhance jQuery Efficiency in a Broader Sense

Utilizing jQuery functions is a common practice for us. However, there has been talk about its impact on performance. While it is simple to write, understand, and maintain, some say that it is slower compared to using traditional raw JavaScript code. But ...

javascriptjqueryperformanceminify

Leverage Pinia store in Vue helper functions

I have been working on my Vue.js application and I am looking to implement some helper functions that will utilize a Pinia store within the app. These functions need to be accessible by multiple components. Should I define these helper functions directly ...

javascriptvue.jsvuejs3pinia

Causing an element to extend beyond its parent element's boundaries

I have implemented Material Design Lite for creating cards on my website. I encountered an issue where the menu I added to the card only displays within the bounds of the card. I would like it to overflow similar to this example () Here is a link to my fi ...

htmlcssmaterial-design

Learn how to trigger an animation when hovering over an element, and how to pause it once the hover is

I am facing an issue with a button that I want to rotate upon mouse hover. The problem is, the rotation works perfectly when the mouse enters, but it continues spinning even after the mouse leaves. Here's the code snippet for better understanding: ...

csscss-animations

Obtaining the final field with the $in operator in Mongoose

I need to retrieve all person records that fall within a time frame specified by start and end dates, and have a place ID of either 1 or 2. Below is the query I am using: Person.find({ time: { $gte: start, $lt: end ...

javascriptnode.jsmongodbmongooseaggregation-framework

Tips for interacting with the DOM in an Angular 4 application

I am trying to call the addItems method, but I keep getting an error: Uncaught TypeError: this.addItems is not a function Currently, I am using Angular 4 along with jQuery and the fullpage.js library. page-content.component.ts import { Component, OnI ...

javascriptangulartypescript

Revolutionizing user experience: New feature seamlessly triggers button actions with the power of "enter"

I need assistance with modifying a form that contains two buttons and several text inputs. Currently, if the enter key is pressed, it triggers a click event on the first button. However, I want to modify this behavior so that if any of the text boxes are f ...

javascriptjqueryhtmlinputenter

Include a function call within a ternary operator in JSX code

I am looking to call a function within a ternary operator condition. Here is what my code looks like: {snapshot.Bid[0].Price !== 'undefined' ? `(${initialOrderInfo.snapshot.Bid[0].Price}` {renderCurrencySymb ...

javascriptreactjsternary-operatorjsx

Error: Unable to call the 'model' function on the 'users' object in Mongoose due

I'm attempting to implement Mongoose's method for defining models in a separate document from their schemas, especially when dealing with multiple databases. Here's the example provided by Mongoose's Docs for User.js: const userSche ...

javascriptnode.jsmongodbexpressmongoose

currently experiencing layout discrepancies with Flexbox

Experimenting with flexbox has been challenging, but I am close to achieving my desired layout: Place a label in the top left of the first container Position a label in the top right of the first container Align a label in the bottom middle of the first ...

htmlcssflexbox

Traditional method of choosing a value within a <select> dropdown menu

Check out this example of a static dropdown menu: <select style="width:100px" name="drink_type"> <option value="Water">Water</option> <option value="Soda">Soda</option> <option value="Milk">Milk</option> < ...

phphtml

jQuery functions smoothly on Firefox, but encountering issues on Chrome

While it may seem like a repetitive inquiry, I have thoroughly researched similar questions and have not found a suitable solution. The server is returning the following response through a standard ajax call: <form id="ctl00" name="ctl00" method="post ...

javascriptjqueryhtmlgoogle-chrome

Revolutionizing the method of projecting a texture onto a halfsphere in three.js projects

I am currently working on a project in three.js where I am trying to project an image onto the inside of a halfsphere. The half sphere is created using the following code: const geometry = new THREE.SphereGeometry(Component.radius, this.resolution, this.re ...

javascriptthree.js3d

Ways to customize a directive to show conditionally with no need for container elements

I have created a basic role-based security directive in angularjs. It's my first attempt at making a directive. My goal is to replace the following HTML: <authorize if-granted="GET_POSTS"> Hello WORLD!!!! {{name}} </authorize> with j ...

javascripthtmlangularjsangularjs-directive

Solution for dropdown boxes malfunctioning with required fields

Using Bootstrap 3 for field validation on forms has been effective, but there seems to be an issue with certain browsers such as ios safari not validating [required] form items. To address this, I created a script that checks if an element is marked as req ...

javascriptjqueryhtmltwitter-bootstrap