响应式设计的一种实现方式：滚动菜单

Multi-device scrolling menu 本例展示了多设备响应式设计的一种有趣的实现思路，即不是通过汉堡菜单隐藏，而是使用滚动菜单，当界面变小时，显示的菜单项变少，当用户鼠标悬停（或移动触摸拖拉）时，自动左右滚动。

menu, responsive

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3654
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(function() {
    var items = $('#countrySelection-items').width();
    var itemSelected = document.getElementsByClassName('countrySelection-item');
    var backgroundColours = ["rgb(133, 105, 156)", "rgb(175, 140, 115)", "rgb(151, 167, 109)", "rgb(171, 100, 122)", "rgb(105, 134, 156)", "rgb(152, 189, 169)"]
    countriesPointerScroll($(itemSelected));
    $("#countrySelection-items").scrollLeft(200).delay(200).animate({
        scrollLeft: "-=200"
    }, 2000, "easeOutQuad");

$('.countrySelection-paddle-right').click(function() {
        $("#countrySelection-items").animate({
            scrollLeft: '+=' + items
        });
    });
    $('.countrySelection-paddle-left').click(function() {
        $("#countrySelection-items").animate({
            scrollLeft: "-=" + items
        });
    });

if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        var scrolling = false;

$(".countrySelection-paddle-right").bind("mouseover", function(event) {
            scrolling = true;
            scrollContent("right");
        }).bind("mouseout", function(event) {
            scrolling = false;
        });

$(".countrySelection-paddle-left").bind("mouseover", function(event) {
            scrolling = true;
            scrollContent("left");
        }).bind("mouseout", function(event) {
            scrolling = false;
        });

$('.countrySelection-item').click(function() {
        $('#countrySelection').find('.active').removeClass('active');
        $(this).addClass("active");
        countriesPointerScroll($(this));
        newBackgroundColour(backgroundColours)
    });

});
var newBackgroundColour = function(backgroundColours) {
    var newBackground = backgroundColours[Math.floor(Math.random() * backgroundColours.length)];
    if (newBackground != $("html").css("background-color")) {
        $("html").css("background", newBackground);
    } else {
        newBackgroundColour(backgroundColours);
    }
}

function countriesPointerScroll(ele) {

var parentScroll = $("#countrySelection-items").scrollLeft();
    var offset = ($(ele).offset().left - $('#countrySelection-items').offset().left);
    var totalelement = offset + $(ele).outerWidth() / 2;

var rt = (($(ele).offset().left) - ($('#countrySelection-wrapper').offset().left) + ($(ele).outerWidth()) / 2);
    $('#countrySelector').animate({
        left: totalelement + parentScroll
    })
}

编译

CSS

html {
    background: rgb(175, 140, 115);
    transition: background 1s ease-in-out
}
html,
body {
    height: 100%
}
#scene {
    width: 900px;
}
#contactUs {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#contactUs #countrySelection {
    border-bottom: 1px solid #EFEBE8;
    border-top: 1px solid #EFEBE8;
    position: relative;
}
#contactUs #countrySelection #countrySelection-wrapper {
    overflow: hidden;
    height: 60px;
    padding: 0 30px;
}
#countrySelection-items {
    margin: 0 20px;
    padding: 1px 0;
    list-style: none;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
#contactUs #countrySelector {
    position: relative;
    margin-left: -5px;
    top: -1px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #EFEBE8;
}
.active p {
    color: #fff !important;
}
#contactUs #countrySelection ul li {
    display: inline-block;
    margin: 16px 24px;
}
#contactUs p,
#contactUs a {
    color: #EFEBE8;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}
a,
a:visited,
p {
    text-decoration: none;
    line-height: 1.3;
    letter-spacing: 0.25px;
    font-family: 'Gill Sans', Calibri, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 100;
    text-align: center;
}
a {
    font-size: 1rem;
}
p {
    font-size: 1.5rem;
}
.slick-prev,
.icon-chevronleft {
    transform: rotate(180deg);
}
.icon-chevronleft,
.icon-chevronright {
    background-image: url('http://www.res-testing.com/images/arrow.png');
    background-repeat: no-repeat;
    background-size: 20px;
}
.countrySelection-paddle-left,
.countrySelection-paddle-right {
    cursor: pointer;
    border: none;
    position: absolute;
    top: 20px;
    background-color: transparent;
    width: 25px;
    height: 25px;
    margin-left: auto;
    margin-right: auto;
}
.slick-prev,
.countrySelection-paddle-left {
    left: 0;
}
.arrow {
    width: 25px;
    margin-left: auto;
    margin-right: auto;
}
.slick-next,
.countrySelection-paddle-right {
    right: 0;
}

HTML

Multi-device scrolling menu 本例展示了多设备响应式设计的一种有趣的实现思路，即不是通过汉堡菜单隐藏，而是使用滚动菜单，当界面变小时，显示的菜单项变少，当用户鼠标悬停（或移动触摸拖拉）时，自动左右滚动。

menu, responsive

编辑器支持Emmet

快捷键

Multi-device scrolling menu 本例展示了多设备响应式设计的一种有趣的实现思路，即不是通过汉堡菜单隐藏，而是使用滚动菜单，当界面变小时，显示的菜单项变少，当用户鼠标悬停（或移动触摸拖拉）时，自动左右滚动。

menu, responsive

一款响应式双场景Bootstrap4网页模板（带头部菜单栏滚动动画）

HTML5 很棒的一款移动应用向下弹出式菜单

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：