Javascript 我想创建一个可以有多个列表项的水平导航栏

我想创建一个包含多个列表项的导航栏。将主视图上的按钮数量限制为6个按钮，其余页面将置于“…”菜单下

我能够创建水平条，我想知道如何将其限制为6个按钮，并将剩余的放置在“…”下

我正在从数据库中获取数据，并在循环内部创建导航面板中的按钮。但是，我想将其限制为6个按钮，其他项目应放在“…”下。当我们从“…”中选择一个项目时，它应该出现在屏幕上。如果我得到任何样本代码，这也将是有益的

下面是代码，不确定它是否有助于调试

for (var j = 0; j < memberNavigationList.$values.length; j++) {
                var jitem = memberNavigationList.$values[j];
                var url = integra_tolower(integra_trim(APPPATH + jitem.URL));
                var currenturl = integra_tolower(integra_trim(self.location.href));
                if ((jitem.URL.toLowerCase().indexOf('emr/summary/visitdock') != -1 || jitem.URL.toLowerCase() == 'applications/encounternote.aspx') && jitem.PreviousVisit != '' && jitem.PreviousVisit.length > 10) {
                    sidebar_nav.push('<li id="menuTertairyItemId_' + j + '" style="margin: 0 5px 0 0;"  onmouseover="$ic.tertiaryNav.Showtooltip(this);"  onclick="openVisitFromNavbar(\'')
                    sidebar_nav.push(jitem.PreviousVisit + '$' + jitem.PreviousVisitDate + '$' + EMRContextApplicationId);
                    if (jitem.URL.toLowerCase().indexOf('emr/summary/visitdock') != -1) {
                        sidebar_nav.push('\'' + ',' + '\'' + jitem.URL);
                    }


                    sidebar_nav.push('\');"');
                    sidebar_nav.push('data-toggle="tooltip" data-placement="bottom" title="' + jitem.Description + '" class="myTip btn pull-left ic2-flowsheet-btn-gray ' + ' ');

                }  else {
                    if (jitem.Indented === true) {
                        sidebar_nav.push('<li id="menuTertairyItemId_' + j + '" style="margin: 0 5px 0 0;" onclick="$ic.tertiaryNav.menuItemClicked(this,\'' + url + '\',\'' + jitem.URL.toUpperCase() + '\',\'' + jitem.description + '\',\'' + jitem.PageType + '\');" onmouseover="$ic.tertiaryNav.Showtooltip(this)" data-toggle="tooltip" data-placement="bottom" title="' + jitem.Description + '" class="myTip ic2-flowsheet-btn-gray btn pull-left '  + '');
                    } else {

                        sidebar_nav.push('<li id="menuTertairyItemId_' + j + '" style="margin: 0 5px 0 0;" onclick="$ic.tertiaryNav.menuItemClicked(this,\'' + url + '\',\'' + jitem.URL.toUpperCase() + '\',\'' + jitem.description + '\',\'' + jitem.PageType + '\');" onmouseover="$ic.tertiaryNav.Showtooltip(this)" data-toggle="tooltip" data-placement="bottom" title="' + jitem.Description + '" class="myTip ic2-flowsheet-btn-gray btn pull-left ' + '');
                    }
                }

                if (currenturl.indexOf(url) > -1 || (currenturl.match(/addpatientencounter.aspx/g) && url.match(/patientencounters.aspx/g))) {
                    sidebar_nav.push(' ic2-flowsheet-btn-gray-active ');
                } else {
                    if (url.indexOf("popover") > -1) {
                        sidebar_nav.push(' ic2-flowsheet-btn-green ');
                    } else {
                        sidebar_nav.push('  ');
                    }
                }               
               

                sidebar_nav.push('">');
                sidebar_nav.push('<a href="#"></a>'+jitem.Description);
                sidebar_nav.push('</li>');
            }
        }
        
        

        sidebar_nav.push('</ul>'); // close the sidebarnav

for（var j=0；j”）；
侧边栏导航推送（''+jitem.说明）；
侧边栏导航按钮（“”）；
}
}
侧边栏导航按钮（“”）；//关闭侧边栏导航按钮

这是一个示例，它将帮助您

身体{
字体系列：Arial、Helvetica、无衬线字体；
}
navbar先生{
溢出：隐藏；
背景色：#333；
}
纳瓦尔先生{
浮动：左；
字体大小：16px；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.下拉列表{
浮动：左；
溢出：隐藏；
}
.下拉菜单{
字体大小：16px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
.navbar a:悬停，.dropdown:悬停.dropbtn{
背景色：红色；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
浮动：无；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉列表内容a：悬停{
背景色：#ddd；
}
.下拉：悬停.下拉内容{
显示：块；
}
下拉列表
导航栏中的下拉菜单
将鼠标悬停在“下拉”链接上以查看下拉菜单

现在开始，我已经为您完成了：我也在多个浏览器中进行了测试，效果很好。您应该显示您的代码！其余的都是神奇的