Media queries是CSS3引入的一个特性,使用它可以方便的实现各种响应式效果。在这个示例中我们将会使用media queries实现一个响应式的菜单。这个菜单会根据当前浏览器屏幕的大小变化而自动的呈现出不同的样式。如果浏览器屏幕大于800px,菜单则会显示在页面左侧;如果浏览器屏幕介于401px到800px之间,菜单则会显示在页面上方,与其他内容是上下关系;如果屏幕小于400px,则菜单仍在页面上方,但是菜单会变为下拉列表形式。

预览地址: http://htmlpreview.github.io/?https://github.com/huangbowen521/ResponsiveDesignTrial/blob/master/responsiveMenu.html

要实现这样的特效,首先要创建一个下拉列表形式的菜单,如下所示。

1
2
3
4
5
6
7
8
9
<div class="small-menu">
<form>
<select name="URL">
<option value="home.html">我的博客首页</option>
<option value="blog.html">我的博客列表</option>
<option value="whoami.html">我的个人简介</option>
</select>
</form>
</div>

然后还要创建一个使用了ul和li元素的菜单,放置在上面菜单的后面。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="large-menu">
<ul>
<li>
<a href="home.html">我的博客首页</a>
</li>
<li>
<a href="blog.html">我的博客列表</a>
</li>
<li>
<a href="whoami.html">我的个人简介</a>
</li>
</ul>
</div>

最后再加一个div元素,用来放置一些文本以填充页面其他部分。

1
2
3
4
5
6
<div class="content">
<p>
上周五的时候我对某个项目做了一个更改,将里面的构建脚本由maven换成了gradle。原因之一是因为maven的配置太繁琐,由于其引入了lifecycle的机制,
导致其不够灵活,而gradle作为用groovy写的DSL,代码清爽、简单、灵活。原因之二是我们所有的项目构建都换成了gradle,为了保持技术栈单一,此项目
做迁移也是大势所趋。</p>
</div>

接下来就要设置media queries了,指定在不同屏幕尺寸下菜单表现出不同的样式。

当屏幕宽度小于400px时,我们需要隐藏ul菜单,显现下拉框菜单。

1
2
3
4
5
6
7
8
9
10
@media screen and ( max-width: 400px ) {

        .small-menu {
display: inline;
} .large-menu {
display: none;
}
}

当屏幕介于401px和800px时,显示ul菜单,并且将其设置为水平排列。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@media screen and ( min-width: 401px ) and ( max-width: 800px ) {

    .small-menu {
display: none;
} .large-menu {
display: inline;
width: 100%;
} .large-menu ul {
list-style-type: none;
} .large-menu ul li {
display: inline;
} .content {
width: 100%;
}
}

当屏幕尺寸大于800px时,则将ul菜单设置为页面左边,并且菜单排列为垂直排列。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@media screen and ( min-width: 801px ) {

    .small-menu {
display: none;
} .large-menu {
display: inline;
float: left;
width: 20%;
} .content {
float: right;
width: 80%; }
}

这样就简单实现了一个响应式的菜单,其实主要就是根据media queries来设置screen的条件,根据不同screen宽度来给页面元素设置对应的样式。当屏幕宽度发生变化时,会自动应用相应的样式。

代码已经被放置到了github上了,地址是https://github.com/huangbowen521/ResponsiveDesignTrial

使用media Queries实现一个响应式的菜单的更多相关文章

  1. media Queries实现一个响应式的菜单

    使用media Queries实现一个响应式的菜单   Media queries是CSS3引入的一个特性,使用它可以方便的实现各种响应式效果.在这个示例中我们将会使用media queries实现一 ...

  2. CSS3 media queries + jQuery实现响应式导航

    目的: 实现一个响应式导航,当屏幕宽度大于700px时,效果如下: 当屏幕宽度小于700px时,导航变成一个小按钮,点击之后有一个菜单慢慢拉下来: 思路: 1.为了之后在菜单上绑定事件,并且不向DOM ...

  3. AudioPlayer.js,一个响应式且支持触摸操作的jquery音频插件

    AudioPlayer.js是一个响应式.支持触摸操作的HTML5 的音乐播放器.本文是对其官网的说用说明文档得翻译,博主第一次翻译外文.不到之处还请谅解.之处. JS文件地址:http://osva ...

  4. 使用jQuery开发一个响应式超酷整合RSS信息阅读杂志

    在线演示1 本地下载     申请达人,去除赞助商链接 如果大家喜欢阅读博客文章的话,可能都会使用RSS阅读器,今天这里我们将使用jQuery来开发一个响应式的RSS信息阅读应用,使用它你可以将你喜欢 ...

  5. 一个响应式框架——agera

    Google在上周开源了一个响应式框架——agera,相信它会慢慢地被广大程序员所熟知.我个人对这样的技术是很感兴趣的,在这之前也研究过RxJava,所以在得知Google开源了这样的框架之后第一时间 ...

  6. 一个响应式数据库框架SQLBrite,完美解决数据库和UI的同步更新!

    相信小伙伴们在开发中或多或少都可能遇到过这样的问题:打开一个应用后,为了快速响应,先将数据库中的数据呈现给用户,然后再去网络上请求数据,请求成功之后将数据缓存至数据库,同时更新UI,但是我们经常会这样 ...

  7. 响应式导航菜单(css+js)

    1.响应式导航菜单 先来看下效果图把: 当视口大于640px的时候,导航条会显示在外,当视口小于768px的时候,导航菜单需要隐藏起来!代码如下: <!doctype html> < ...

  8. 使用media query 来实现响应式设计

    你的网页在手机上显示效果可以在电脑上一样好看.完成这个任务的奥秘被称为响应式设计,媒体查询(media query)是实现网页响应的关键. 在电脑上一个例子: <div class=" ...

  9. 如何使用CSS绘制一个响应式的矩形

    背景: 最近因为需要用到绘制类似九宫格的需求,所以研究了一下响应式矩形的实现方案. 有如下几种方案: 使用js来设置元素的高度 使用vw单位  div {width: 50vw; height: 50 ...

随机推荐

  1. socket-自我总结(1)

    socket是个啥:我的总结如下: socket:针对服务器----客户端socket,进行打开,读写,管理的操作. socket也称套接字,IP跟端口.用来对两台服务器之间的通信的.一个IP跟端口, ...

  2. oc中的枚举定义

    typedef NS_ENUM(类型,枚举名){        枚举名+值名,       枚举名+值名,}; 该方法定义的枚举,OC会自动把其转换成合适当前版本的枚举.如果枚举值可合并的话 NS_E ...

  3. Lambda表达式的语法格式

    Lambda表达式的语法格式: 参数列表 => 语句或语句块 “Lambda表达式”是委托的实现方法,所以必须遵循以下规则: 1)“Lambda表达式”的参数数量必须和“委托”的参数数量相同: ...

  4. ELK日志管理之——logstash部署

    1.yum源配置 [root@localhost ~]# cat > /etc/yum.repos.d/logstash.repo <<EOF [logstash-1.5] name ...

  5. ssh免密码登陆

    Ssh免密码登陆设置 准备工作:1.确保两个主机里没有id_rsa.pub和authorized_keys的文件(这两个文件会影响实验的结果)# find / -name id_rsa.pub可查看是 ...

  6. Java Web的开始学习

    今天开始学习Web了,需要的前提技能是  XML ,我还不太熟悉,今天的任务需要熟悉一下 XML-- 输入输出流  I/O     序列化反序列化,也需要看一下,我看这两块会有用到. 任务: ---- ...

  7. (转)对Oracle导出文件错误和DMP文件结构的分析,EXP-00008: 遇到 ORACLE 错误 904 ORA-00904: "MAXSIZE": invalid identifier

    EXP-00008: 遇到 ORACLE 错误 904 ORA-00904: "MAXSIZE": invalid identifier 原因:oracle版本不一样 执行 C:/ ...

  8. ngxtop:在命令行实时监控 Nginx 的神器

    Nginx网站服务器在生产环境中运行的时候需要进行实时监控.实际上,诸如Nagios, Zabbix, Munin 的网络监控软件是支持 Nginx 监控的. 如果你不需要以上软件提供的综合性报告或者 ...

  9. 数据库的char(n)

    Mysql中的char(n)或者varchar(n) 其中的n就是代表列,不代表字节! varchar(n)其中的n最多是65535 , 应该在创建表的同时,指定表的编码方式为latin1,因为lat ...

  10. 使用MyBatis Generator自动创建代码

    SSM框架--使用MyBatis Generator自动创建代码 1. 目录说明 使用自动生成有很多方式,可以在eclipse中安装插件,但是以下将要介绍的这种方式我认为很轻松,最简单,不需要装插件, ...