怎么利用CSS实现HTML5响应式导航栏
2016-01-13 16:55
751 查看
在html5中实现响应式导航栏的方法有很多种,如何利用纯CSS来现实这一功能,在这里小编就通过实例来和大家讲解,纯CSS实现的HTML5响应式导航栏的方法和技巧。
目前响应试web页面已经逐渐开始盛行,除了将页面的内容以及布局结构实现响应试以外,剩下的重点就是实现导航栏的响应试,当然方法有很多,不过最 近我发现了一个新的无需使用Javascript就能轻松实现响应试导航栏的技术,它采用的是简洁的html5标签结构来实现的应式导航栏,导航栏能够被 轻松的控制在左侧,中部,已经右侧。当鼠标经过导航栏时就会平滑拉菜单,不仅如此该响应式导航栏在手机屏幕和ie浏览器中也同样能够正常运行。
这篇文章的目的是让大家能够知道 如何将普通的导航栏转变成小型的可伸缩的下拉菜单。
这种技术非常适合用于多栏目导航栏,如下图所示你可以将所有的导航栏目精简成一个优雅的菜单按钮。
如果想使用纯css实现该效果,首先应该使用标签,它是创建css下拉框所必须使用的结构,用.current类标记出当前的菜单栏目。HTML5导航标签结构
首先以下所使用的css属性跟我们平常见到的方法没什么区别,细节就不多说了,但是我们注意到 nav ui li元素中使用了display:inline-block;这个属性替代了原先常用的float:left属性,这就是不同的地方。
使用display:inline-block这个方法后,我们就可以随意的调整转换后菜单按钮的位置了,如果要改变按钮位置只需在 nav ul 元素中添加 text-align:left; text-align:center; 或者 text-align:right;
即可。
我们都知道IE8已经之前的版本对html5中的标签和media query方法是无法提供支持的,所以我们在使用前应该先先加上css3-mediaqueries.js(或者respond.js)和 html5shim.js两个脚本,来提供相应的回退支持。
最后再加上media query检测方法来对屏幕宽度进行识别,这里设置了以600px的宽度为断点,意味着当浏览器或者屏幕宽度小于600px像素时就将使用一下css属性。
怎么利用CSS实现HTML5响应式导航栏,就先谈到这里,要学习更多HTML知识,来这里没差:http://www.elsyy.com/course/c-60-1-1-ASC-
目前响应试web页面已经逐渐开始盛行,除了将页面的内容以及布局结构实现响应试以外,剩下的重点就是实现导航栏的响应试,当然方法有很多,不过最 近我发现了一个新的无需使用Javascript就能轻松实现响应试导航栏的技术,它采用的是简洁的html5标签结构来实现的应式导航栏,导航栏能够被 轻松的控制在左侧,中部,已经右侧。当鼠标经过导航栏时就会平滑拉菜单,不仅如此该响应式导航栏在手机屏幕和ie浏览器中也同样能够正常运行。
这篇文章的目的是让大家能够知道 如何将普通的导航栏转变成小型的可伸缩的下拉菜单。
这种技术非常适合用于多栏目导航栏,如下图所示你可以将所有的导航栏目精简成一个优雅的菜单按钮。
<nav class = "nav"> <ul> <li class = "current"><a href = "www.elsyy.com">portfolio</a></li> <li><a href = "www.elsyy.com">Illustration</a></li> <li><a href = "www.elsyy.com">Web Design</a></li> <li><a href = "www.elsyy.com">Print Media</a></li> <li><a href = "www.elsyy.com">Graphic Disign</a></li> </ul> </nav>HTML5导航标签结构
如果想使用纯css实现该效果,首先应该使用标签,它是创建css下拉框所必须使用的结构,用.current类标记出当前的菜单栏目。HTML5导航标签结构
/* right nav */ .nav.right ul { text-align: right; } /* center nav */ .nav.center ul { text-align: center; }CSS属性
首先以下所使用的css属性跟我们平常见到的方法没什么区别,细节就不多说了,但是我们注意到 nav ui li元素中使用了display:inline-block;这个属性替代了原先常用的float:left属性,这就是不同的地方。
使用display:inline-block这个方法后,我们就可以随意的调整转换后菜单按钮的位置了,如果要改变按钮位置只需在 nav ul 元素中添加 text-align:left; text-align:center; 或者 text-align:right;
即可。
<--[if lt IE 9]> <script src="#"></script> <script src="#"></script> <![endif]-->提供老版本ie浏览器的支持
我们都知道IE8已经之前的版本对html5中的标签和media query方法是无法提供支持的,所以我们在使用前应该先先加上css3-mediaqueries.js(或者respond.js)和 html5shim.js两个脚本,来提供相应的回退支持。
最后再加上media query检测方法来对屏幕宽度进行识别,这里设置了以600px的宽度为断点,意味着当浏览器或者屏幕宽度小于600px像素时就将使用一下css属性。
@media screen and (max-width: 600px){ .nav { position: relative; min-height: 40px; } .nav ul { width: 180px; padding: 50px 0; position: absolute; top: 0px; left: 0px; border: 1px solid #aaa; background: #fff url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,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; } }
怎么利用CSS实现HTML5响应式导航栏,就先谈到这里,要学习更多HTML知识,来这里没差:http://www.elsyy.com/course/c-60-1-1-ASC-
相关文章推荐
- Modernizr——为HTML5和CSS3而生!
- HTML5开发精要 元素
- HTML5学习笔记(2):input type file的特性
- 我们都忽略了Html5的力量,如果只看成一种技术就大错特错了!
- 我们都忽略了Html5的力量,如果只看成一种技术就大错特错了!
- HTML5 WebSocket简介
- html5的一些表单属性
- selenium处理HTML5的视频播放
- 使用 HTML5、CSS3 和 MathML 在 EPUB 3 中制作版式丰富的出版物
- HTML5 CSS3专题 纯CSS打造相冊效果
- 使用CDH5.3.0中Hadoop安装包进行伪分布模式安装
- 网页加入HTML5时钟的快捷方式
- HTML5学习笔记(1):HTML5介绍与语法
- HTML5的学习(二)HTML5标签
- 03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素
- 不介绍html5,那html都有些什么内容
- 四,JavaWeb简略的谈下前端技术<一>HTML5的各个标记
- 网页版HTML5愤怒的小鸟在线效果
- html5svg简介
- 03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素