最近新开发了一个项目,设计上要求是自适应的可伸缩的导航栏,网上找了很多地方 都没有找到。后来找到了一个插件,模仿着做了出来,现在简单记录一下。直接上代码。
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>
js
<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的关键就是 判断外面盒子的宽度和里面内容的宽度的大小,然后来决定是增加元素还是减少元素。