将响应式菜单拆分为两个颜色

Question

这是我在http://www.jokerleb.com/工作的网站，我正在使用免费版https://responsive.menu。它将出现在400px及更小的设备上。

如何将列拆分为2个？

如果可能的话，不知道如何编辑CSS以使其看起来正确。

Answer 1

将这些行添加到您的代码中：

@media screen and (max-width: 400px){
    #responsive-menu-container{
        width:100%;
    }

    #responsive-menu {
        display: flex;
        flex-wrap: wrap;
    }

    #responsive-menu li{
        width:50%;
    }
}

它对我有用。

Answer 2

您想要使用media queries，所以这样的事情应该适合您：

<script>
var nameArray ="${nameArray}";


var bloodNames = [
<c:forEach items="${nameArray}" var="name">
    '<c:out value="${name}" />',  
</c:forEach>
];


var  activeValue = new Array();
activeValue = [
<c:forEach items="${activeArray}" var="data">
    '<c:out value="${data}" />',  
</c:forEach>
];


var seriesData = [
    {
        name: 'Active',
        data:activeValue
    },{
        name:'InActive',
        data:[3, 01, 03,0,0,0]
    },
    {
        name:'Rejected',
        data:[4, 01, 03,0,2,0]
    }
]
$(function () { 
var myChart = Highcharts.chart('container', {
chart: {
    type: 'column'
},
title: {
    text: 'Donar Status Report'
},
subtitle: {
    text: 'Blood Name Wise'
},
xAxis: {
    categories: 
       bloodNames
    ,
    crosshair: true
},
yAxis: {
    min: 0,
    title: {
        text: 'Person (in Counts)'
    }
},
tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
},
plotOptions: {
    column: {
        pointPadding: 0.2,
        borderWidth: 0
    }
},
series: seriesData
});

请注意，您可能需要稍微使用此CSS，因为宽度会因<style> @media screen and (max-width: 400px) { #responsive-menu-container li.responsive-menu-item { width: 50%; display: inline-block; } } </style> ，padding和margin类型而异。如果你提供CSS的样本（或者更好的是fiddle），我可以更准确地帮助你。

点击类别按钮后，上面的行会使它看起来像这样：

如果您更喜欢整个宽度，请在display选项中包含此内容：

@media