Interactive Sideways Navigation Bar

Question

Interactive Sideways Navigation Bar

showcases a sleek horizontal scrolling menu on mobile devices. I aim to replicate this functionality for a website I'm redesigning that features extensive navigation elements.

Key Features:

Left and right scroll button options
Centered list item option within the available space
Display only one list item at a time
Horizontal Scrolling & Responsive design
Clicking on the first or last list item navigates to the appropriate end of the list

This is the current HTML code for the section:

<nav id="sub" class="clearfix">
  <ul class="wrapper">
    <a href="#"><li>Estimate</li></a>
    <a href="#"><li>About</li></a>
    <a href="#"><li>Customer Information</li></a>
    <a href="#"><li>Financing</li></a>
    <a href="#"><li>Careers</li></a>
    <a href="#"><li>Locate Us</li></a>
    <a href="#"><li>Inspiration</li></a>
  </ul>
</nav>

Current CSS styles attached to the menu are as follows:

nav#sub {
  background: #004173;
  /* Additional CSS properties */
}

#sub ul {
  text-align: center;
  /* Additional CSS properties */
}

#sub ul li {
  padding: 10px 3.3%;
  /* Additional CSS properties */
}

#sub a {
  color: #fff;
  font-size: 10pt;
  font-weight: 400;
  text-decoration: none;
  /* Additional CSS properties */
}

#sub ul a:hover li {
  background: #007FEB;
}

javascript jquery html css mobile-website

Answer 1

Answer №1

After some time, I believe I have found exactly what you need:

Snippet: http://jsfiddle.net/abc123/4/

All the necessary CSS and HTML can be found in the snippet...

JavaScript Code:

$(function(){
    var counter = 0;
    var limit = 7;
    var screenWidth = $(window).width();
    $(window).resize(function(){
        winWidth = $(window).width();
        $('.box,.container_element').width(winWidth-100);
    }).trigger('resize');
    $('#left_arrow').click(function(){
        if (counter == 0) {
           counter = limit;
        } else {
           counter--;
        }
        $('.container_element').animate({scrollLeft:((winWidth-100)*counter)+'px'}, 800);
    });
    $('#right_arrow').click(function(){
        if (counter == maxState) {
           counter = 0;
        } else {
           state++;
        }
        $('.container_element').animate({scrollLeft:((winWidth-100)*counter)+'px'}, 800);
    });
});

jQuery is used once again for this implementation.

Answer 2

After some time, I believe I have found exactly what you need:

Snippet: http://jsfiddle.net/abc123/4/

All the necessary CSS and HTML can be found in the snippet...

JavaScript Code:

$(function(){
    var counter = 0;
    var limit = 7;
    var screenWidth = $(window).width();
    $(window).resize(function(){
        winWidth = $(window).width();
        $('.box,.container_element').width(winWidth-100);
    }).trigger('resize');
    $('#left_arrow').click(function(){
        if (counter == 0) {
           counter = limit;
        } else {
           counter--;
        }
        $('.container_element').animate({scrollLeft:((winWidth-100)*counter)+'px'}, 800);
    });
    $('#right_arrow').click(function(){
        if (counter == maxState) {
           counter = 0;
        } else {
           state++;
        }
        $('.container_element').animate({scrollLeft:((winWidth-100)*counter)+'px'}, 800);
    });
});

jQuery is used once again for this implementation.

Answer 3

Answer №2

With the recent changes to the healthunit site, the original question may not be completely clear anymore.

If you want to create a horizontal scrolling navigation menu using arrow buttons instead of a scrollbar, you can achieve this with some jQuery and easily convert it to pure JavaScript.

var $bar = $('.nav');
var $container = $('#outer');
var widths = {};
var scrollOffset = 0;

var container = document.getElementById("outer");
var bar = document.getElementById("bar");

function setMetrics() {
    metrics = {
        bar: bar.scrollWidth||0,
        container: container.clientWidth||0,
        left: parseInt(bar.offsetLeft),
        getHidden() {
            return (this.bar+this.left)-this.container
        }
    }

    updateArrows();
}

function doSlide(direction){
    setMetrics();
    var pos = metrics.left;
    if (direction==="right") {
        amountToScroll = -(Math.abs(pos) + Math.min(metrics.getHidden(), metrics.container));
    }
    else {
        amountToScroll = Math.min(0, (metrics.container + pos));
    }
    $bar.css("left", amountToScroll);
    setTimeout(function(){
        setMetrics();
    },400)
}

function updateArrows() {
    if (metrics.getHidden() === 0) {
        $(".toggleRight").addClass("text-light");
    }
    else {
        $(".toggleRight").removeClass("text-light");
    }

    if (metrics.left === 0) {
        $(".toggleLeft").addClass("text-light");
    }
    else {
        $(".toggleLeft").removeClass("text-light");
    }
}

function adjust(){
    $bar.css("left", 0);
    setMetrics();
}

$(".toggleRight").click(function(){
    doSlide("right");
});

$(".toggleLeft").click(function(){
    doSlide("left");
});

$(window).on("resize",function(){
    // reset to left pos 0 on window resize
    adjust();
});

setMetrics();

Demo:

Answer 4

With the recent changes to the healthunit site, the original question may not be completely clear anymore.

If you want to create a horizontal scrolling navigation menu using arrow buttons instead of a scrollbar, you can achieve this with some jQuery and easily convert it to pure JavaScript.

var $bar = $('.nav');
var $container = $('#outer');
var widths = {};
var scrollOffset = 0;

var container = document.getElementById("outer");
var bar = document.getElementById("bar");

function setMetrics() {
    metrics = {
        bar: bar.scrollWidth||0,
        container: container.clientWidth||0,
        left: parseInt(bar.offsetLeft),
        getHidden() {
            return (this.bar+this.left)-this.container
        }
    }

    updateArrows();
}

function doSlide(direction){
    setMetrics();
    var pos = metrics.left;
    if (direction==="right") {
        amountToScroll = -(Math.abs(pos) + Math.min(metrics.getHidden(), metrics.container));
    }
    else {
        amountToScroll = Math.min(0, (metrics.container + pos));
    }
    $bar.css("left", amountToScroll);
    setTimeout(function(){
        setMetrics();
    },400)
}

function updateArrows() {
    if (metrics.getHidden() === 0) {
        $(".toggleRight").addClass("text-light");
    }
    else {
        $(".toggleRight").removeClass("text-light");
    }

    if (metrics.left === 0) {
        $(".toggleLeft").addClass("text-light");
    }
    else {
        $(".toggleLeft").removeClass("text-light");
    }
}

function adjust(){
    $bar.css("left", 0);
    setMetrics();
}

$(".toggleRight").click(function(){
    doSlide("right");
});

$(".toggleLeft").click(function(){
    doSlide("left");
});

$(window).on("resize",function(){
    // reset to left pos 0 on window resize
    adjust();
});

setMetrics();

Demo:

Answer 5

Answer №3

Here's a cool example using a fiddle: http://jsfiddle.net/zEPQ5/15/

While the design may not be flawless, it effectively showcases the concept at hand.

The implementation involved utilizing jQuery extensively.

$(function(){
    var count = 0;
    $('#up').click(function(){
        count += 1;
        $('ul.wrapper').animate({marginTop:(15-count*35)+'px'},400);
    });
    $('#down').click(function(){
        count -= 1;
        $('ul.wrapper').animate({marginTop:(15-count*35)+'px'},400);
    });
});

Answer 6

Here's a cool example using a fiddle: http://jsfiddle.net/zEPQ5/15/

While the design may not be flawless, it effectively showcases the concept at hand.

The implementation involved utilizing jQuery extensively.

$(function(){
    var count = 0;
    $('#up').click(function(){
        count += 1;
        $('ul.wrapper').animate({marginTop:(15-count*35)+'px'},400);
    });
    $('#down').click(function(){
        count -= 1;
        $('ul.wrapper').animate({marginTop:(15-count*35)+'px'},400);
    });
});

Answer 7

Answer №4

Here is a helpful jsfiddle link: http://jsfiddle.net/7vvdB/

The technique involves creating an outer container with a maximum width of 100% and horizontal scrolling capability. Inside this container, create another element with a fixed width that accommodates all the elements you want to display. Place all your content within this inner container.

.container_element
{ 
    white-space: nowrap;
    min-width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}

.inner_container
{
    width: 5000px;
}

Answer 8

Here is a helpful jsfiddle link: http://jsfiddle.net/7vvdB/

The technique involves creating an outer container with a maximum width of 100% and horizontal scrolling capability. Inside this container, create another element with a fixed width that accommodates all the elements you want to display. Place all your content within this inner container.

.container_element
{ 
    white-space: nowrap;
    min-width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}

.inner_container
{
    width: 5000px;
}

Interactive Sideways Navigation Bar

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to ensure that a component remains the highest layer on a react-leaflet map?

The ng-model binding does not automatically update another ng-model within the same object

I encountered a console issue that I am struggling with. It is showing the error message "TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'"

How to manage simultaneous requests in Parse Server Cloud Code

Node.js is struggling to parse JSON data, resulting in undefined values appearing in the console

Is Ursina the right choice for web development?

ReactJS frontend is experiencing issues resolving a significant number of its node modules all of a sudden

Try implementing jQuery to switch out an href link

Is it possible to initially design a login page using HTML/CSS and JavaScript, and then integrate VUE into it?

Attempted everything... Clicking away but a div refuses to show up post-click, resulting in an error message

Encountering an Uncaught TypeError: Attempting to call a controller function using AJAX in Magento results in undefined not being a function

Unlock the secrets of programming with the must-have guide to mastering variables

Conditionals causing issue with React Button disabled property functionality

Display a remote page on hover using Javascript, CSS, and HTML without providing any clickable link

Terminate the execution of the process.exec function

The css property of *ngContainerOutlet is ineffective when applied to an ng-component with encapsulation

Populate Jquery datatables programmatically

`How can I activate caching for getServerSideProps in Next.js?`

What is the best way to integrate an AJAX callback into the stop condition of a `do while` loop?

Issues with CSS z-index in negative values not functioning correctly