根据屏幕大小，将菜单项合并到下拉列表

zj_zjk_sjz

已于 2022-11-14 19:50:56 修改

阅读量156

点赞数

文章标签： html css javascript

于 2022-11-14 19:47:18 首次发布

本文链接：https://blog.csdn.net/qq_41459772/article/details/127853952

版权

该博客介绍了如何使用HTML、CSS和JavaScript实现一个类似浏览器收藏栏的导航菜单。当菜单项超过一定数量时，超出部分将被隐藏并显示“更多”按钮。点击“更多”按钮，隐藏的菜单项会显示在一个绝对定位的接收器元素中。同时，代码实现了窗口大小改变时的响应式布局，确保菜单的适配性。

摘要由CSDN通过智能技术生成

类似效果，样式自行更改

跟浏览器收藏栏（如上图）类似

html

<nav class="nav-bar">
    <div class="container" style="position:relative" >
        <div id="navBar">
            <ul id="menuName">
                <li>List item 0</li>
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
                <li>List item 4</li>
                <li>List item 5</li>
                <li>List item 6</li>
                <li>List item 7</li>
                <li>List item 8</li>
                <li>List item 9</li>
                <li>List item 10</li>
                <li>List item 11</li>
                <li>List item 12</li>
                <li>List item 13</li>
                <li></li>
            </ul>
            <div id="more" style="display:none">more>></div>
        </div>
        <ul id="receiver"></ul>
    </div>
</nav>

js

<script>
    var menuNames = document.getElementById('menuName'),
        rec = document.getElementById('receiver'),
        more = document.getElementById('more');
    if (more) {
        more.onclick = moreClick
    }
    window.onresize = resize;
    resize();
    function resize() {
        const rChildren = rec.children;
        let numW = 0;

        [...rChildren].forEach(item => {
            item.outHTML = '';
            menuNames.appendChild(item);
        })

        const showWidth = menuNames.offsetWidth,
            tChildren = menuNames.children;

        [...tChildren].forEach(item => {
            numW += item.offsetWidth;

            if (numW > showWidth) {
                item.outHTML = '';
                rec.appendChild(item);
            }
        });

        //判断菜单列表的长度，决定‘more’显示与否
        if (menuNames.offsetWidth < 1420) {
            more.style.display = 'block'
        } else {
            more.style.display = 'none'
        }
    }

    function moreClick() {
        isHidden(rec) ? rec.style.display = 'block' : rec.style.display = 'none';
        function isHidden(el) {
            var style = window.getComputedStyle(el);
            return (style.display === 'none')
        }
    }
</script>

css

#navBar {
    display: flex;
    align-items: center;
}
#menuName {
    height: 20px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
}
#menuName li {
    float: left;
    padding:0 10px;
    box-sizing: border-box;
    list-style: none;
}
#receiver{
    position:absolute;
    right:5px;
    top:40px;
    width:100px;
    background:#1e7e34;
    border-radius: 10px;
    display:none;
    padding-left:10px;
}
#receiver li {
    list-style: none;
    width: 100px;
}