这天中午,下午居然有两个同学在问我响应式导航的问题。怎么做,是个问题。但是,也没有大家想的那么复杂。
Bootstrap是个很不错的响应式框架,但是要想自定义样式还比较麻烦。
还是自己动手写一个最好~,想怎么改样式就怎么改。
整体思路:
1、响应式结合CSS3的@media 代码来做。判断主要的几个分辨率情况。
我这里主要考虑了几个分辨率: PC端,认为他是 1200; ipad,认为它是 960;一般的手机,768;再小的手机,460。
当然,我这里的参考也不准确,建议项目中 参考 bootstrap的分辨率划分。
2、面包屑导航,点击显示/隐藏菜单。在JS 上主要是添加/删除类,通过类来显示/隐藏菜单。
做之前,先把
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0">
加在head标签之间,而且必须添加。
1、HTML结构
我要做的导航是这个样子,通栏式的导航。
<div class="section_big navBig">
<div class="section nav">
<h1 class="logo">
<img src="../images/logo.png" alt="xx公司">
</h1>
<ul class="navUl" id="navUl">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">公司介绍</a></li>
<li><a href="#">公司介绍</a></li>
<li><a href="#">公司介绍</a></li>
</ul>
<!-- 面包屑 -->
<div class="bread" id="bread">
<img src="../images/hanbao.png" alt="">
</div>
<!-- 面包屑 end -->
<div class="clears"></div>
</div>
</div>
框架有两层div,外层 section_big 做通栏口框架,内层 section 装载内容部分。
2、基本样式
基本样式,我这里只写了一点,其他的用不上。
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,li,ol{
list-style: none;
}
ul li{list-style: none; float: left;}
a{text-decoration: none;}
.section_big{
min-width:1200px;
width:100%;
margin-left: auto;
margin-right: auto;
}
.section{
width: 1200px;
margin-left: auto;
margin-right: auto;
}
.clears{
clear: both;
height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
}
3、PC端的样式
.navBig{
background: #f7e2cc;
}
/*logo*/
.logo{
padding-top: 10px;
padding-bottom: 10px;
float: left;
}
/*导航*/
.navUl{
float: left;
margin-left: 100px;
}
.navUl>li{
float: left;
height: 88px;
}
.navUl>li>a{
display: block;
height: 88px;
line-height: 88px;
padding-left: 20px;
padding-right: 20px;
font-size: 16px;
color: #333;
}
.navUl>li>a:hover{
background: #f7455a;
color: #fff;
}
.navUl>.active>a{
background: #f7455a;
color: #fff;
}
/*移动端的面包导航,在PC端下,是隐藏的*/
.bread{
float: right;
margin-top: 20px;
display: none;
}
PC端考虑的是 内容有1200px 的宽度。这个是我喜欢的内容宽度。按照正常的样式来写就是。
4、响应式导航
响应式导航,考虑到分辨率众多,为了方便管理各个分辨率,我使用了多个CSS样式。在实际项目中,可以用SCSS来管理它们。
按照分辨率由大到小的情况依次加载入HTML中。
这里的 test.css 就是PC 端的样式。
强调下:移动端的样式就是对PC 端样式的覆盖,所以,要把响应式样式放在 PC 端样式的后面。
每个响应式样式,里面 都是 :
@media (max-width: 960px){
/* 样式内容 */
}
这样,较小的分辨率,就会按照需要依次覆盖前面的对应的样式。
主要代码如下:
media_960.css
@media (max-width: 960px){
.section_big{
min-width: 100%; /* 在这种分辨率下,不需要1200px的宽度了,框架就是100%*/
padding-left: 15px;
padding-right: 15px;
}
.section{
width: 100%; /* 在这种分辨率下,不需要1200px的宽度了,框架就是100%*/
}
.navBig{
background: #f00; /* 换个颜色 ,表示响应式有效。*/
}
.logo img{
height: 40px; /* logo变小点,只改高度,宽度自动成比例缩放 */
}
.navUl>li{
height: 68px; /* logo变小后,整个logo的实际高度,导航要跟它保持一致 */
}
.navUl>li>a{
height: 68px;
line-height: 68px;
}
}
media_768.css
@media (max-width: 768px){
.navBig{
background: #00f; /* 换个颜色 */
}
.bread{
display: block; /* 面包导航出现 ,开始移动端导航 */
}
.nav{
position: relative; /* 导航框架 相对定位,移动导航要盖住后面的内容。 */
}
.navUl{
float: none; /* 移动导航不再浮动。 */
position: absolute; /* 移动导航其他样式,根据项目需要来写。 */
top:68px;
left:0;
right:0;
background: #00f;
margin-left: -15px;
margin-right: -15px;
display: none; /*默认,移动端的导航是隐藏的*/
}
.navUl>li{
float: none;
height: 40px;
}
.navUl>li>a{
display: block;
height: 40px;
line-height: 40px;
padding-left:15px;
padding-right: 15px;
font-size: 14px;
}
/*添加showMenu类,就可以让移动端的导航显示
这个类一定要写在 移动端的分辨率中,表示PC端无效。
*/
.navUl.showMenu{
display: block;
}
}
media_480.css
@media (max-width: 480px){
.navBig{
background: #0f0;
}
}
总的思路:对于要响应式变化的样式,一定要覆盖到位。对于不变化的样式,就不用重复写了。
4、JS代码
/**
* Created by Wendy ding on 2019/6/13.
* 面包导航。借用了jQuery
*/
$(document).ready(function(){
navBread();
});
function navBread(){
var bread = $("#bread");
var navUl = $("#navUl");
bread.on("click",function(){
navUl.toggleClass("showMenu");
});
}
navUl.toggleClass("showMenu"); 就是让 导航,添加/删除 类 showMenu。
这个 类,就是展示菜单,但是只在 移动端模式下有效。具体哪个分辨率,要根据项目来。这里是把它放在了 768px 分辨率及其以下的。
---------------------------2019.6.18 编辑-------------------------------------
有朋友在问非jQuery的JS怎么写。补一个:
let navUl = document.getElementById("navUl");
let bread = document.getElementById("bread");
bread.addEventListener("click",function(){
navUl.classList.toggle("showMenu");
});
用到了标签的classList属性,具体可以点这里参考这篇文章
---------------------------2019.6.18 编辑 end-------------------------------------
完工,看看效果。颜色写的很丑,毕竟只是demo。