响应式水平滚动菜单 [英] Responsive Horizontal Scrolling Menu

问题描述

http://healthunit.com 在您从屏幕顶部查看后，它在屏幕顶部具有一个干净的水平滚动菜单手机设备.由于我正在重新设计带有大量导航元素的网站，因此我试图模仿相同的确切功能.

http://healthunit.com has 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.

要求:

1. 左右滚动单击选项
2. 居中列表项选项居中于空格
3. 一次只能看到一个列表项
4. 水平滚动和响应式
5. 单击列表中的最后一个或第一个选项将带您进入列表中的第一个选项或最后一个选项

我本节的当前html是:

My current html for this section is:

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

推荐答案

所以，最后，我认为我已经找到了您想要的东西:

So, finally I think I have what you are looking for:

提琴手: http://jsfiddle.net/fzXMg/2/

CSS和HTML位于小提琴中...

CSS and HTML is in the Fiddle...

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.

This uses jQuery again.

这篇关于响应式水平滚动菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！