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


Posted in HTML / CSS onSeptember 30, 2016

目的:

实现一个响应式导航,当屏幕宽度大于700px时,效果如下:

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

当屏幕宽度小于700px时,导航变成一个小按钮,点击之后有一个菜单慢慢拉下来:

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

思路:

1.为了之后在菜单上绑定事件,并且不向DOM中添加多余的节点,在大屏幕中出现的导航和小屏幕中的下拉导航必须是一个。

   所以我选择了将导航绝对定位。

2.默认导航列表是出现的,当屏幕宽度小于700px时它隐藏,并且设置position,当屏幕宽度大于700px时,它出现。或者,默认导航列表是隐藏的,当屏幕宽度大于700px时它出现在右侧,小于时隐藏。

问题:

开始的时候,我选择了默认他出现,然后出现了一个问题——只要按过了按钮,屏幕放大之后导航列表就再也不会出现了。

代码如下:

CSS Code复制内容到剪贴板
  1. <div class="nav-box">   
  2.         <ul class="nav">   
  3.           <li><a href="javascript:void(0);" class="toHome active">Home</a></li>   
  4.           <li><a href="javascript:void(0);" class="toPort">Portfolio</a></li>   
  5.           <li><a href="javascript:void(0);" class="toCont">Contact</a></li>   
  6.         </ul>   
  7.         <a href="javascript:void(0);" class="nav-btn">...</a>   
  8. </div>   
  9. .nav-box {   
  10.     positionrelative;   
  11. }   
  12. .nav-btn {   
  13.     displaynone;   
  14.     color#DE6B73;   
  15.     floatrightright;   
  16.     line-height20px;   
  17.     margin35px 0;   
  18. }   
  19. .nav {   
  20.     displayblock ;   
  21.     border-topnone;   
  22.     positionabsolute;   
  23.     rightright: 0;   
  24. }   
  25. @media(max-width:700px){   
  26.     .nav-btn{   
  27.         displayinline-block;   
  28.     }   
  29. }   
  30. @media(max-width:700px){   
  31.   .nav {   
  32.     displaynone;   
  33.     top80px;   
  34.     background-color#F79C9C;   
  35.     border-top1px solid #FFF;   
  36.     line-height60px;   
  37.   }      
  38. }   
  39. window.onload=function(){   
  40.     $(".nav-btn").click(function(){   
  41.         $(".nav").slideToggle(500);   
  42.     });   
  43. }  

于是我以为是我的思路出现了问题,我换成了默认他隐藏的方式。结果还是一样,只要按过了按钮,他就再也不会出现了。于是我开始怀疑jQuery。

解决:

然后我在F12中发现,我按过按钮之后,他会出现这样一个样式:

原来这一切都是slideToggle搞的鬼,他是通过设置元素的内联样式让元素隐藏,这种方法设置的样式的优先级是三种方式中最高的,所以在CSS中设置的block根本没有用了。

要解决这个问题,可以使用js,也可以用一个优先级更高的方式:!important.

如果选择用!important的话,就需要设置导航列表是默认隐藏的,不然他永远都无法隐藏了。

最后的CSS代码如下:

CSS Code复制内容到剪贴板
  1. .nav {   
  2.     displaynone;   
  3.     positionabsolute;   
  4.     rightright: 10%;   
  5.     top80px;   
  6.     background-color#F79C9C;   
  7.     border-top1px solid #FFF;   
  8.     line-height60px;   
  9. }   
  10. .nav-btn {   
  11.     displaynone;   
  12.     color#DE6B73;   
  13.     floatrightright;   
  14.     line-height20px;   
  15.     margin35px 0;   
  16. }   
  17. @media(max-width:700px){   
  18.     .nav-btn{   
  19.         displayinline-block;   
  20.     }   
  21. }   
  22. @media(min-width:700px){   
  23.     .nav {   
  24.         displayblock !important;   
  25.         border-topnone;   
  26.         top15px;   
  27.         rightright: 0;   
  28.     }   
  29. }  

总结:

不真正理解一个框架的原理就去用,是很危险的。

我之后试了一个jQuery的.css()方法,他同样是用内联的方式改变的元素的样式。

看样子需要研究一个jQuery是如何工作的了,这样应用的时候才能理解他的行为。

以上所述是小编给大家介绍的CSS3 media queries + jQuery实现响应式导航,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
css3实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
CSS3中的元素过渡属性transition示例详解
Nov 30 #HTML / CSS
CSS3 3D立方体效果示例-transform也不过如此
Dec 05 #HTML / CSS
前端制作动画的几种方式(css3,js)
Dec 12 #HTML / CSS
CSS3 三维变形实现立体方块特效源码
Dec 15 #HTML / CSS
css3学习之2D转换功能详解
Dec 23 #HTML / CSS
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 #HTML / CSS
学做Bootstrap的第一个页面
May 15 #HTML / CSS
You might like
mysql中存储过程、函数的一些问题
2007/02/14 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
连接Python程序与MySQL的教程
2015/04/29 Python
Python中字典的基本知识初步介绍
2015/05/21 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
Django工程的分层结构详解
2019/07/18 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
化学相关工作求职信
2013/10/02 职场文书
项目建议书格式
2014/03/12 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫