css3媒体查询导航设计,如何用纯css 媒体查询media queries实现响应式汉堡导航菜单...

Hamburger_icon

PC端和手机移动端均适配，依据设备的宽度大小决定是否值下拉菜单样式

一、 head里添加meta移动端的样式

width

viewport的宽度

height

viewport的高度

initial-scale

初始的缩放比例 eg:设置成2.0 那么最初加载的页面就会放大2倍

minimum-scale

允许用户缩放到的最小比例

maximum-scale

允许用户缩放到的最大比例 eg:设置成2.0 那么页面用户最多可以放大2倍

user-scalable

用户是否可以手动缩放默认值是yes，如果我们设置成no，那么上面的两个sacle就失效，因为已经禁止用户手动调整缩放

width=device-width

在content里设置屏幕宽度为设备宽度

☰

Business

Service

Learn more

Free Trial

☰ 这个汉堡包menu菜单样子其实有代码实现的 "☰" 而且是作为字体显示的，可以直接用font-size直接调整大小

哈哈，为了打出这个代码，还要\反斜杠转义

CSS

css样式 -通用

body{

width: 100%;

height: 100%;

margin:0; //浏览器默认的body的margin是8px;由浏览器的user-agent-stylesheet提供的。所以我们直接覆盖默认就可以了，

}

html{

font-family:'helvetica neue',sans-serif; //可以写很多种字体样式，意思是浏览器自己一个个识别，前一个没有就看后一个，一直往后找，直到找到可以用的

}

.nav{

float: right;

text-align: right;

height: 70px;

line-height: 70px;

border-bottom: 1px solid #eaeaea;

}

label{

display: none;

}

#toggle{

display:none;

}

.menu a{

margin: 0 10px;

text-decoration: none;

color: gray;

}

.menu{

margin: 0 30px 0 0;

}

.menu a span{

color:#54d17a;

}

//添加@media样式：

@media only screen and (max-width: 500px) {

label{

display: block;

cursor: pointer;

width: 26px;

float: right;

}

.menu{

width: 100%;

display: none;

text-align: center;

}

.menu a{

display: block;

clear:right;

}

#toggle:checked + .menu{ //这是个技术点

transition:all 0.4s ease-in;

display: block;

}

label用for绑定的input，自带了点击事件，点击了label的哪个汉堡logo,input就checked，这样就利用纯CSS实现了点击按钮下拉菜单出现的功能

↑(●'◡'●)设备宽度大于500px时

↑(●'◡'●) 设备宽度小于500px时

css3媒体查询导航设计,如何用纯css 媒体查询media queries实现响应式汉堡导航菜单...相关推荐

怎样使用CSS3媒体查询(Media Queries)制作响应式网站
自本周开始博主将开始同大家一起研究响应式web设计,CSS3 Media Queries是入门,本周更新,博主将给大家分享media queries的一些常用的用法及注意事项. Media Queri ...
【网页设计】基于HTML+CSS+JavaScript学生网上报到系统响应式网站
一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览源码下载实现的代码. ...
CSS3: Media Query实现响应式Web设计
十一长假已然过去了一大半.今天倒真是晴朗的不行,向窗外望去几乎可以看到阳光穿过凉爽的空气一缕缕洒落下来的样子.自从不再是学生,对每年的几次长假就无比珍惜,想方设法让每一天都尽量过的饱满一些:夜里闭上 ...
如何用纯CSS将图片填满div，自适应容器大小
如何用纯CSS将图片填满div,自适应容器大小 2016-10-11 13:33 网页设计标签:css 代码 5987 3 我有一个模板,想按常规做一个div里面放置一个img图 ...
响应式网站导航html,jQuery和CSS3响应式网站导航幻灯片插件
这是一款即实用又炫酷的jQuery和CSS3响应式网站导航幻灯片插件.该插件将幻灯片制作为网站的hero导航,在幻灯片中展示网站各主要板块的内容,使用户可以非常容易的了解网站的主要信息. 该幻灯片插件 ...
如何用纯 CSS 实现优惠券效果
背景本文来自CODE.FUN ,讲述如何用纯 CSS 实现优惠券效果的实践案例,分享给大家. 优惠券视觉效果上面是优惠券的视觉效果,本文分享如何使用纯 CSS 实现它的主要框架,希望对大家有 ...
HTML5绘制国际象棋,如何用纯CSS实现一副国际象棋
这篇文章主要介绍了关于如何用纯CSS实现一副国际象棋 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下源代码下载每日前端实战系列的全部源代码请从 github 下载: https:/ ...
如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...

css3媒体查询导航设计,如何用纯css 媒体查询media queries实现响应式汉堡导航菜单...

css3媒体查询导航设计,如何用纯css 媒体查询media queries实现响应式汉堡导航菜单...相关推荐

最新文章

热门文章