响应式布局---菜单

一个简单的响应式菜单,仅使用@media query实现.

上图的作用就是将普通的菜单在缩小浏览器屏幕到一定宽度,或者是在移动设备上的显示效果.现在分步进行实现:

第一步:先构建一个普通的菜单,具体显示如图:

结构如下:

<nav class="nav"><ul><li class="current"><a href="#">Portfolio</a></li><li><a href="#">Illustration</a></li><li><a href="#">Web Design</a></li><li><a href="#">Print Media</a></li><li><a href="#">Graphic Design</a></li></ul>
</nav>

/* nav */
.nav {position: relative;margin: 20px 0;
}
.nav ul {margin: 0;padding: 0;
}
.nav li {margin: 0 5px 10px 0;padding: 0;list-style: none;display: inline-block;
}
.nav a {padding: 3px 12px;text-decoration: none;color: #999;line-height: 100%;
}
.nav a:hover {color: #000;
}
.nav .current a {background: #999;color: #fff;border-radius: 5px;
}

第二步:实现响应式.

下面的例子展示了当屏幕为600px或者小于600px时,菜单就显示为第一幅图中右边的结果,CSS代码如下:

@media screen and (max-width: 600px) {.nav {position: relative;min-height: 40px;}    .nav ul {width: 180px;padding: 5px 0;position: absolute;top: 0;left: 0;border: solid 1px #aaa;background: #fff url(images/icon-menu.png) no-repeat 10px 11px;border-radius: 5px;box-shadow: 0 1px 2px rgba(0,0,0,.3);}.nav li {display: none; /* hide all <li> items */margin: 0;}.nav .current {display: block; /* show only current <li> item */}.nav a {display: block;padding: 5px 5px 5px 32px;text-align: left;}.nav .current a {background: none;color: #666;}/* on nav hover */.nav ul:hover {background-image: none;}.nav ul:hover li {display: block;margin: 0 0 5px;}.nav ul:hover .current {background: url(images/icon-check.png) no-repeat 10px 7px;}/* right nav */.nav.right ul {left: auto;right: 0;}/* center nav */.nav.center ul {left: 50%;margin-left: -90px;}}

试着缩小你的浏览器到600px或者小于600px,这是你的菜单应用了600px时的样式.

第三步:兼容性

<nav>和media query是HTML5的内容,IE8及以下不支持.需要添加一下JS来兼容.

<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

总结:

这只是个简单的响应式例子,你可以根据自己的页面布局应用不同的media query,来实现页面的响应式布局.

转载于:https://www.cnblogs.com/huangxi/p/4222174.html

响应式布局---菜单相关推荐

必须去收藏14个响应式布局的前端开发框架
必须去收藏14个响应式布局的前端开发框架前端开发并不是一个容易的工作,不仅需要掌握HTML.CSS和JavaScript,针对不同的浏览器版本和平台,还需要了解如何设计出跨平台的网站.如今随着响应式 ...
html5的网页布局工具,HTML5网站响应式布局的主流设计方法介绍及工具推荐
我们都知道,目前主流的pc屏幕的分辨率都是1366*768.1440*900 .1280*1024等大屏的显示器.所以网页不能再按照1024的标准来设计或者是前端重构了.加上现在移动互联网的发展势头, ...
流体式布局与响应式布局_将固定像素设计转换为流体比例布局
流体式布局与响应式布局 Responsive web design has been a prime necessity for every enterprise ever since Google ...
10款非常有效的帮助你设计超酷响应式布局的jQuery插件
日期:2012/02/24 来源:GBin1.com 如果你关注最近几年的web设计,那么响应式布局(responsive layout)设计对于你来说肯定不是一个陌生的词汇. 相对于传统的页面设 ...
CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
html手机响应式布局,手机网页设计中的响应式布局
随着各种特性和智能手机浏览器的发展,网页能够根据设备显示变得很重要.我们不用再根据桌面浏览器窗口尺寸建立网站,然后让它们在更小的移动浏览器上渲染.现在,我们可以让元素大小和布局针对设备作出改变. 在C ...
Bootstrap实战 - 响应式布局
一.介绍响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...
html响应式弹性布局,CSS3响应式布局之弹性盒子
CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...
微金所页面制作（Bootstrap 响应式开发栅格布局响应式布局）
该页面适用于 PC端和移动端,在响应式开发的媒体查询下能够适配所有屏幕. 一.页面效果二.结构样式说明 (需引入bootstrap 相关样式文件) 结构分为八块: 头部块:.wjs_header ...

响应式布局---菜单

响应式布局---菜单相关推荐

最新文章

热门文章