Question

一旦您从手机设备查看，

http://healthunit.com在屏幕顶部有一个干净的水平滚动菜单。我试图模仿相同的功能，这要归功于我使用大量导航元素重新设计的网站。

要求：

左右滚动点击选项
以空格为中心的居中列表项选项
一次只能显示一个列表项
水平滚动＆amp;响应
点击列表中的最后一个或第一个选项将转到列表中的第一个选项或最后一个选项

我此部分的当前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

响应式水平滚动菜单

4 个答案: