[英]Responsive Horizontal Scrolling Menu
http://healthunit.com has a clean horizontal scrolling menu at the top of the screen once you view it from a mobile phone device. 一旦您从手机设备查看, http://healthunit.com在屏幕顶部有一个干净的水平滚动菜单。 I'm trying to mimic that same exact functionality thanks to a site I'm redesigning with a huge level of navigation elements. 我正在尝试模仿相同的功能,这要归功于我正在使用大量导航元素重新设计的网站。
Requirements: 要求:
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;
}
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。
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%的外部容器和一个overflow-x:scroll,然后创建一个内部容器,其宽度足以容纳所有元素,然后将所有元素放在内部容器中。
.container_element
{ white-space:nowrap
min-width:100%;
overflow-x:scroll;
overflow-y:hide;
}
.inner_container
{
width:5000px;
}
}
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);
});
});
Now that the healthunit site has changed the original question is not completely clear. 现在健康单位网站已经改变了原来的问题并不完全清楚。
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();
Demo: https://www.codeply.com/go/HgAVBVfQFY 演示: https : //www.codeply.com/go/HgAVBVfQFY
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.