響應式水平滾動菜單

Question

一旦您從手機設備查看， http://healthunit.com在屏幕頂部有一個干凈的水平滾動菜單。 我正在嘗試模仿相同的功能，這要歸功於我正在使用大量導航元素重新設計的網站。

要求：

1. 左右滾動單擊選項
2. 以空間為中心的居中列表項選項
3. 一次只能看到一個列表項
4. 橫向滾動和響應
5. 單擊列表中的最后一個或第一個選項將轉到列表中的第一個選項或最后一個選項

我此部分的當前HTML是：

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

目前附加到它的CSS是：

nav#sub {
  background: #004173;
  background: linear-gradient(to bottom, #004173 0%,#014f8d 100%);
  background: -moz-linear-gradient(top, #004173 0%, #014f8d 100%);
  background: -ms-linear-gradient(top, #004173 0%,#014f8d 100%);
  background: -o-linear-gradient(top, #004173 0%,#014f8d 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#004173), color-stop(100%,#014f8d));
  background: -webkit-linear-gradient(top, #004173 0%,#014f8d 100%);
  border-bottom: #00325a solid 3px;
  box-shadow: 0 4px 6px 0 #BFBFBF;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004173', endColorstr='#014f8d',GradientType=0 );
  webkit-box-shadow: 0 4px 6px 0 #BFBFBF;
}

#sub ul {
  text-align: center;
}

#sub ul li {
  padding: 10px 3.3%;
}

#sub a {
  color: #fff;
  font-size: 10pt;
  font-weight: 400;
  text-decoration: none;
}

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

Answer 1

所以，最后我想我有你想要的東西：

小提琴： http ： //jsfiddle.net/fzXMg/2/

CSS和HTML在小提琴......

JS：

$(function(){
    var state = 0;
    var maxState = 6;
    var winWidth = $(window).width();
    $(window).resize(function(){
        winWidth = $(window).width();
        $('.box,.container_element').width(winWidth-100);
    }).trigger('resize');
    $('#lefty').click(function(){
        if (state==0) {
           state = maxState;
        } else {
           state--;
        }
        $('.container_element').animate({scrollLeft:((winWidth-100)*state)+'px'}, 800);
    });
    $('#righty').click(function(){
        if (state==maxState) {
           state = 0;
        } else {
           state++;
        }
        $('.container_element').animate({scrollLeft:((winWidth-100)*state)+'px'}, 800);
    });
});

這再次使用jQuery。

Answer 2

看看這個jsfiddle： http ： //jsfiddle.net/7vvdB/

基本上，創建一個最大寬度為100％的外部容器和一個overflow-x：scroll，然后創建一個內部容器，其寬度足以容納所有元素，然后將所有元素放在內部容器中。

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

}

.inner_container
{
    width:5000px;
}
}

Answer 3

看看那個小提琴： http ： //jsfiddle.net/zEPQ5/15/

它在設計意義上並不完美，但它展示了這個概念。

我用jQuery。

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

Answer 4

現在健康單位網站已經改變了原來的問題並不完全清楚。

要創建一個水平滾動的導航菜單，使用箭頭按鈕（而不是滾動條）可以用一個小jQuery實現，並輕松轉換為純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();

演示： https ： //www.codeply.com/go/HgAVBVfQFY