响应式导航在纯javascript中，当空间用完时，将项目隐藏到下拉列表中

我有一个导航，比如说7个项目，当分辨率变小时，项目会放在新行中。我需要做的是，当一个项目不再适合导航时，它应该在导航的右侧放置一个“更多”下拉按钮。并将不适合的项目放在下拉列表中

我需要的是纯javascript，而不是jquery

$（文档）.ready（函数（）{
函数calcWidth（）{
var-navwidth=0；
var morewidth=$（'#main.more'）.outerWidth（true）；
$（'#main>li:not（.more'）。每个（函数（）{
navwidth+=$（此）.outerWidth（真）；
});
var availablespace=$（'#Mainbar'）.width（）-morewidth；
如果（导航宽度>可用空间）{
var lastItem=$（'#main>li:not（.more'）.last（）；
lastItem.attr（'data-width'，lastItem.outerWidth（true））；
lastItem.prependTo（$（'main.more-ul'）；
calcWidth（）；
}否则{
var firstmorelement=$（'#main li.more li'）.first（）；
if（navwidth+firstmorelement.data（'width'）<可用空间）{
firstmorelement.insertBefore（$（'#main.more'）；
}
}
如果（$（'.more li'）。长度>0）{
$（'.more'）.css（'display'，'block'）；
}否则{
$（'.more'）.css（'display'，'none'）；
}
}
$（窗口）.on（'resize load'，function（））{
calcWidth（）；
});
});
#导航主机{
*缩放：1；
}
#主导航：之前，
#主导航：之后{
显示：表格；
内容：“；
}
#主导航：之后{
明确：两者皆有；
}
#主条{
明确：两者皆有；
位置：相对位置；
宽度：100%；
}
#主板>保险商实验室{
浮动：左；
列表样式：无；
保证金：0；
填充：0；
z指数：5；
}
#Mainbar>ul>li{
背景：无；
浮动：左；
字体大小：14px；
页边距底部：0；
左侧填充：0；
位置：相对位置；
文本转换：大写；
}
#Mainbar>ul>li.hidden{
显示：无；
}
#Mainbar>ul>li:悬停{
背景：#f00；
}
#Mainbar>ul>li:悬停ul{
显示：块；
}
#主栏a{
显示：块；
不透明度：0.75；
填充：15px；
}
#主工具栏a：悬停{
不透明度：1；
}
#主机{
显示：无；
列表样式：无；
保证金：0；
填充：15px0；
位置：绝对位置；
最高：100%；
右：0；
}
#主机{
边缘底部：15px；
填充：0 15px；
空白：nowrap；
}