media Queries实现一个响应式的菜单
使用media Queries实现一个响应式的菜单
Media queries是CSS3引入的一个特性,使用它可以方便的实现各种响应式效果。在这个示例中我们将会使用media queries实现一个响应式的菜单。这个菜单会根据当前浏览器屏幕的大小变化而自动的呈现出不同的样式。如果浏览器屏幕大于800px,菜单则会显示在页面左侧;如果浏览器屏幕介于401px到800px之间,菜单则会显示在页面上方,与其他内容是上下关系;如果屏幕小于400px,则菜单仍在页面上方,但是菜单会变为下拉列表形式。
要实现这样的特效,首先要创建一个下拉列表形式的菜单,如下所示。
1 |
|
然后还要创建一个使用了ul和li元素的菜单,放置在上面菜单的后面。
1 |
|
最后再加一个div元素,用来放置一些文本以填充页面其他部分。
1 |
|
接下来就要设置media queries了,指定在不同屏幕尺寸下菜单表现出不同的样式。
当屏幕宽度小于400px时,我们需要隐藏ul菜单,显现下拉框菜单。
1 |
|
当屏幕介于401px和800px时,显示ul菜单,并且将其设置为水平排列。
1 |
|
当屏幕尺寸大于800px时,则将ul菜单设置为页面左边,并且菜单排列为垂直排列。
1 |
|
这样就简单实现了一个响应式的菜单,其实主要就是根据media queries来设置screen的条件,根据不同screen宽度来给页面元素设置对应的样式。当屏幕宽度发生变化时,会自动应用相应的样式。
代码已经被放置到了github上了,地址是https://github.com/huangbowen521/ResponsiveDesignTrial
出处:http://www.cnblogs.com/huang0925
黄博文的地盘
本文版权归本人和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
media Queries实现一个响应式的菜单的更多相关文章
- 使用media Queries实现一个响应式的菜单
Media queries是CSS3引入的一个特性,使用它可以方便的实现各种响应式效果.在这个示例中我们将会使用media queries实现一个响应式的菜单.这个菜单会根据当前浏览器屏幕的大小变化而 ...
- CSS3 media queries + jQuery实现响应式导航
目的: 实现一个响应式导航,当屏幕宽度大于700px时,效果如下: 当屏幕宽度小于700px时,导航变成一个小按钮,点击之后有一个菜单慢慢拉下来: 思路: 1.为了之后在菜单上绑定事件,并且不向DOM ...
- AudioPlayer.js,一个响应式且支持触摸操作的jquery音频插件
AudioPlayer.js是一个响应式.支持触摸操作的HTML5 的音乐播放器.本文是对其官网的说用说明文档得翻译,博主第一次翻译外文.不到之处还请谅解.之处. JS文件地址:http://osva ...
- 响应式导航菜单(css+js)
1.响应式导航菜单 先来看下效果图把: 当视口大于640px的时候,导航条会显示在外,当视口小于768px的时候,导航菜单需要隐藏起来!代码如下: <!doctype html> < ...
- 使用jQuery开发一个响应式超酷整合RSS信息阅读杂志
在线演示1 本地下载 申请达人,去除赞助商链接 如果大家喜欢阅读博客文章的话,可能都会使用RSS阅读器,今天这里我们将使用jQuery来开发一个响应式的RSS信息阅读应用,使用它你可以将你喜欢 ...
- 一个响应式框架——agera
Google在上周开源了一个响应式框架——agera,相信它会慢慢地被广大程序员所熟知.我个人对这样的技术是很感兴趣的,在这之前也研究过RxJava,所以在得知Google开源了这样的框架之后第一时间 ...
- 一个响应式数据库框架SQLBrite,完美解决数据库和UI的同步更新!
相信小伙伴们在开发中或多或少都可能遇到过这样的问题:打开一个应用后,为了快速响应,先将数据库中的数据呈现给用户,然后再去网络上请求数据,请求成功之后将数据缓存至数据库,同时更新UI,但是我们经常会这样 ...
- 使用media query 来实现响应式设计
你的网页在手机上显示效果可以在电脑上一样好看.完成这个任务的奥秘被称为响应式设计,媒体查询(media query)是实现网页响应的关键. 在电脑上一个例子: <div class=" ...
- BootStrap实现简单响应式导航菜单
用BootStrap实现响应式导航栏,我会对其中的一些样式进行说明. 先上代码,是一个很简单的Demo. <!doctype html> <html> <head&g ...
随机推荐
- Android利用网络编程HttpClient批量上传(两)AsyncTask+HttpClient监测进展情况,并上传
请尊重别人的劳动.转载请注明出处: Android网络编程之使用HttpClient批量上传文件(二)AsyncTask+HttpClient并实现上传进度监听 执行效果图: 我曾在<Andro ...
- 第8章 装饰模式(Decorator Pattern)
原文 第8章 装饰模式(Decorator Pattern) 概述: 装饰模式是在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象. ...
- linux runtime pm在深入了解的机制
一:runtime机构简介 何为runtime机制?也就是系统在非睡眠状态,设备在空暇时能够进入runtime suspend状态同一时候不依赖系统wake_lock机制.非空暇时运行runtime ...
- 从头开始学JavaScript (七)——函数
原文:从头开始学JavaScript (七)--函数 一.return 函数在执行完return之后停止并立即退出. return返回值:与return: 如下两个例子: function sum(n ...
- 【高德地图API】从零开始学高德JS API(五)路线规划——驾车|公交|步行
原文:[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3 ...
- uboot中raise:Signal #8 caught的根本原因
在移植uboot时编译一切正常,但uboot启动中载入自己写的网卡驱动出现故障,一直在打印raise:Signal #8 caught google 百度了一番,也有非常多人遇到了这个问题,大家都说 ...
- Django----模板
为了将html页面和python代码分离开来,有必要介绍一下模板的作用,Django中自带很多模板. 以下一个html模板文件: <html> <head><title& ...
- C语言库函数大全及应用实例三
原文:C语言库函数大全及应用实例三 [编程资料]C语言库函数大全及应用实例三 函数名: ecvt 功 能: 把一个浮点数转换为字符串 用 法: char ecvt(double value, int ...
- Python 图论工具
networkx: 一个用Python语言开发的图论与复杂网络建模工具, 内置了经常使用的图与复杂网络分析算法, 能够方便的进行复杂网络数据分析.仿真建模等工作. 依赖工具: numpy pypar ...
- 苹果iOS苹果公司的手机用户都有权索赔
大家知道.手机中的操作系统(基础软件)存储在手机固(firm,ware)之中,一般而言,手机用户自己是不能修改的. 苹果iOS手机的系统后门(服务程序)也存储在手机固件之中.手机用户自己是无法删除的. ...