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

时间:2021-08-15 16:49:58

使用media Queries实现一个响应式的菜单

 

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

作者:黄博文@无敌北瓜 
出处:http://www.cnblogs.com/huang0925
黄博文的地盘
本文版权归本人和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
 
 

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

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

    Media queries是CSS3引入的一个特性,使用它可以方便的实现各种响应式效果.在这个示例中我们将会使用media queries实现一个响应式的菜单.这个菜单会根据当前浏览器屏幕的大小变化而 ...

  2. CSS3 media queries &plus; jQuery实现响应式导航

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

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

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

  4. 响应式导航菜单(css&plus;js)

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

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

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

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

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

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

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

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

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

  9. BootStrap实现简单响应式导航菜单

    用BootStrap实现响应式导航栏,我会对其中的一些样式进行说明.   先上代码,是一个很简单的Demo. <!doctype html> <html> <head&g ...

随机推荐

  1. Winform在线更新

    引言 2015年第一篇,Winform在线更新,算是重操旧业吧,09年刚到北京时一直做硬件联动编程,所以大多数时间都在搞Winform, 但是从来没做过在线更新这个功能,前几天参与部门另一个项目,上来 ...

  2. 大家一起和snailren学java-&lpar;四&rpar;初始化与清理

    初始化和清理,是一个生命周期的起始.在java中,对象的初始化和对象的回收是怎样的呢? 在开发c++的时候,有构造器的概念.即对象的创建,首先默认调用构造器进行初始化.在java中也有“构造器”.ja ...

  3. IOS开发之KVC与KVO简述

    KVC:Key-Value Coding KVO:Key-Value Observing Person.m #import <Foundation/Foundation.h> @inter ...

  4. 基于visual Studio2013解决C语言竞赛题之0405阶乘求和

      题目 解决代码及点评 这道题和上一道题类似,第n个累加项 = n-1累加项的n倍 由于有这个规律,我们可以用一个for循环实现 但是例子代码并没有这么做,大家可以回去修改下代码,使得代码更 ...

  5. 一道变态的js题

    一道腾讯js面试题 题目如下: f = function() {return true;}; g = function() {return false;}; (function() { if (g() ...

  6. 三&comma;ESP8266 SPI

    重点是说SPI通信协议,,,, 不要害怕协议因为协议是人规定的,,刚好我也是人......规定的协议既然能成为规范让所有人所接受,那么必然有它的优势和优点,必然值得学习,, 害怕协议的人是因为当初碰到 ...

  7. &lbrack;最短路&rsqb;信使&lpar;msner&rpar;

    [题目描述] 战争时期,前线有n个哨所,每个哨所可能会与其他若干个哨所之间有通信联系.信使负责在哨所之间传递信息,当然,这是要花费一定时间的(以天为单位).指挥部设在第一个哨所.当指挥部下达一个命令后 ...

  8. freeswitch设置支持视频语音编码

    1.修改FreeSWITCH安装路径下/conf/var.xml文件中,增加: <X-PRE-PROCESS cmd=="set" data="proxy_medi ...

  9. 华为NB-IOT报告

    转 https://blog.csdn.net/np4rHI455vg29y2/article/details/78958137 [NB-IoT]华为NB-IoT网络报告(完整版) 2018年01月0 ...

  10. XML转JSON工具类

    原文地址:http://blog.csdn.net/lovesummerforever/article/details/26396465 1.pom依赖 <dependency> < ...