javascript 响应式水平滚动菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24784571/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive Horizontal Scrolling Menu
提问by Huginn
http://healthunit.comhas a clean horizontal scrolling menu at the top of the screen once you view it from a mobile phone device. I'm trying to mimic that same exact functionality thanks to a site I'm redesigning with a huge level of navigation elements.
一旦您从移动电话设备查看，http://healthunit.com在屏幕顶部就会有一个干净的水平滚动菜单。由于我正在重新设计具有大量导航元素的网站，我正在尝试模仿相同的功能。
Requirements:
要求：
- Left and right scroll click options
- Centered list item option centered in the space
- Only one list item visible at a time
- Horizontal Scrolling & Responsive
- Clicking the last or first option in the list will take you to either the first option or last option in the list
- 左右滚动单击选项
- 居中列表项选项在空间中居中
- 一次只能看到一个列表项
- 水平滚动和响应式
- 单击列表中的最后一个或第一个选项会将您带到列表中的第一个选项或最后一个选项
My current html for this section is:
我目前本节的 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>
The CSS currently attached to it is:
当前附加到它的 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;
}
回答by Stefan Wittwer
So, finally I think I have what you are looking for:
所以，最后我想我有你要找的东西：
Fiddle:http://jsfiddle.net/fzXMg/2/
小提琴：http : //jsfiddle.net/fzXMg/2/
CSS and HTML is in the Fiddle...
CSS和HTML在小提琴中......
JS:
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);
});
});
This uses jQuery again.
这再次使用 jQuery。
回答by Stefan Wittwer
Check out that fiddle: http://jsfiddle.net/zEPQ5/15/
看看那个小提琴：http: //jsfiddle.net/zEPQ5/15/
It's not perfect in meaning of design, but it shows off the concept.
它在设计的意义上并不完美，但它展示了这个概念。
I used jQuery with that.
我使用了 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);
});
});
回答by user2415002
Check out this jsfiddle: http://jsfiddle.net/7vvdB/
看看这个 jsfiddle：http: //jsfiddle.net/7vvdB/
Basically, create an outer container with a max-width of 100% and a overflow-x:scroll, then create an inner container with a fixed width large enough to fit all of your elements, then put all of your elements in the inner container.
基本上，创建一个最大宽度为 100% 和溢出 x:scroll 的外部容器，然后创建一个具有固定宽度的内部容器，其足够大以适合您的所有元素，然后将所有元素放入内部容器中.
.container_element
{ white-space:nowrap
min-width:100%;
overflow-x:scroll;
overflow-y:hide;
}
.inner_container
{
width:5000px;
}
}
回答by Zim
Now that the healthunit site has changed the original question is not completely clear.
现在healthunit网站已经改变了原来的问题并不完全清楚。
To make a nav menu that scrolls horizontally uses arrow buttons (instead of scrollbar) can be implemented with a little jQuery and easily converted to pure JavaScript.
要使用箭头按钮（而不是滚动条）制作水平滚动的导航菜单，可以使用一点 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();
