如何检测菜单数量可变的标题的断点？

Question

我正在为Web应用程序创建头，并且我希望该头是可配置的：管理员可以根据需要添加或删除菜单。 例如 ： 要么

这两个导航栏的断点不同。 所以我想知道我该如何处理？ 如何检测菜单对于屏幕而言太长，因此必须缩小菜单？

媒体查询是固定的，因此它不是一个很好的解决方案，而且我也找不到如何在JavaScript中执行此操作。

Answer 1

这是一种基本方法。 它使用jQuery来检测徽标和菜单项之间的距离，如果它低于任意值（此处为100px），则会添加一些CSS。 当距离太小时，您可以扩展此功能以执行任何操作。 降低填充，徽标大小，移动菜单中的交换等。

jsfiddle在这里

 $(window).on('load resize', function() { var menuOffset = $('.menu-items').offset().left var logoWidth = $('.logo').width(); if (menuOffset - logoWidth <= 100) { $('.menu-items').css('background-color', 'red'); } else if (menuOffset - logoWidth > 100) { $('.menu-items').css('background-color', 'blue'); } }); 

 body { font-family: helvetica; font-weight: bold; } .nav { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .nav .menu-items { display: flex; } .nav .menu-items .item { padding: 0 10px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="nav"> <div class="logo"> logo </div> <div class="menu-items"> <div class="item"> item </div> <div class="item"> item </div> <div class="item"> item </div> <div class="item"> item </div> <div class="item"> item </div> <div class="item"> item </div> <div class="item"> item </div> </div> </nav>