实现结果如下:
大屏幕时候(pc)
小屏幕时候:
可以发现变成小屏幕的时候 形成了折叠按钮 按钮点击会形成下拉框 下拉框中的内容就是之前的链接模块。
需要注意的是这里下拉模块把下方的正文内容往下顶了 真实的手机端 大部分是会形成一个浮动层 悬浮到上层不占据空间,所以有多种方法:1. 原生、js都可以自己写一个满意的组件 2.vue很多有组件库 很方便结合组件库和css3 media query技术是手段来完成功能。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自适应导航栏</title>
<style>
/*简单清除默认样式*/
* {
margin: 0;
padding: 0;
}
/*导航宽屏时主体部分*/
nav {
width: 100%;
height: 50px;
background-color: #444;
overflow: hidden;
min-width: 320px;
}
.nav {
max-width: 80%;
margin: 0 auto;
height: 50px;
}
.logo {
width: 50px;
height: 50px;
float: left;
}
.logo img {
width: 100%;
display: block;
}
.navbar {
width: 80%;