I currently have a horizontal sub-menu with 8 options, but I need to add more without it dropping to a second line. My goal is to create a specific effect where the last option acts as an arrow. When this arrow is clicked, I want the entire menu to slide horizontally to the left, revealing additional options. Clicking a left arrow would then slide the menu back.
After researching for several days, I've come across examples that are similar, but none have worked in my situation. Many solutions involve plugins or carousels, which I believe are not suitable for my website.
Although I have implemented a version of the functionality using .hide() and .show() in jQuery, it doesn't produce the desired effect. I've assigned the class "firstSide" to the initial visible portion of the menu and "slideSide" to the hidden part. I've also experimented with .slideToggle() and adjusting widths, but haven't achieved the desired outcome.
You can view my example on CodePen: CodePen
Despite its rough appearance, the codepen demonstrates the function I am trying to achieve:
$('#arrowRight').on('click', function () {
$('.firstSide').hide(function () {
$('.slideSide').show();
$('#blankSub1').show();
});
});
$('#arrowLeft').on('click', function () {
$('.slideSide').hide(function () {
$('.firstSide').show();
});
});
To prevent the "slideSide" class from displaying alongside the first part of the menu, I have set it to be hidden. This prevents the menu from occupying two lines due to the width constraints of the 8 menu options.
.slideSide {
display: none;
}
The desired effect can be observed on Apple's iPhone store page:
Despite attempting to replicate this effect, I have been unsuccessful thus far. Below is a screenshot of the menu on the referenced page.
If anyone has any suggestions or advice, I would greatly appreciate it as I seem to be at an impasse.