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

2018-06-23 18:25:20来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

目的:

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

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

思路:

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

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

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

问题:

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

代码如下:

CSS Code复制内容到剪贴板

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:css解决display:inline-block;产生的缝隙(间隙)的方法

下一篇:用CSS3代码绘制Hello Kitty的过程