（自适应导航栏带more按钮）responsive menu navigation with auto more button

最新推荐文章于 2024-05-10 09:42:44 发布

chen_sir_sh

最新推荐文章于 2024-05-10 09:42:44 发布

阅读量440

点赞数

文章标签： js html css javascript

本文链接：https://blog.csdn.net/m54584mnkj/article/details/108090473

版权

最近新开发了一个项目，设计上要求是自适应的可伸缩的导航栏，网上找了很多地方都没有找到。后来找到了一个插件，模仿着做了出来，现在简单记录一下。直接上代码。
CSS

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        body {
            margin: 0px;
            padding: 0px;
        }
        
        li {
            list-style: none;
        }
        
        .header_container {
            max-width: 1440px;
            margin: 0px auto;
            margin-top: 100px;
            display: flex;
            border: solid 1px black;
            height: 1000px;
        }
        
        .logo {
            height: 30px;
            width: 300px;
            border: solid 1px black;
        }
        
        .header_menu {
            width: calc(100% - 700px);
            float: left;
            border: solid 1px black;
            border: solid 1px red;
            height: 300px;
        }
        
        .header_nav {
            display: inline-flex;
            border: solid 1px green;
        }
        
        .header_nav li {
            padding: 0px 10px;
            white-space: nowrap;
        }
        
        .right_box {
            width: 100px;
        }
    </style>

html

<body>
    <div class="header_container">
        <div class="logo">
            我是左边的logo
        </div>
        <div class="header_menu">
            <ul class="header_nav">
                <li>
                    <a href="">主页</a>
                </li>
                <li>
                    <a href="">关于我们</a>
                </li>
                <li>
                    <a href="">详细信息</a>
                </li>
                <li>
                    <a href="">服装</a>
                </li>
                <li>
                    <a href="">大数据</a>
                </li>
                <li>
                    <a href="">日常细化</a>
                </li>
                <li>
                    <a href="">书本杂志</a>
                </li>
                <li>
                    <a href="">人才市场</a>
                </li>
                <li class="more_menu">
                    <a href="" class="more_btn" style="display: none;">更多</a>
                    <ul class="more_nav">
                        <li>
                            <a href=""></a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="right_box">
            登录
        </div>
    </div>
</body>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    var headerMenu = $(".header_menu");
    var headerNav = $(".header_nav");
    var moreMenu = $(".more_menu");
    var moreNav = $(".more_nav");
    var moreBtn = $(".more_btn")

    function moreNavBar() {
        var childNumber = 2;
        if ($(window).width() >= 768) {
            var $headerMenu = headerMenu.width();
            var $headerNav = headerNav.width();
            if ($headerNav > $headerMenu) {
                //把导航栏的倒数第二个元素查到更多的列表中
                headerNav.children("li:nth-last-child(" + childNumber + ")").prependTo(moreNav);
                moreNavBar();
            } else {
                //获取更多列表中第一个元素的宽度
                var $moreFirst = moreNav.children("li:first-child").width();
                if ($headerNav + $moreFirst < $headerMenu) {
                    moreNav.children("li:first-child").insertBefore(moreMenu);
                }
            }
            if (moreNav.children().length > 0) {
                moreBtn.show();
                childNumber = 2;
            } else {
                moreBtn.hide();
                childNumber = 1;
            }
        }
    }
    moreNavBar();
    $(window).resize(moreNavBar);
</script>

效果图
在这里插入图片描述
这只是一个简单的例子，如果想要完美的符合自己的代码要求，可以适当的更改js，达到想要的效果。js的关键就是判断外面盒子的宽度和里面内容的宽度的大小，然后来决定是增加元素还是减少元素。

chen_sir_sh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（自适应导航栏带more按钮）responsive menu navigation with auto more button

最近新开发了一个项目，设计上要求是自适应的可伸缩的导航栏，网上找了很多地方都没有找到。后来找到了一个插件，模仿着做了出来，现在简单记录一下。直接上代码。CSS <style> * { margin: 0px; padding: 0px; } body { margin: 0px; padding: 0px;
复制链接

扫一扫